React 是一款广受欢迎的 JavaScript 库，它的出现为前端开发带来了很多便利。由于 React 的组件化特性，使得我们可以通过单元测试来更好地保证组件的质量和稳定性。在 React 的单元测试中，Jest 和 Enzyme 是两个常用的库，下面将介绍如何使用 Jest 和 Enzyme 进行 React 的单元测试。
Jest 和 Enzyme 简介
Jest 是 Facebook 推出的一款 JavaScript 测试框架，专为 React 应用设计。它能够支持模块化、异步代码和静态资源等多种类型的测试，并且集成了一些强大的功能，如测试覆盖率报告和快照测试等。
Enzyme 是一个由 Airbnb 开源的 React 测试工具，它可以帮助我们方便地测试绝大部分 React 组件。Enzyme 提供了多种 API，使得我们可以轻松地对组件进行渲染、检查组件结构和状态等操作。
Jest + Enzyme 进行 React 的单元测试
首先我们需要安装 Jest 和 Enzyme：
npm install jest enzyme enzyme-adapter-react-16 react-test-renderer --save-dev
Jest 和 Enzyme 都需要配置，其中 Jest 的配置文件为 jest.config.js，Enzyme 的配置文件为 setupTests.js，这两个文件需要在项目根目录下创建。
Jest 配置
在 Jest 的配置文件中，我们需要指定一些特殊的配置项，如测试文件的匹配模式、测试时所采用的模块导入方式、测试覆盖率的统计等。下面是一个简单的 Jest 配置文件的示例：
-- -------------------- ---- -------
-------------- - -
---------- -------------------------------
--------------------- ------ ------ ------- --------
----------------- -
---------------------- --------------------
--
---------------- -----
------------------ ---------------------
------------------ -------- ------- ------- ----------
---------- -
-------------- ------------
-
-Enzyme 配置
在 Enzyme 的配置文件中，我们需要导入适配器，并且配置适配器，使得 Enzyme 能够与当前版本的 React 兼容。下面是一个简单的 Enzyme 配置文件的示例：
import Enzyme from "enzyme";
import Adapter from "enzyme-adapter-react-16";
Enzyme.configure({ adapter: new Adapter() });编写测试用例
我们可以通过 Jest 提供的命令行工具来运行测试，也可以将其集成到自动化构建工具中。接下来，我们将介绍如何编写一个简单的测试用例。
假设有如下一个组件：
-- -------------------- ---- -------
------ ----- ---- --------
----- ------- ------- --------------- -
------------------ -
-------------
---------- - - ------ - --
-
----------- - -- -- -
----------------------- -- --
------ --------------- - -
----
--
-------- -
------ -
-----
--------- ----------------------
------- ----------------------------------------
------
--
-
-
------ ------- --------我们需要对这个组件进行单元测试，测试用例如下：
-- -------------------- ---- -------
------ ----- ---- --------
------ ------- - ------- - ---- ---------
------ ------- ---- --------------------------
------ ------- ---- ------------
------------------ -------- --- --------- ---
----------------- ----------- -- -- -
---------- ------ ------- ------- -- -- -
----- ------- - ---------------- ----
----- ---------- - -------------------------
---------------------------------- ----
---
---------- --------- ----- -- ------- -- -- -
----- ------- - ---------------- ----
----- ------ - -----------------------
-------------------------
----- ---------- - -------------------------
---------------------------------- ----
---
---这里我们使用了 Jest 提供的 describe 和 it 函数来组合测试用例，通过 Enzyme 的 shallow 函数来对组件进行“浅渲染”，以获取组件的虚拟 DOM 节点。之后我们可以通过 find 函数来查找指定节点，使用 simulate 函数来模仿用户对组件进行交互的操作。
最后，运行 npm test 命令即可执行测试。
总结
Jest 和 Enzyme 是 React 单元测试中非常有用的工具，使用它们可以方便地测试 React 组件的行为和状态。在实际的项目中，我们可以通过编写测试用例来保证组件的正确性和稳定性，并且可以更加自信地进行代码优化和重构。
来源：JavaScript中文网 ，转载请注明来源 https://www.javascriptcn.com/post/651cc99495b1f8cacd448eb2