Testing react’s dom with jest and enzyme

Install it like this:

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

1	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": "<rootDir>/jest.custom_config.js"
}

"jest": {

"setupTestFrameworkScriptFile": "<rootDir>/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() });

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(<CheckboxWithLabel labelOn="On" labelOff="Off" />);

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

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

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

// __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(<CheckboxWithLabel labelOn="On" labelOff="Off" />);

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

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

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

});

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(<App />);

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

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(<App />);

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

Testing react’s dom with jest and enzyme

Similar Posts

LEAVE A COMMENT Отменить ответ