enzyme
1.0.0
La enzima es una utilidad de prueba JavaScript para React que facilita la prueba de la salida de los componentes React. También puede manipular, recorrer y, de alguna manera, simular el tiempo de ejecución dado la salida.
La API de la enzima está destinada a ser intuitiva y flexible imitando la API de JQuery para la manipulación y el recorrido de DOM.
¿Estás aquí para verificar si la enzima es compatible o no con React 16? ¿Está utilizando actualmente la enzima 2.x? ¡Excelente! Consulte nuestra Guía de migración para obtener ayuda para pasar a la enzima V3, donde se admite React 16.
Para comenzar con la enzima, simplemente puede instalarla a través de NPM. Deberá instalar la enzima junto con un adaptador correspondiente a la versión de React (u otra biblioteca de componentes de UI) que está utilizando. Por ejemplo, si está usando enzima con React 16, puede ejecutar:
npm i --save-dev enzyme enzyme-adapter-react-16 Cada adaptador puede tener dependencias de pares adicionales que también deberá instalar. Por ejemplo, enzyme-adapter-react-16 tiene dependencias pares de react y react-dom .
En este momento, la enzima tiene adaptadores que proporcionan compatibilidad con React 16.x , React 15.x , React 0.14.x y React 0.13.x
Los siguientes adaptadores son proporcionados oficialmente por la enzima y tienen la siguiente compatibilidad con React:
| Paquete de adaptador enzimático | React Semver Compatibilidad |
|---|---|
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 |
Finalmente, debe configurar la enzima para usar el adaptador que desea que use. Para hacer esto, puede usar la API configure(...) .
import Enzyme from 'enzyme' ;
import Adapter from 'enzyme-adapter-react-16' ;
Enzyme . configure ( { adapter : new Adapter ( ) } ) ;Es posible que la comunidad cree adaptadores adicionales (no oficiales) que hagan que la enzima funcione con otras bibliotecas. Si ha hecho uno y no está incluido en la lista a continuación, ¡no dude en hacer un PR a este Readme y agregar un enlace a él! Los adaptadores de terceros conocidos son:
| Paquete de adaptador | Para biblioteca | Estado |
|---|---|---|
enzyme-adapter-preact-pure | preact | (estable) |
enzyme-adapter-inferno | inferno | (trabajo en progreso) |
La enzima no es opinionada con respecto a qué corredor de prueba o biblioteca de afirmación usa, y debe ser compatible con todos los principales corredores de prueba y bibliotecas de afirmación. La documentación y los ejemplos para la enzima usan moca y chai, pero debe poder extrapolar a su marco de elección.
Si está interesado en usar enzimas con afirmaciones personalizadas y funciones de conveniencia para probar sus componentes React, puede considerar usar:
chai-enzyme con moca/chai.jasmine-enzyme con jazmín.jest-enzyme con broma.should-enzyme para debería. JS.expect-enzyme para la esperanza.Usando enzima con moca
Usando enzima con karma
Usar enzima con Browserify
Uso de enzima con Systemjs
Uso de la enzima con Webpack
Usando enzima con jsdom
Usando enzima con react nativo
Usando enzima con broma
Usando enzima con laboratorio
Usar enzima con cinta y 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 ) ;
} ) ;
} ) ;Lea la documentación completa de la 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 ( ) ;
} ) ;
} ) ;Lea la documentación completa de la 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' ) ;
} ) ;
} ) ;Lea la documentación completa de la API
La enzima admite ganchos React con algunas limitaciones en .shallow() debido a problemas aguas arriba en el renderizador superficial de React:
useEffect() y useLayoutEffect() no se llamen en el renderizador de reacción. Tema relacionado
useCallback() no memoiza la devolución de llamada en React Shallow Renderer. Tema relacionado
ReactTestUtils.act() envoltura Si está utilizando React 16.8+ y .mount() , la enzima envolverá API, incluyendo .simulate() , .setProps() , .setContext() , .invoke() con ReactTestUtils.act() para que no lo necesite para envolverlo manualmente.
Un patrón común para activar los controladores con .act() y afirmar es:
const wrapper = mount ( < SomeComponent / > ) ;
act ( ( ) => wrapper . prop ( 'handler' ) ( ) ) ;
wrapper . update ( ) ;
expect ( /* ... */ ) ; No podemos envolver el resultado de .prop() (o .props() ) con .act() en enzima internamente, ya que romperá la igualdad del valor devuelto. Sin embargo, puede usar .invoke() para simplificar el código:
const wrapper = mount ( < SomeComponent / > ) ;
wrapper . invoke ( 'handler' ) ( ) ;
expect ( /* ... */ ) ;Futuro enzimático
Ver la Guía de contribuyentes
Las organizaciones y proyectos que utilizan enzyme pueden enumerar aquí.
MIT
