Skip to main content

React Testing with Jest and Enzyme

Install enzyme, and enzyme-adapter-react-16 using npm

Add the following to setupTests.js file of your project
import { configure } from 'enzyme';
import Adapter from 'enzyme-adapter-react-16';
configure({ adapter: new Adapter() });

Here is a basic test
import React from 'react';
import { mount } from 'enzyme';
import Note from './Note';

const props = {
    note: "Test Note",
    index: 0,
    removeHandler: jest.fn()
}

describe('Note', () => {
    let note = mount(<Note {...props} />);
    it("renders the note text", () => {
        console.log(note.debug());
    });
});

It renders the component in console

Testing if a text you expect is there on a component
import React from 'react';
import { mount } from 'enzyme';
import Note from './Note';

const props = {
    note: "Test Note",
    index: 0,
    removeHandler: jest.fn()
}

describe('Note', () => {
    let note = mount(<Note {...props} />);
    it("renders the note text", () => {
        // console.log(note.debug());
        expect(note.find('p').text()).toEqual("Abc");
    });
});

This will fail. Because, it is written to fail. Always try failing a test before passing it.

Here is the passing test for the same
import React from 'react';
import { mount } from 'enzyme';
import Note from './Note';

const props = {
    note: "Test Note",
    index: 0,
    removeHandler: jest.fn()
}

describe('Note', () => {
    let note = mount(<Note {...props} />);
    it("renders the note text", () => {
        // console.log(note.debug());
        expect(note.find('p').text()).toEqual("Test Note");
    });
});
Here jest.fn() is used to provide a fake function.

Another test to check text in the first specified tag in the component. Here we compare what is expected to be in H1 with what actually is there:
it('renders App title', () => {
    // console.log(app.debug());
    expect(app.find("h1").text()).toEqual("Sentiment Analysis");
  });
Check if a tag or component exists
it("renders a FormControl component", () => {
      expect(app.find("FormControl").exists()).toBe(true);
    });



Comments

Post a Comment

Popular posts from this blog

Difference between .exec() and .execPopulate() in Mongoose?

Here I answer what is the difference between .exec() and .execPopulate() in Mongoose? .exec() is used with a query while .execPopulate() is used with a document Syntax for .exec() is as follows: Model.query() . populate ( 'field' ) . exec () // returns promise . then ( function ( document ) { console . log ( document ); }); Syntax for .execPopulate() is as follows: fetchedDocument . populate ( 'field' ) . execPopulate () // returns promise . then ( function ( document ) { console . log ( document ); }); When working with individual document use .execPopulate(), for model query use .exec(). Both returns a promise. One can do without .exec() or .execPopulate() but then has to pass a callback in populate.
1 comment
Read more

Python - List - Append, Count, Extend, Index, Insert, Pop, Remove, Reverse, Sort

🐍 Advance List List is widely used and it's functionalities are heavily useful. Append Adds one element at the end of the list. Syntax list1.append(value) Input l1 = [1, 2, 3] l1.append(4) l1 Output [1, 2, 3, 4] append can be used to add any datatype in a list. It can even add list inside list. Caution: Append does not return anything. It just appends the list. Count .count(value) counts the number of occurrences of an element in the list. Syntax list1.count(value) Input l1 = [1, 2, 3, 4, 3] l1.count(3) Output 2 It returns 0 if the value is not found in the list. Extend .count(value) counts the number of occurrences of an element in the list. Syntax list1.extend(list) Input l1 = [1, 2, 3] l1.extend([4, 5]) Output [1, 2, 3, 4, 5] If we use append, entire list will be added to the first list like one element. Extend, i nstead of considering a list as one element, it joins the two lists one after other. Append works in the following way. Input l1 = [1, 2, 3] l1.append([4, 5]) Output...
Post a Comment
Read more

269. Alien Dictionary

  Solution This article assumes you already have some confidence with  graph algorithms , such as  breadth-first search  and  depth-first searching . If you're familiar with those, but not with  topological sort  (the topic tag for this problem), don't panic, as you should still be able to make sense of it. It is one of the many more advanced algorithms that keen programmers tend to "invent" themselves before realizing it's already a widely known and used algorithm. There are a couple of approaches to topological sort;  Kahn's Algorithm  and DFS. A few things to keep in mind: The letters  within a word  don't tell us anything about the relative order. For example, the presence of the word  kitten  in the list does  not  tell us that the letter  k  is before the letter  i . The input can contain words followed by their prefix, for example,  abcd  and then  ab . These cases will never ...
Post a Comment
Read more