Enzyme — библиотека тестирования JavaScript для React, упрощающая утверждения, манипуляции и обход дерева компонентов.
Настройка с Jest и React 16
// test/setup.js
import Enzyme from 'enzyme';
import Adapter from 'enzyme-adapter-react-16';
Enzyme.configure({ adapter: new Adapter() });
Режимы рендеринга (Rendering Modes)
Поверхностный рендеринг (shallow)
Рендерит только целевой компонент на один уровень вглубь без отрисовки дочерних компонентов:
import { shallow } from 'enzyme';
const wrapper = shallow(<MyComponent title="Hello" />);
expect(wrapper.find('h1').text()).toEqual('Hello');
Полное монтирование в DOM (mount)
Рендерит компонент со всеми дочерними элементами в виртуальный jsdom-документ:
import { mount } from 'enzyme';
const wrapper = mount(<MyComponent />);
expect(wrapper.find('.child-node')).toHaveLength(2);
wrapper.unmount();
Обход DOM и селекторы (DOM Traversal & Finders)
wrapper.find('button') // Поиск по CSS-селектору или типу компонента
wrapper.filter('.active') // Фильтрация текущей выборки
wrapper.not('.hidden') // Инвертированная фильтрация
wrapper.children() // Получение дочерних узлов
wrapper.parent() // Получение прямого родителя
wrapper.closest('form') // Поиск ближайшего предка
wrapper.first() // Первый совпавший узел
wrapper.last() // Последний совпавший узел
wrapper.at(0) // N-й совпавший узел
Симуляция событий (Simulating Events)
// Событие клика
wrapper.find('button').simulate('click');
// Событие change с объектом фейкового события
wrapper.find('input').simulate('change', {
target: { value: 'New text' }
});
// Событие нажатия клавиши
wrapper.find('input').simulate('keydown', { keyCode: 13 });
Состояние, свойства и контекст (State, Props & Context)
// Read values
wrapper.state('loading'); // Чтение ключа состояния
wrapper.prop('disabled'); // Чтение значения prop
wrapper.props(); // Полный объект props
// Mutate values in tests
wrapper.setState({ count: 5 }); // Изменение состояния в тестах
wrapper.setProps({ active: true });
// Access underlying React instance
const instance = wrapper.instance(); // Доступ к нижележащему экземпляру React
Проверки и утверждения (Assertions & Element Checks)
expect(wrapper.exists()).toBe(true);
expect(wrapper.hasClass('btn-primary')).toBe(true);
expect(wrapper.contains(<span className="badge">New</span>)).toBe(true);
expect(wrapper.text()).toContain('Welcome');
expect(wrapper.html()).toContain('class="active"');