enzyme
1.0.0
Enzymeは、ReactのJavaScriptテストユーティリティであり、Reactコンポーネントの出力をテストしやすくなります。また、出力を考慮して、ランタイムを操作して、トラバースし、ある程度シミュレートすることもできます。
EnzymeのAPIは、JQueryのAPIをDOM操作とトラバーサルのために模倣することにより、直感的で柔軟であることを意図しています。
酵素がReact 16と互換性があるかどうかを確認するためにここにいますか？現在、酵素2.xを使用していますか？素晴らしい！ React 16がサポートされているEnzyme V3に移行するヘルプについては、移行ガイドをご覧ください。
酵素を始めるために、npm経由でそれをインストールするだけです。使用しているReact（または他のUIコンポーネントライブラリ）のバージョンに対応するアダプターとともに、酵素をインストールする必要があります。たとえば、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 |
最後に、使用するアダプターを使用するように酵素を構成する必要があります。これを行うには、トップレベルのconfigure(...) APIを使用できます。
import Enzyme from 'enzyme' ;
import Adapter from 'enzyme-adapter-react-16' ;
Enzyme . configure ( { adapter : new Adapter ( ) } ) ;コミュニティは、他のライブラリと酵素を機能させる追加の（非公式）アダプターを作成することができます。作成した場合、以下のリストに含まれていない場合は、このreadmeにPRを作成してリンクを追加してください。既知のサードパーティアダプターは次のとおりです。
| アダプターパッケージ | ライブラリ用 | 状態 |
|---|---|---|
enzyme-adapter-preact-pure | preact | （安定した） |
enzyme-adapter-inferno | inferno | （進行中の作業） |
酵素は、使用するテストランナーまたはアサーションライブラリについてどのテストランナーまたはアサーションライブラリが互換性があるかに関しては感染していません。酵素のドキュメントと例はMochaとChaiを使用していますが、選択したフレームワークに外挿することができるはずです。
反応コンポーネントをテストするためのカスタムアサーションと利便性関数を使用して酵素を使用することに興味がある場合は、以下を使用することを検討できます。
chai-enzyme 。jasmine-enzyme 。jest-enzyme 。should-enzyme for suld.js。expect-enzyme期待しています。モカと酵素を使用します
カルマと酵素を使用します
browserifyを使用して酵素を使用します
SystemJSで酵素を使用します
Webpackで酵素を使用します
JSDOMで酵素を使用します
反応ネイティブで酵素を使用します
JESTで酵素を使用します
ラボで酵素を使用します
テープと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ドキュメントをお読みください
酵素は、Reactの浅いレンダラーの上流の問題により、 .shallow()のいくつかの制限でReactフックをサポートします。
useEffect()およびuseLayoutEffect() React Shallow Rendererで呼び出されません。関連する問題
useCallback() React Shallow Rendererにコールバックをメモしません。関連する問題
ReactTestUtils.act() wrap React 16.8+および.mount()使用している場合、酵素は.simulate() 、. .setProps() 、. .setContext() 、. .invoke()を含むAPIを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を使用した組織とプロジェクトは、ここに自分自身をリストすることができます。
mit
