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

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

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

683 K Empty Slots

  Approach #1: Insert Into Sorted Structure [Accepted] Intuition Let's add flowers in the order they bloom. When each flower blooms, we check it's neighbors to see if they can satisfy the condition with the current flower. Algorithm We'll maintain  active , a sorted data structure containing every flower that has currently bloomed. When we add a flower to  active , we should check it's lower and higher neighbors. If some neighbor satisfies the condition, we know the condition occurred first on this day. Complexity Analysis Time Complexity (Java):  O(N \log N) O ( N lo g N ) , where  N N  is the length of  flowers . Every insertion and search is  O(\log N) O ( lo g N ) . Time Complexity (Python):  O(N^2) O ( N 2 ) . As above, except  list.insert  is  O(N) O ( N ) . Space Complexity:  O(N) O ( N ) , the size of  active . Approach #2: Min Queue [Accepted] Intuition For each contiguous block ("window") of  k  po...
Post a Comment
Read more