enzyme
1.0.0
A enzima é um utilitário de teste JavaScript para reação que facilita o teste da saída dos seus componentes do React. Você também pode manipular, atravessar e, de certa forma, simular o tempo de execução, dada a saída.
A API da enzima deve ser intuitiva e flexível, imitando a API de JQuery para manipulação e travessia de DOM.
Você está aqui para verificar se a enzima é compatível ou não com o React 16? Você está usando o Enzyme 2.x atualmente? Ótimo! Confira nosso guia de migração para obter ajuda para a enzima V3, onde o React 16 é suportado.
Para começar com o Enzyme, você pode simplesmente instalá -lo via NPM. Você precisará instalar o Enzyme junto com um adaptador correspondente à versão do React (ou outra biblioteca de componentes da interface do usuário) que você está usando. Por exemplo, se você estiver usando enzima com o React 16, poderá executar:
npm i --save-dev enzyme enzyme-adapter-react-16 Cada adaptador pode ter dependências adicionais de pares que você precisará instalar também. Por exemplo, enzyme-adapter-react-16 possui dependências pares de react e react-dom .
No momento, a enzima possui adaptadores que fornecem compatibilidade com React 16.x , React 15.x , React 0.14.x e React 0.13.x .
Os adaptadores a seguir são oficialmente fornecidos pela enzima e têm a seguinte compatibilidade com o React:
| Pacote de adaptador enzimático | Reacte a compatibilidade 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 |
Finalmente, você precisa configurar a enzima para usar o adaptador que deseja usar. Para fazer isso, você pode usar a API configure(...) .
import Enzyme from 'enzyme' ;
import Adapter from 'enzyme-adapter-react-16' ;
Enzyme . configure ( { adapter : new Adapter ( ) } ) ;É possível para a comunidade criar adaptadores adicionais (não oficiais) que farão com que a enzima trabalhe com outras bibliotecas. Se você fez um e não está incluído na lista abaixo, fique à vontade para fazer um PR a este ReadMe e adicione um link a ele! Os adaptadores de terceiros conhecidos são:
| Pacote adaptador | Para biblioteca | Status |
|---|---|---|
enzyme-adapter-preact-pure | preact | (estável) |
enzyme-adapter-inferno | inferno | (Trabalho em andamento) |
A enzima é poucopinada em relação a qual corredor de teste ou biblioteca de asserção que você usa e deve ser compatível com todos os principais corredores de teste e bibliotecas de afirmação por aí. A documentação e os exemplos para o enzima usam mocha e chai, mas você deve ser capaz de extrapolar para sua estrutura de escolha.
Se você estiver interessado em usar o Enzyme com afirmações personalizadas e funções de conveniência para testar seus componentes do React, você pode considerar usar:
chai-enzyme com mocha/chai.jasmine-enzyme com jasmim.jest-enzyme com brincadeira.should-enzyme para deve.js.expect-enzyme para esperar.Usando enzima com mocha
Usando enzima com karma
Usando enzima com navegação
Usando enzima com systemjs
Usando enzima com webpack
Usando enzima com jsdom
Usando enzima com react nativo
Usando enzima com brincadeira
Usando enzima com laboratório
Usando enzima com fita e 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 ) ;
} ) ;
} ) ;Leia a documentação completa da 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 ( ) ;
} ) ;
} ) ;Leia a documentação completa da 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' ) ;
} ) ;
} ) ;Leia a documentação completa da API
A enzima suporta ganchos de reação com algumas limitações em .shallow() devido a problemas a montante no renderizador superficial do React:
useEffect() e useLayoutEffect() não são chamados no renderizador raso do React. Questão relacionada
useCallback() não memoriza o retorno de chamada no renderizador raso do React. Questão relacionada
ReactTestUtils.act() Wrap Se você estiver usando o React 16.8+ e .mount() , a enzima embrulhará as APIs incluindo .simulate() , .setProps() , .setContext() , .invoke() com ReactTestUtils.act() para que você não precise para embrulhá -lo manualmente.
Um padrão comum para desencadear manipuladores com .act() e afirmar é:
const wrapper = mount ( < SomeComponent / > ) ;
act ( ( ) => wrapper . prop ( 'handler' ) ( ) ) ;
wrapper . update ( ) ;
expect ( /* ... */ ) ; Não podemos envolver o resultado de .prop() (ou .props() ) com .act() na enzima internamente, pois isso quebrará a igualdade do valor retornado. No entanto, você pode usar .invoke() para simplificar o código:
const wrapper = mount ( < SomeComponent / > ) ;
wrapper . invoke ( 'handler' ) ( ) ;
expect ( /* ... */ ) ;Futuro enzimático
Veja o guia dos colaboradores
Organizações e projetos que usam enzyme podem se listar aqui.
Mit
