enzyme
1.0.0
酶是React的JavaScript測試實用程序，它使測試您的React組件的輸出變得更加容易。您還可以操縱，遍歷，並在某些方面模擬鑑於輸出的運行時。
通過模仿JQuery的API進行DOM操縱和遍歷，酶的API本身就是直觀而靈活的。
您是否在這裡檢查酶是否與React 16兼容？您目前正在使用酶2.x嗎？偉大的！查看我們的遷移指南，以獲取支持16的酶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的兼容性：
| 酶適配器包 | 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 ( ) } ) ;社區可以創建其他（非官方）適配器，以使酶與其他庫一起工作。如果您製作了一個，並且未包含在下面的列表中，請隨時為此讀書我添加PR並添加鏈接！已知的第三方適配器是：
| 適配器包 | 用於圖書館 | 地位 |
|---|---|---|
enzyme-adapter-preact-pure | preact | （穩定的） |
enzyme-adapter-inferno | inferno | （正在進行的工作） |
酶在您使用哪個測試跑步者或斷言庫上沒有公開，並且應與所有主要的測試跑步者和主張庫兼容。酶的文檔和示例使用Mocha和Chai，但您應該能夠推斷出選擇的框架。
如果您有興趣使用自定義主張和便利功能來測試您的React組件，則可以考慮使用：
chai-enzyme 。jasmine-enzyme與茉莉花。jest-enzyme和開玩笑。should-enzyme 。expect-enzyme 。將酶與摩卡
將酶與業力一起使用
將酶與瀏覽
將酶與Systemjs使用
將酶與webpack一起使用
將酶與JSDON一起使用
將酶與反應天然
將酶與開玩笑
將酶與實驗室使用
將酶與膠帶和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()在shandow渲染器中不會被調用。相關問題
useCallback()不會在React React Renderer中記住回調。相關問題
ReactTestUtils.act()包裝如果您使用的是react 16.8+和.mount() ，則酶將包含API，包括.simulate() ，. .setProps() ，. .setContext() ，.invoke（），. .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的組織和項目可以在這裡列出。
麻省理工學院
