在前端开发中，React 已经成为了非常流行的框架，它的组件化开发方式让我们能够更好地管理代码、提高代码复用率，但是在开发过程中如何保证组件的质量呢？这时候单元测试就变得非常重要了。本文将介绍 React 单元测试的利器：实战 Enzyme + Jest。
Enzyme 简介
Enzyme 是一个由 Airbnb 开源的 React 组件测试工具，主要用于模拟 React 组件的渲染和交互。它提供了一些 API，可以方便地对组件进行测试。
Enzyme 的 API 分为三种类型：
- shallow：浅渲染，只渲染当前组件，不渲染子组件。
- mount：完整渲染，渲染当前组件及其子组件。
- render：静态渲染，将组件渲染成静态 HTML，并返回一个 Cheerio 对象。
Enzyme 还提供了一些针对组件的 API，比如 find、simulate 等，可以方便地进行组件交互测试。
Jest 简介
Jest 是 Facebook 开源的一款 JavaScript 测试框架，它可以用于测试 React 组件、Redux 等前端开发中常用的库。Jest 的特点是简单易用，集成度高，可以方便地进行单元测试和集成测试。
Jest 支持以下特性：
- 快照测试：记录组件渲染后的快照，可以用于比较组件是否发生变化。
- Mock：可以方便地模拟函数、模块等，用于测试组件的交互。
- 异步测试：支持 Promise、async/await 等异步操作的测试。
实战 Enzyme + Jest
下面我们将结合一个示例代码，介绍如何使用 Enzyme 和 Jest 进行 React 组件的单元测试。
示例代码
我们将使用一个简单的 TodoList 组件进行测试，代码如下：
-- -------------------- ---- -------
------ ----- ---- --------
----- -------- ------- --------------- -
------------------ -
-------------
---------- - -
--------- ---
----------- ---
--
-
----------------- - ------- -- -
---------------
----------- -------------------
---
--
------------- - -- -- -
----- - --------- ---------- - - -----------
-- ------------ -
---------------
--------- ------------- ------------
----------- ---
---
-
--
---------------- - ------- -- -
----- - -------- - - -----------
---------------
--------- ---------------------- -- -- - --- -------
---
--
-------- -
----- - --------- ---------- - - -----------
------ -
-----
------ ------------------ --------------------------------- --
------- -----------------------------------------
----
-------------------- ------ -- -
--- ------------
------
------- ----------- -- ---------------------------------------------
-----
---
-----
------
--
-
-
------ ------- ---------这个组件实现了一个简单的 TodoList，可以添加、删除待办事项。
测试用例
我们将编写以下测试用例：
- 测试组件渲染是否正确。
- 测试添加待办事项功能是否正确。
- 测试删除待办事项功能是否正确。
组件渲染测试
我们可以使用 Enzyme 的 shallow 函数对组件进行浅渲染，并使用 Jest 的 toMatchSnapshot 函数记录组件渲染后的快照。测试代码如下：
-- -------------------- ---- -------
------ ----- ---- --------
------ - ------- - ---- ---------
------ -------- ---- -------------
------------------ ----------- -- -- -
---------- ------ ----------- -- -- -
----- ------- - ----------------- ----
----------------------------------
---
---这个测试用例会自动生成一个 .snap 文件，记录组件渲染后的快照。如果组件渲染发生变化，将会提示测试失败。
添加待办事项测试
我们可以使用 Enzyme 的 mount 函数对组件进行完整渲染，并模拟用户输入、点击等操作，测试添加待办事项功能是否正确。测试代码如下：
-- -------------------- ---- -------
------ ----- ---- --------
------ - ----- - ---- ---------
------ -------- ---- -------------
------------------ ----------- -- -- -
---------- --- ---- ----------- -- -- -
----- ------- - --------------- ----
----- ----- - ----------------------
----- ------ - -----------------------------
------------------------ - ------- - ------ ------ - ---
-------------------------
---------------------------------------------------
---
---这个测试用例会模拟用户输入 test，点击添加按钮，然后断言组件状态是否正确。
删除待办事项测试
我们可以使用 Enzyme 的 mount 函数对组件进行完整渲染，并模拟用户点击删除按钮的操作，测试删除待办事项功能是否正确。测试代码如下：
-- -------------------- ---- -------
------ ----- ---- --------
------ - ----- - ---- ---------
------ -------- ---- -------------
------------------ ----------- -- -- -
---------- ------ ---- ----------- -- -- -
----- ------- - --------------- ----
----- ----- - ----------------------
----- --------- - -----------------------------
------------------------ - ------- - ------ ------ - ---
----------------------------
----- ------------ - -----------------------------
-------------------------------
---------------------------------------------
---
---这个测试用例会模拟用户输入 test，点击添加按钮，然后点击删除按钮，然后断言组件状态是否正确。
运行测试
我们可以使用 Jest 运行测试，命令如下：
npm test
执行完毕后，如果所有测试用例都通过，将会输出以下信息：
-- -------------------- ---- -------
---- --------------------
-------- ---------
- ------ ------ --------- -----
- ------ --- ---- --------- -----
- ------ ------ ---- --------- -----
---- ------- - ------- - -----
------ - ------- - -----
---------- - ------- - -----
----- ------- --------- --
--- --- ---- -------如果有测试用例失败，将会提示具体的错误信息。
总结
本文介绍了 React 单元测试的利器：实战 Enzyme + Jest。Enzyme 提供了方便的 API，可以对 React 组件进行渲染和交互测试，Jest 是一个简单易用的 JavaScript 测试框架，可以方便地进行单元测试和集成测试。我们通过一个简单的 TodoList 组件的测试示例，介绍了如何使用 Enzyme 和 Jest 进行 React 组件的单元测试。希望本文能够帮助大家更好地进行前端开发。
来源：JavaScript中文网 ，转载请注明来源 https://www.javascriptcn.com/post/65588726d2f5e1655d2b6434