React 是一款可组合、可重用、可维护的 JavaScript 框架，对于前端开发而言，React 组件的单元测试是非常重要的部分。在进行 React 组件单元测试时，Enzyme是一个非常受欢迎的测试工具。
Enzyme是一个Javascript测试工具，专门针对React组件进行单元测试。它提供了一套易于使用的API，帮助我们对组件的结构和实现进行测试。
安装 Enzyme
在使用 Enzyme 之前，需要先安装 Enzyme 包和一个浏览器环境（这里以 jsdom 为例）。
npm install --save-dev enzyme enzyme-adapter-react-16 jsdom
初始化 Enzyme
在使用 Enzyme 的任何 API 之前，需要初始化 Enzyme。此处我们使用 React 16，因此需要使用 Enzyme 适配器。
import { configure } from "enzyme";
import Adapter from "enzyme-adapter-react-16";
configure({ adapter: new Adapter() });测试组件
对于测试组件的输出，通常会关注以下内容：
- 组件是否正确渲染
- 组件是否正确更新
- 组件的输出是否符合预期
测试渲染方法
首先来看一个简单的组件：
-- -------------------- ---- -------
------ ------ - -------- - ---- --------
----- ------- - -- -- -
----- ------- --------- - ------------
----- -------------- - -- -- -------------- - ---
----- -------------- - -- -- -------------- - ---
------ -
-----
--------- -----------
------- -------------------------------------------
------- -------------------------------------------
------
--
--
------ ------- --------接下来，我们编写测试用例，测试该组件是否正确渲染。
-- -------------------- ---- -------
------ ----- ---- --------
------ - ------- - ---- ---------
------ ------- ---- ------------
------------------- -- -- -
---------- ------ ----------- -- -- -
----- --------- - ---------------- ----
------------------------------------
---
---Enzyme 提供了 shallow API，可以对组件进行浅渲染测试。在测试用例执行后，Enzyme 会返回一个 ShallowWrapper 实例。每个 ShallowWrapper 实例可以对组件进行多种断言操作，如检查组件是否有特定的 props、是否包含特定的子元素等。
测试更新方法
接着，我们编写测试用例，测试该组件是否正确更新。
-- -------------------- ---- -------
------ ----- ---- --------
------ - ------- - ---- ---------
------ ------- ---- ------------
------------------- -- -- -
---------- ------ ----- ----- ----------- -- -- -
----- --------- - ---------------- ----
-------------------------------------------------
-------------------------------------------------- ----
-------------------------------------------------
-------------------------------------------------- ----
---
---在该测试用例中，我们用 find 方法找到组件中的两个按钮，并分别触发 click 事件，测试组件的状态更新是否正确。然后通过 text 方法获取 <p> 标签的值，检查组件的输出是否符合预期。
测试组件的输出
最后，我们编写测试用例，检查组件的输出是否符合预期。
-- -------------------- ---- -------
------ ----- ---- --------
------ - ------- - ---- ---------
------ ------- ---- ------------
------------------- -- -- -
---------- ------ ----- ------ ----------- -- -- -
----- --------- - ---------------- ----
-------------------------------------------------- ----
-------------------------------------------------
-------------------------------------------------- ----
-------------------------------------------------
-------------------------------------------------- ----
---
---在该测试用例中，我们检查组件的输出是否符合预期。首先检查初始化状态是否为 0，然后模拟组件内部的行为，检查组件的输出是否正确更新。
总结
通过本文的学习，我们可以学习如何使用 Enzyme 工具对 React 组件进行单元测试。对于组件的渲染、更新和输出，我们可以通过适当的使用 Enzyme API 对组件的结构和实现进行全面的单元测试，并保证程序质量。
来源：JavaScript中文网 ，转载请注明来源 https://www.javascriptcn.com/post/649a9aca48841e9894786c49