Enzyme 工具使用指南
前言：
在 React.js 的单元测试中，Enzyme 是最常用的 JavaScript 测试工具之一。Enzyme 提供了各种方法来遍历和操作 React 组件，能够使开发者更方便地测试组件的输出和交互行为。
Enzyme 本质上是一个 React 适配器，它允许开发者使用 jQuery 的语法来测试 React 组件。除此之外，Enzyme 还提供了一些 API，例如是 shallow、mount 和 render，分别用于测试组件的渲染过程中相互不同的方面。
本篇文章将介绍 Enzyme 工具的基本用法和一些实践技巧。帮助读者更好的使用 Enzyme 工具，加快 React 单元测试的过程。
一. 安装及基本概念
首先，需要将 Enzyme 在你的项目中安装，可以使用 npm 或 yarn 进行安装。开发依赖建议使用：
npm install --save-dev enzyme npm install --save-dev enzyme-adapter-react-16
Enzyme 官网提供了支持当前最新 React 版本的 Adapter，需要在配置中获得：
// src/setupTests.js import { configure } from 'enzyme'; import Adapter from 'enzyme-adapter-react-16'; configure({ adapter: new Adapter() });
- 使用 shallow 方法
shallow 方法可以说是 Enzyme 最为常用的方法，它用于把一个 React 组件渲染成虚拟 DOM，并且不会渲染子组件。相比于 mount 方法，shallow 的速度更快，同时也更容易使用。
具体的实现方法如下：
const wrapper = shallow(<Test />);
wrapper 变量即是 Test 组件的虚拟 DOM。
- 使用 mount 方法
mount 方法可以完全渲染出组件以及它的子组件，这意味着它可以检测到子组件中的事件调用并且允许充分模拟用户交互。
const wrapper = mount(<Test />);
- 使用 render 方法
render 方法可以说是一种中间状态，它兼顾了 shallow 和 mount 的优势，渲染出来的是静态的渲染结果，没有交互行为。如果只需要生成组件的静态 HTML 并且不需要进行事件测试，那么可以使用 render 方法。
const wrapper = render(<Test />);
二. Enzyme 实践技巧
- 查询元素与文本
查找 React 组件中的元素和文本是比较常见且有用的操作。Enzyme 中提供了以下的方法：
find(selector)：通过选择器查找元素或者组件，返回一个 Enzyme 组件的列表
contains(selector)：查询是否包含此选择器所代表的组件或者元素，返回布尔结果
text()： 获取节点的文本信息。
html()：获取节点 innerHTML
- 模拟事件
在 React 开发中，组件支持的事件响应并不是很多，但是也是非常重要的一环。Enzyme 提供了 simulate 方法，用于模拟组件响应的事件：
wrapper.find(MyButton).simulate('click');
此代码行为为在 MyButton 组件上触发了一个点击事件，当然 Enzyme 还提供了多种事件的支持，例如 mouseover, mouseenter 等等。
- 模拟交互操作
在实际的开发过程中，需要长期对前端的交互设计进行测试。比如，用户提交一个表单，需要检查用户提交的数据是否正确，是否满足条件。
这里需要借助到 Enzyme 的 API。
wrapper.find("input[name='email']").simulate("change", { target: { value: "test@test.com" } });
此代码行为为在 input 元素上模拟一个 onChange 事件，这里传递了参数 { target: { value: "test@test.com" } }，回调函数可以使用 event.target.value 获取到。这表示在 email 表单上输入了一段字符串数据。
- 获取组件的状态
获取组件的状态也是测试组件必须要涉及的一个点。Enzyme 提供了如下 API，获取组件的状态：
wrapper.state();
这个接口用来获取测试组件的状态值。
其他一些非常有用的 Enzyme 工具：
wrapper.update()：让 Enzyme 组件重新渲染一次返回 wrapper 对象；
wrapper.text()：获取渲染子树的文本内容。
三. Enzyme 与 Jest 结合使用
在日常单元测试中，Jest 是非常常用的测试框架。在使用 Jest 结合 Enzyme 进行 React 单元测试时，我们需要自定义一个 Jest 的配置文件。
此文件同样需要一个单独的 Enzyme 配置文件。
// ./src/setup.js import enzyme from 'enzyme'; import Adapter from 'enzyme-adapter-react-16'; enzyme.configure({ adapter: new Adapter() });
此配置文件需要在 Jest 的配置文件 jest.config.js 中进行配置：
// jest.config.js module.exports = { setupFiles: ['./src/setup.js'], ... };
Jest 的 snapshot 功能是 Enzyme 测试的重要组成部分之一。Snapshot 提供了快速的、可靠的保证组件输出的正确性。
四. 示例代码
-- -------------------- ---- ------- ------ ----- ---- -------- ------ - ------- - ---- --------- ------ ---- ---- ---------------------------------- ------------ ------ ---- ----------- -- -- - ----- ------- - ------------- ---- ---------------------------------- --- --------- ------- ----- -- -------- -- -- - ----- ------- - ------------- ---- ----- -------------- - ------------------------------------- -------------------------------------- -- --------- --- --------- ----- ------ ----- ------ ------- -- -- - ----- ------- - ------------- ---- --- -------------- - --------------------------------- ------ --------------------------------- - ------- - -------- ----- ------ ------- -- - --- -------------- - --------------------------------- ------ ----------------------------------------------------- ---展开代码
这段代码中，我们编写了三个测试用例：
检查你的组件是否能够被很好的渲染出来。
检查 select 初始的值是否正确。
检查 当用户选择 radio button 时服务器端是否可以正确的响应正确的选择。
以上是对于 Enzyme 工具的一个简单介绍，希望对 React 的单元测试有所帮助。
来源：JavaScript中文网 ，转载请注明来源 https://www.javascriptcn.com/post/67b97110306f20b3a67cfbae
