Enzyme

Enzyme — это утилита для тестирования JavaScript для React, которая упрощает тестирование выходных данных ваших компонентов React. Вы также можете манипулировать, проходить по ним и в некоторых случаях моделировать время выполнения, исходя из выходных данных.

API Enzyme предназначен для интуитивного и гибкого использования, имитируя API jQuery для манипулирования и обхода DOM.

Переход с Enzyme 2.x или React < 16

Вы здесь для проверки совместимости Enzyme с React 16? Вы используете Enzyme 2.x? Отлично! Обратитесь к нашему руководству по миграции, чтобы узнать, как перейти на Enzyme v3, где поддерживается React 16.

Установка

Чтобы начать работу с enzyme, вы можете просто установить его через npm. Вам необходимо установить enzyme вместе с адаптером, соответствующим версии react (или другой библиотеки UI-компонентов), которую вы используете. Например, если вы используете enzyme с React 16, вы можете выполнить:

npm i --save-dev enzyme enzyme-adapter-react-16

Каждый адаптер может иметь дополнительные зависимости от сопоставимых пакетов, которые вам также нужно будет установить. Например, enzyme-adapter-react-16 имеет зависимости от сопоставимых пакетов react и react-dom.

В настоящее время Enzyme имеет адаптеры, обеспечивающие совместимость с React 16.x, React 15.x, React 0.14.x и React 0.13.x.

Следующие адаптеры официально предоставляются enzyme и имеют следующую совместимость с React:

Наконец, вам нужно настроить enzyme, чтобы использовать желаемый адаптер. Для этого можно использовать API верхнего уровня configure(...).

import Enzyme from 'enzyme';
import Adapter from 'enzyme-adapter-react-16';

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

Адаптеры сторонних разработчиков

Сообщество может создавать дополнительные (неофициальные) адаптеры, которые позволят enzyme работать с другими библиотеками. Если вы создали адаптер, которого нет в списке ниже, вы можете создать PR для этого файла README и добавить ссылку на него! Известные адаптеры сторонних разработчиков:

Запуск тестов Enzyme

Enzyme не навязывает конкретный тестовый запуск или библиотеку утверждений. Он должен быть совместим со всеми основными тестовыми загрузчиками и библиотеками утверждений. В документации и примерах enzyme используется mocha и chai, но вы должны быть в состоянии обобщить это на ваш фреймворк.

Если вы заинтересованы в использовании enzyme с настраиваемыми утверждениями и удобными функциями для тестирования компонентов React, вы можете рассмотреть:

• chai-enzyme с Mocha/Chai.
• jasmine-enzyme с Jasmine.
• jest-enzyme с Jest.
• should-enzyme для should.js.
• expect-enzyme для expect.

Использование Enzyme с Mocha

Использование Enzyme с Karma

Использование Enzyme с Browserify

Использование Enzyme с SystemJS

Использование Enzyme с Webpack

Использование Enzyme с JSDOM

Использование Enzyme с React Native

Использование Enzyme с Jest

Использование Enzyme с Lab

Использование Enzyme с Tape и AVA

Базовое использование

Поверхностное отображение

import React from 'react';
import { expect } from 'chai';
import { shallow } from 'enzyme';
import sinon from 'sinon';

import MyComponent from './MyComponent';
import Foo from './Foo';

describe('<MyComponent />', () => {
  it('renders three <Foo /> components', () => {
    const wrapper = shallow(<MyComponent />);
    expect(wrapper.find(Foo)).to.have.lengthOf(3);
  });

  it('renders an `.icon-star`', () => {
    const wrapper = shallow(<MyComponent />);
    expect(wrapper.find('.icon-star')).to.have.lengthOf(1);
  });

  it('renders children when passed in', () => {
    const wrapper = shallow((
      <MyComponent>
        <div className="unique" />
      </MyComponent>
    ));
    expect(wrapper.contains(<div className="unique" />)).to.equal(true);
  });

  it('simulates click events', () => {
    const onButtonClick = sinon.spy();
    const wrapper = shallow(<Foo onButtonClick={onButtonClick} />);
    wrapper.find('button').simulate('click');
    expect(onButtonClick).to.have.property('callCount', 1);
  });
});

Прочитайте полную документацию API

Полное отображение DOM

import React from 'react';
import sinon from 'sinon';
import { expect } from 'chai';
import { mount } from 'enzyme';

import Foo from './Foo';

describe('<Foo />', () => {
  it('allows us to set props', () => {
    const wrapper = mount(<Foo bar="baz" />);
    expect(wrapper.props().bar).to.equal('baz');
    wrapper.setProps({ bar: 'foo' });
    expect(wrapper.props().bar).to.equal('foo');
  });

  it('simulates click events', () => {
    const onButtonClick = sinon.spy();
    const wrapper = mount((
      <Foo onButtonClick={onButtonClick} />
    ));
    wrapper.find('button').simulate('click');
    expect(onButtonClick).to.have.property('callCount', 1);
  });

  it('calls componentDidMount', () => {
    sinon.spy(Foo.prototype, 'componentDidMount');
    const wrapper = mount(<Foo />);
    expect(Foo.prototype.componentDidMount).to.have.property('callCount', 1);
    Foo.prototype.componentDidMount.restore();
  });
});

Прочитайте полную документацию API

Статически отрисованный разметка

import React from 'react';
import { expect } from 'chai';
import { render } from 'enzyme';

import Foo from './Foo';

describe('<Foo />', () => {
  it('renders three `.foo-bar`s', () => {
    const wrapper = render(<Foo />);
    expect(wrapper.find('.foo-bar')).to.have.lengthOf(3);
  });

  it('renders the title', () => {
    const wrapper = render(<Foo title="unique" />);
    expect(wrapper.text()).to.contain('unique');
  });
});

Прочитайте полную документацию API

Поддержка React Hooks

Enzyme поддерживает React Hooks с некоторыми ограничениями в .shallow() из-за проблем в React's shallow renderer:

• useEffect() и useLayoutEffect() не вызываются в React shallow renderer. Связанная проблема

• useCallback() не запоминает обратный вызов в React shallow renderer. Связанная проблема

ReactTestUtils.act() обертка

Если вы используете React 16.8+ и .mount(), Enzyme обернёт API, включая .simulate(), .setProps(), .setContext(), .invoke() с ReactTestUtils.act(), так что вам не нужно вручную его оборачивать.

Обычный шаблон для запуска обработчиков с .act() и проверки:

const wrapper = mount(<SomeComponent />);
act(() => wrapper.prop('handler')());
wrapper.update();
expect(/* ... */);

Мы не можем обернуть результат .prop() (или .props()) с помощью .act() в Enzyme внутри, так как это нарушит равенство возвращаемого значения. Однако вы можете использовать .invoke() для упрощения кода:

const wrapper = mount(<SomeComponent />);
wrapper.invoke('handler')();
expect(/* ... */);

Будущее

Будущее Enzyme

Вклад

См. Руководство по вкладам

В дикой природе

Организации и проекты, использующие enzyme, могут добавить себя здесь.

Лицензия

MIT