前言
在现代前端开发中，单元测试是保证代码质量和可靠性的重要手段。在 React 开发中，由于组件化的设计思想，组件之间存在较强的耦合性，因此单元测试显得尤为重要。本文将介绍使用 Jest + Enzyme 进行 React 单元测试的实践，包括 Jest 和 Enzyme 的基本用法、如何编写单元测试用例以及常见的问题和解决方案。
Jest 和 Enzyme 简介
Jest
Jest 是 Facebook 推出的一款 JavaScript 单元测试框架，它具有简单易用、速度快、覆盖率高等特点。Jest 内置了断言库、测试运行器和 Mock 库等功能，可以轻松地编写和执行测试代码，并且可以生成测试覆盖率报告、Mock 数据等。
Enzyme
Enzyme 是 Airbnb 推出的 React 测试工具库，它提供了对 React 组件进行渲染、查找、交互的 API，并且支持多种渲染类型，如 shallow rendering（浅渲染）、mounting（完整渲染）和 rendering（静态渲染）。
Jest 和 Enzyme 的基础使用
在介绍 Jest 和 Enzyme 的基础使用前，我们先准备好一个 React 组件：
-- -------------------- ---- -------
------ ------ - -------- - ---- --------
------ ------- -------- --------- -
----- ------- --------- - ------------
-------- ------------- -
-------------- - ---
-
------ -
-----
------------ ------------
------- ----------------------------------
------
--
-安装 Jest 和 Enzyme
在使用 Jest 和 Enzyme 进行单元测试之前，我们需要先安装它们：
npm install jest enzyme enzyme-adapter-react-16 --save-dev
其中，enzyme-adapter-react-16 用于适配 React 16 版本的 Enzyme。
Jest 基本用法
在项目根目录创建一个 __tests__ 目录，然后新建一个 counter.test.js 文件，在文件中编写测试代码：
-- -------------------- ---- -------
------ ----- ---- --------
------ - ------- - ---- ---------
------ ------- ---- ----------------------------
----------------- ----------- -- -- -
---------- ------ ----------- -- -- -
----- ------- - ---------------- ----
--------------------------------------------------- ----
---
---------- --- --------- ---- ----- -------- -- -- -
----- ------- - ---------------- ----
-----------------------------------------
--------------------------------------------------- ----
---
---这里我们使用了 Jest 提供的全局函数 describe() 和 it()，describe() 用于对测试用例进行分组描述，it() 用于编写单个测试用例。shallow() 函数用于对组件进行浅渲染，可以快速地生成组件的 DOM 结构。
Enzyme 基本用法
除了 shallow() 函数之外，Enzyme 还提供了多种渲染类型，我们可以针对实际情况选择合适的渲染类型，例如：
-- -------------------- ---- -------
------ ----- ---- --------
------ - ----- - ---- ---------
------ ------- ---- ----------------------------
----------------- ----------- -- -- -
---------- ------ ----------- -- -- -
----- ------- - -------------- ----
--------------------------------------------------- ----
---
---------- --- --------- ---- ----- -------- -- -- -
----- ------- - -------------- ----
-----------------------------------------
--------------------------------------------------- ----
---
---在这里，我们使用了 mount() 函数，可以对组件进行完整渲染。
运行测试
当我们编写完测试用例后，可以使用以下命令运行测试：
npx jest
如果一切正常，我们会看到测试结果：
PASS __tests__/counter.test.js
Counter Component
✓ should render correctly (5 ms)
✓ should add correctly when click button (5 ms)
Test Suites: 1 passed, 1 total
Tests: 2 passed, 2 total编写单元测试用例
在编写单元测试用例时，我们需要考虑到组件的不同状态和交互行为，以保证测试覆盖到尽可能多的场景。以下是一些编写测试用例的注意点：
测试组件渲染是否正确
我们需要测试组件是否按照预期进行渲染。可以通过查找元素、元素属性和元素文本内容等方式来验证。
测试组件 UI 交互
我们需要测试组件的 UI 交互是否按照预期进行。可以通过模拟鼠标事件、键盘事件和触摸事件等方式来模拟用户操作。
测试组件状态变化
我们需要测试组件的状态变化是否按照预期进行。可以通过模拟用户操作来触发事件，然后通过查找元素、元素属性和元素文本内容等方式来验证组件状态是否改变。
测试组件生命周期函数
我们需要测试组件的生命周期函数是否按照预期进行。可以通过断言组件状态或者模拟父组件的操作等方式来验证组件的生命周期函数的正确性。
常见问题及解决方案
在使用 Jest 和 Enzyme 进行单元测试的过程中，可能会遇到一些常见问题，这里介绍一些解决方案：
如何 Mock Axios？
可以使用 Jest 提供的 Mock 库来 Mock Axios，例如：
-- -------------------- ---- -------
------ ----- ---- --------
-------------------
--------------------- -- -- -
---------- ----- ---- ---- --------- -- -- -
----------------------------- ----- ------ ------ ---
----- ------- - ------------------ ----
-------------------------------------------- --------
---
---在这里，我们使用 jest.mock() 将 Axios Mock 掉，然后使用 mockResolvedValue() 来模拟接口返回的数据。
如何测试 Redux？
可以使用 Redux Mock Store 来 Mock Redux 的 Store，例如：
-- -------------------- ---- -------
------ ----- ---- --------
------ - ------- - ---- ---------
------ -------------- ---- -------------------
------ ------- ---- ----------------------------
------ - --------- - ---- -----------------
----- --------- - -------------------
----------------- ----------- -- -- -
---------- ------ ----------- -- -- -
----- ----- - ----------- ------ - ---
----- ------- - ---------------- ------------- ----
--------------------------------------------------- ----
---
---------- -------- --------- ------ ---- ----- -------- -- -- -
----- ----- - ----------- ------ - ---
----- ------- - ---------------- ------------- ----
-----------------------------------------
--------------------------------------------------
---
---在这里，我们使用 Redux Mock Store 将 Redux Store Mock 掉，然后使用 mockStore() 函数来生成一个 Mock Store，然后通过传递 store 属性来连接到组件中。
结语
本文介绍了 Jest 和 Enzyme 进行 React 单元测试的实践总结，包括 Jest 和 Enzyme 的基本使用、编写单元测试用例的注意点以及常见问题和解决方案。在实践过程中，我们需要理解 React 组件的设计思想和生命周期函数，以便编写出更加健壮的测试用例。同时，测试并不是一次性的，我们需要不断地维护和更新测试用例，以保证代码质量和可靠性。
来源：JavaScript中文网 ，转载请注明来源 https://www.javascriptcn.com/post/6475a42b968c7c53b02a6fd7