enzyme
1.0.0
Enzym ist ein JavaScript -Test -Dienstprogramm für React, das es einfacher macht, die Ausgang Ihrer React -Komponenten zu testen. Sie können auch manipulieren, durchqueren und in gewisser Weise die Laufzeit angesichts der Ausgabe simulieren.
Die API von Enzym soll intuitiv und flexibel sein, indem Jquerys API für DOM -Manipulation und -verletzung nachahmt.
Sind Sie hier, um zu überprüfen, ob das Enzym mit React 16 kompatibel ist oder nicht? Verwenden Sie derzeit Enzym 2.x? Großartig! Schauen Sie sich unseren Migrationshandbuch an, um Hilfe zum Enzym V3 zu erhalten, wo React 16 unterstützt wird.
Um mit Enzym zu beginnen, können Sie es einfach über NPM installieren. Sie müssen Enzym zusammen mit einem Adapter installieren, der der Version von React (oder anderen UI -Komponentenbibliothek) entspricht, die Sie verwenden. Wenn Sie beispielsweise Enzym mit React 16 verwenden, können Sie ausführen:
npm i --save-dev enzyme enzyme-adapter-react-16 Jeder Adapter hat möglicherweise zusätzliche Peer -Abhängigkeiten, die Sie auch installieren müssen. Beispielsweise hat enzyme-adapter-react-16 Peer-Abhängigkeiten von react und react-dom .
Derzeit hat Enzym Adapter, die Kompatibilität mit React 16.x , React 15.x , React 0.14.x und React 0.13.x bieten.
Die folgenden Adapter werden offiziell vom Enzym bereitgestellt und haben die folgende Kompatibilität mit React:
| Enzymadapterpaket | Semverkompatibilität reagieren |
|---|---|
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 |
Schließlich müssen Sie Enzym so konfigurieren, dass der Adapter verwendet wird, den es verwenden soll. Dazu können Sie die oberste Ebene configure(...) API verwenden.
import Enzyme from 'enzyme' ;
import Adapter from 'enzyme-adapter-react-16' ;
Enzyme . configure ( { adapter : new Adapter ( ) } ) ;Es ist der Community möglich, zusätzliche (nicht offizielle) Adapter zu erstellen, mit denen Enzym mit anderen Bibliotheken funktioniert. Wenn Sie einen gemacht haben und es nicht in der folgenden Liste enthalten ist, können Sie diesen Readme eine PR machen und einen Link dazu hinzufügen! Die bekannten Adapter der Drittanbieter sind:
| Adapterpaket | Für Bibliothek | Status |
|---|---|---|
enzyme-adapter-preact-pure | preact | (stabil) |
enzyme-adapter-inferno | inferno | (Arbeiten in Arbeit) |
Das Enzym ist nicht öffnen, welche Testläufer oder Assertionsbibliothek Sie verwenden, und sollte mit allen wichtigen Testläufern und Assertion -Bibliotheken kompatibel sein. Die Dokumentation und Beispiele für Enzym verwenden Mokka und Chai, aber Sie sollten in der Lage sein, auf Ihren Rahmen Ihrer Wahl zu extrapolieren.
Wenn Sie daran interessiert sind, Enzym mit benutzerdefinierten Behauptungen und Komfortfunktionen zum Testen Ihrer React -Komponenten zu verwenden, können Sie in Betracht ziehen:
chai-enzyme mit Mocha/Chai.jasmine-enzyme mit Jasmin.jest-enzyme mit Scherz.should-enzyme für sollte.js.expect-enzyme für Erwartung.Verwenden von Enzym mit Mokka
Verwenden von Enzym mit Karma
Verwenden von Enzym mit Browserify
Verwenden von Enzym mit SystemJs
Verwenden von Enzym mit Webpack
Verwenden von Enzym mit JSDOM
Verwenden von Enzym mit React Native
Verwenden von Enzym mit Scherz
Verwenden von Enzym mit Labor
Verwenden Sie Enzym mit Klebeband und 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 ) ;
} ) ;
} ) ;Lesen Sie die vollständige API -Dokumentation
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 ( ) ;
} ) ;
} ) ;Lesen Sie die vollständige API -Dokumentation
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' ) ;
} ) ;
} ) ;Lesen Sie die vollständige API -Dokumentation
Enzym unterstützt React -Hooks mit einigen Einschränkungen in .shallow() aufgrund von vorgelagerten Problemen in Reacts flachem Renderer:
useEffect() und useLayoutEffect() werden im React Shallow Renderer nicht aufgerufen. Verwandte Problem
useCallback() merkte den Rückruf in React Flacher Renderer nicht. Verwandte Problem
ReactTestUtils.act() Wrap Wenn Sie React 16.8+ und .mount() verwenden, wickelt Enzym APIs einschließlich .simulate() , .setProps() , .setContext() , .invoke() mit ReactTestUtils.act() damit Sie nicht benötigen Um es manuell zu wickeln.
Ein gemeinsames Muster, um Handler mit .act() und zu behaupten, ist:
const wrapper = mount ( < SomeComponent / > ) ;
act ( ( ) => wrapper . prop ( 'handler' ) ( ) ) ;
wrapper . update ( ) ;
expect ( /* ... */ ) ; Wir können das Ergebnis von .prop() (oder .props() ) mit .act() im Enzym intern einwickeln, da es die Gleichheit des zurückgegebenen Werts brechen wird. Sie können jedoch .invoke() verwenden, um den Code zu vereinfachen:
const wrapper = mount ( < SomeComponent / > ) ;
wrapper . invoke ( 'handler' ) ( ) ;
expect ( /* ... */ ) ;Enzym Zukunft
Siehe den Leitfaden für die Mitwirkenden
Organisationen und Projekte, die enzyme verwenden, können sich hier auflisten.
MIT
