Testing react’s dom with jest and enzyme

• 01, 18, 2018
•  bullgare
•  react, Testing
• No Comments.

Install it like this:

yarn add enzyme enzyme-adapter-react-16 --registry="https://registry.npmjs.org"

Then configure your enzyme to work with react 16. Add to package.json:

"jest": {
    "setupTestFrameworkScriptFile": "/jest.custom_config.js"
}

If you are using create-react-app, then you should not override package.json but create a file in default location instead, which is src/setupTests.js.
Anyways, the content of the file should be as follows:

import { configure } from 'enzyme';
import Adapter from 'enzyme-adapter-react-16';

configure({ adapter: new Adapter() });

The main idea is:

// __tests__/CheckboxWithLabel-test.js

import React from 'react';
import {shallow} from 'enzyme';
import CheckboxWithLabel from '../CheckboxWithLabel';

test('CheckboxWithLabel changes the text after click', () => {
  // Render a checkbox with label in the document
  const checkbox = shallow();

  expect(checkbox.text()).toEqual('Off');

  checkbox.find('input').simulate('change');

  expect(checkbox.text()).toEqual('On');
});

OR

import React from 'react';
import ReactDOM from 'react-dom';
import App from './App';
import { shallow } from 'enzyme';

describe('App', () => {
  it('shows expected contents', () => {
    const component = shallow();

    expect(component.text()).toMatch('Welcome to React');
  });
});

https://facebook.github.io/jest/docs/en/tutorial-react.html
https://github.com/airbnb/enzyme/issues/1265
https://stackoverflow.com/a/46810504/801426
All matchers can be found here — https://jest-bot.github.io/jest/docs/expect.html