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);
    });