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的组织和项目可以在这里列出。
麻省理工学院
