在 React 开发中，单元测试是非常重要的一环。而在 React 单元测试中，使用 Jest 与 Enzyme 框架结合使用可以提升测试效率和代码质量。
Jest
Jest 简介
Jest 是一个开源的 JavaScript 测试框架，由 Facebook 开发和维护。它具有简单易用、速度快、自动化繁琐的特点。
使用 Jest 进行测试
使用 Jest 进行测试十分简单。只需在终端输入以下命令即可运行测试：
--- ----
如果要测试指定文件，可以在命令后面指定文件路径。比如：
--- ---- -------------------------------
Jest 测试用例
下面是一个 Jest 测试用例的示例：
-- ---- --------------
------ ----- ---- --------
------ - ------- - ---- ---------
------ ------ ---- -----------
---------------- ----------- -- -- -
------------ ------ ------ -- -- -
----- ------- - --------------- ----------- --- ----
--------------------------------------- -----
---
---在代码中，我们使用了 Jest 提供的 describe 和 test 函数来描述和执行测试用例。shallow 函数来自 Enzyme，用来创建一个浅渲染组件的实例。最后使用 expect 断言语句来判断结果是否正确。
Enzyme
Enzyme 简介
React 官方不提供 DOM 测试工具，Enzyme 是一个 React 测试工具库，通过 Enzyme 我们可以方便地操作并验证组件的状态和输出。
使用 Enzyme 进行测试
Enzyme 提供了三个方法来创建组件的实例，分别是 shallow、mount 和 render。其中，shallow 创建的是浅渲染组件的实例，渲染的组件只渲染了当前组件，不会渲染子组件，速度比较快。mount 创建的是完整渲染组件的实例，渲染的组件包含了所有子组件，速度比较慢。render 创建的是静态渲染组件的实例，可以用来检查组件的输出。
Enzyme 测试用例
下面是一个使用 Enzyme 进行测试的示例：
-- ---- --------------
------ ----- ---- --------
------ - ------- - ---- ---------
------ ------ ---- -----------
---------------- ----------- -- -- -
------------ ------ ------ -- -- -
----- ------- - --------------- ----------- --- ----
--------------------------------------- -----
---
---在代码中，我们使用了 Enzyme 提供的 shallow 函数来创建组件的实例，并使用 expect 断言语句来判断结果是否正确。
Jest + Enzyme
Jest + Enzyme 配置
要使用 Jest 和 Enzyme 进行测试，需要先配置 Jest。在项目根目录下创建配置文件 jest.config.js，并添加以下内容：
-------------- - -
----------------------- ------------------ -----------
------------------- --------------------------------
----------------- -
----------------- ---------------------
--
--其中，testPathIgnorePatterns 是指定 Jest 忽略哪些目录下的测试文件；setupFilesAfterEnv 是指定 Enzyme 的配置文件；moduleNameMapper 是指定模块的映射，用来处理模块的导入。
在项目根目录下创建配置文件 src/setupTests.js，并添加以下内容：
------ ------ ---- --------- ------ ------- ---- ------------------------------------- ------------------ -------- --- --------- ---
其中，我们使用了 enzyme-adapter-react-17 来适配 React 17。
Jest + Enzyme 测试用例
下面是一个使用 Jest + Enzyme 进行测试的示例：
-- ---- --------------
------ ----- ---- --------
------ - ------- - ---- ---------
------ ------ ---- -----------
---------------- ----------- -- -- -
------------ ------ ------ -- -- -
----- ------- - --------------- ----------- --- ----
--------------------------------------- -----
---
---在代码中，我们使用了 Jest 和 Enzyme 配合使用，使用了 Jest 提供的 describe 和 test 函数，和 Enzyme 提供的 shallow 函数来创建组件的实例，最后使用 expect 断言语句来判断结果是否正确。
总结
使用 Jest 和 Enzyme 进行 React 单元测试可以提升代码质量和测试效率。本文中，我们详细介绍了 Jest 和 Enzyme 的使用方法，并给出了示例代码，希望对读者有所启发。
来源：JavaScript中文网 ，转载请联系管理员！ 本文地址：https://www.javascriptcn.com/post/652bf0b27d4982a6ebdcca65