enzyme
1.0.0
Enzyme - это утилита для тестирования JavaScript для React, которая облегчает проверку выхода ваших компонентов React. Вы также можете манипулировать, пересекать и в некотором роде моделировать время выполнения, учитывая вывод.
API фермента предназначен для интуитивного и гибкого, имитируя API JQUERY для манипулирования DOM и обходом.
Вы здесь, чтобы проверить, совместим ли фермент с React 16? Вы в настоящее время используете фермент 2.x? Большой! Ознакомьтесь с нашим руководством по миграции, чтобы получить помощь в переходе на фермент V3, где поддерживается React 16.
Чтобы начать с фермента, вы можете просто установить его через NPM. Вам нужно будет установить фермент вместе с адаптером, соответствующим версии React (или другой библиотеки компонентов пользовательского интерфейса), которую вы используете. Например, если вы используете фермент с React 16, вы можете запустить:
npm i --save-dev enzyme enzyme-adapter-react-16 Каждый адаптер может иметь дополнительные зависимости от сверстников, которые вам понадобятся. Например, enzyme-adapter-react-16 обладает зависимостями со сверстниками от react и react-dom .
В настоящее время фермент имеет адаптеры, которые обеспечивают совместимость с React 16.x , React 15.x , React 0.14.x и React 0.13.x .
Следующие адаптеры официально предоставляются ферментом и имеют следующую совместимость с React:
| Адаптер -пакет ферментов | Реагировать совместимость SEMVER |
|---|---|
enzyme-adapter-react-16 | ^16.4.0-0 |
enzyme-adapter-react-16.3 | ~16.3.0-0 |
enzyme-adapter-react-16.2 | ~16.2 |
enzyme-adapter-react-16.1 | ~16.0.0-0 || ~16.1 |
enzyme-adapter-react-15 | ^15.5.0 |
enzyme-adapter-react-15.4 | 15.0.0-0 - 15.4.x |
enzyme-adapter-react-14 | ^0.14.0 |
enzyme-adapter-react-13 | ^0.13.0 |
Наконец, вам нужно настроить фермент для использования адаптера, который вы хотите, чтобы он использовал. Для этого вы можете использовать API configure(...) .
import Enzyme from 'enzyme' ;
import Adapter from 'enzyme-adapter-react-16' ;
Enzyme . configure ( { adapter : new Adapter ( ) } ) ;Сообщество может создать дополнительные (неофициальные) адаптеры, которые заставляют фермент работать с другими библиотеками. Если вы сделали один, и он не включен в список ниже, не стесняйтесь сделать пиар для этого Readme и добавить к нему ссылку! Известными сторонними адаптерами являются:
| Адаптерный пакет | Для библиотеки | Статус |
|---|---|---|
enzyme-adapter-preact-pure | preact | (стабильный) |
enzyme-adapter-inferno | inferno | (Работа в процессе) |
Фермент неопинирован в отношении того, какой тестовый бегун или библиотека утверждений вы используете, и должен быть совместимы со всеми основными тестовыми бегунами и библиотеками утверждений. Документация и примеры для ферментов используют мокко и чай, но вы должны быть в состоянии экстраполировать на выбор.
Если вы заинтересованы в использовании фермента с пользовательскими утверждениями и удобными функциями для тестирования ваших компонентов React, вы можете рассмотреть возможность использования:
chai-enzyme с мокко/чай.jasmine-enzyme с жасмином.jest-enzyme с шуткой.should-enzyme для должен.expect-enzyme ожидается.Использование фермента с мокко
Использование фермента с кармой
Использование фермента с браузерофинией
Использование фермента с SystemJs
Использование фермента с WebPack
Использование фермента с JSDOM
Использование фермента с нативным React
Использование фермента с шуткой
Использование фермента с лабораторией
Использование фермента с лентой и 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
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
Фермент поддерживает реагирование крючков с некоторыми ограничениями в .shallow() из -за восходящих вопросов на мелководном рендерере React:
useEffect() и useLayoutEffect() не вызывается в неглубоком рендерере React. Связанная проблема
useCallback() не запоминает обратный вызов в React Mallow рендерера. Связанная проблема
ReactTestUtils.act() wrap Если вы используете React 16.8+ и .mount() , фермент обернет API, включая .simulate() , .setProps() , .setContext() , .invoke() с ReactTestUtils.act() так что вам не нужно Чтобы вручную обернуть его.
Общий шаблон для запуска обработчиков с .act() и утверждение:
const wrapper = mount ( < SomeComponent / > ) ;
act ( ( ) => wrapper . prop ( 'handler' ) ( ) ) ;
wrapper . update ( ) ;
expect ( /* ... */ ) ; Мы не можем обернуть результат .prop() (или .props() ) с .act() в ферменте внутри, так как он нарушит равенство возвращаемого значения. Однако вы можете использовать .invoke() для упрощения кода:
const wrapper = mount ( < SomeComponent / > ) ;
wrapper . invoke ( 'handler' ) ( ) ;
expect ( /* ... */ ) ;Фермент будущий
См. Руководство для участников
Организации и проекты, использующие enzyme могут перечислить себя здесь.
Грань
