前端开发中，测试是不可避免的一步，因为测试可以帮助我们发现潜在的问题，提高代码质量和可维护性。React 组件测试是前端测试的一个重要部分，通过测试可以确保组件的正确性、稳定性和有效性。本文将详细介绍如何使用 Jest 和 Enzyme 编写 React 组件测试。
Jest
Jest 是 Facebook 开源的 JavaScript 测试框架，它具有简单易用、零配置、速度快、快照测试等优点，在社区中得到了广泛的应用和认可。在 React 中，Jest 不仅可以用于单元测试，还可以用于集成测试和端到端测试。下面我们来了解一下 Jest 的基本用法。
安装 Jest
安装 Jest 的最简单方式是使用 npm：
npm install --save-dev jest
编写测试用例
Jest 的测试用例文件按照特定的命名规则，以 .test.js 或 .spec.js 结尾。在 React 中，通常会为每个组件编写一个对应的测试用例文件，例如 MyComponent.test.js。
一个简单的测试用例如下所示：
test('adds 1 + 2 to equal 3', () => {
expect(1 + 2).toBe(3);
});这个测试用例的意思是：断言 1 + 2 的结果是否等于 3。如果测试通过，则输出 PASS，否则输出 FAIL。
运行测试
要运行 Jest 测试，可以在命令行中输入以下命令：
npm test
Jest 会自动查找项目中所有的测试用例文件，并执行它们。运行测试时，可以通过 --watch 参数启动监视模式，自动监测文件改动并重新执行测试。
Enzyme
Enzyme 是由 Airbnb 开源的 React 组件测试工具，它提供了强大的组件渲染、断言、事件模拟等功能，可以帮助我们编写更加易于维护和扩展的测试用例。下面我们来了解一下 Enzyme 的基本用法。
安装 Enzyme
安装 Enzyme 的最简单方式也是使用 npm：
npm install --save-dev enzyme enzyme-adapter-react-16
其中，enzyme 是 Enzyme 本体，enzyme-adapter-react-16 是 Enzyme 适配器，用于支持 React 16 及以上版本。
编写测试用例
Enzyme 的测试用例通常会使用 shallow() 或 mount() 函数来渲染组件，并对组件进行断言。
shallow() 函数用于浅渲染组件，只会渲染它本身而不会渲染它内部的子组件。它提供了类似 jQuery 的链式 API，可以方便地对组件的属性、状态、结构等进行断言。
mount() 函数用于完全渲染组件，会渲染它包括内部子组件在内的全部内容。它也提供了类似 jQuery 的链式 API，但由于完全渲染组件的开销较大，通常只用于集成测试和端到端测试。
一个简单的 Enzyme 测试用例如下所示：
-- -------------------- ---- -------
------ ----- ---- --------
------ - ------- - ---- ---------
------ ----------- ---- ----------------
----------------------- -- -- -
---------- ------ ----------- -- -- -
----- --------- - -------------------- ----
------------------------------------
---
---------- ---- - ------- -- -- -
----- --------- - -------------------- ----
------------------------------------------------ ---------
---
---------- ---- - -------- -- -- -
----- --------- - -------------------- ----
-------------------------------------------------
---
---这个测试用例的意思是：断言 MyComponent 渲染的结果是否正确。第一个测试用例使用 toMatchSnapshot() 函数生成快照，并与预期结果进行比较；第二个测试用例使用 find() 函数查找 MyComponent 中的 h1 元素，并断言它的文本内容；第三个测试用例使用 find() 函数查找 MyComponent 中的 button 元素，并断言它的数量。
运行测试
要运行 Enzyme 测试，可以在命令行中输入以下命令：
npm test
Enzyme 会自动查找项目中所有的测试用例文件，并执行它们。在测试过程中，Enzyme 会生成一个类似 DOM 的结构，并提供一系列 API 来操作它。我们只需要使用这些 API 来编写断言就可以了。
组件测试入门
在 React 组件测试中，通常会使用 Jest 和 Enzyme 的组合来实现测试用例的编写。下面我们来看一下具体的组件测试流程。
准备工作
在编写组件测试之前，需要先对组件进行准备工作。
首先，需要安装 Jest 和 Enzyme，并配置 Enzyme 适配器：
-- -------------------- ---- -------
-- ------------
-
------- -
--------------------- -
---------------------
-
-
-
-- -----------------
------ ------ ---- ---------
------ ------- ---- --------------------------
------------------ -------- --- --------- ---然后，需要创建一个包含组件的测试用例文件：
-- -------------------- ---- -------
-- -----------------------
------ ----- ---- --------
------ - ------- - ---- ---------
------ ----------- ---- ----------------
----------------------- -- -- -
---------- ------ ----------- -- -- -
----- --------- - -------------------- ----
------------------------------------
---
---最后，需要为组件编写源代码：
-- -------------------- ---- -------
-- ------------------
------ ------ - --------- - ---- --------
----- ----------- ------- --------- -
-------- -
------ -
-----
---------- -----------
------------- -----------
------
--
-
-
------ ------- ------------编写测试用例
在测试用例中，通常会按照以下步骤进行测试：
- 测试组件是否能够正常渲染；
- 测试组件的属性、状态、样式等是否正确；
- 测试组件的事件、回调等是否正确触发。
下面我们根据这些测试步骤来编写测试用例。
测试组件是否能够正常渲染
在测试组件是否能够正常渲染时，可以使用 shallow() 函数来浅渲染组件，并使用 toMatchSnapshot() 函数生成快照，然后与预期结果进行比较。
-- -------------------- ---- -------
------ ----- ---- --------
------ - ------- - ---- ---------
------ ----------- ---- ----------------
----------------------- -- -- -
---------- ------ ----------- -- -- -
----- --------- - -------------------- ----
------------------------------------
---
---这个测试用例的意思是：断言 MyComponent 渲染的结果是否正确。如果测试通过，则会生成一个快照文件，用于与下次运行测试时的渲染结果进行比较。如果测试不通过，则说明渲染结果有变化，需要更新快照文件或手动校验改动是否合理。
测试组件的属性、状态、样式等是否正确
在测试组件的属性、状态、样式等是否正确时，可以使用 shallow() 函数来浅渲染组件，并使用 Enzyme 的 API 来操作组件。
例如，我们可以使用 prop() 函数来获取或设置组件的属性：
-- -------------------- ---- -------
------ ----- ---- --------
------ - ------- - ---- ---------
------ ----------- ---- ----------------
----------------------- -- -- -
---------- ---- - ------- -- -- -
----- --------- - -------------------- ----
------------------------------------------------ ---------
---
---------- ---- - -------- -- -- -
----- --------- - -------------------- ----
-------------------------------------------------
---
---------- ------ ------ ----- -- ------ ------- -- -- -
----- --------- - -------------------- ----
----------------------------------------------
-------------------------------------------
---------------------------------------------
---
---这个测试用例的意思是：断言 MyComponent 是否包含标题、按钮以及状态，并在按钮点击时切换状态是否正常。如果测试通过，则说明组件的属性、状态、样式等正确；否则说明有问题，需要修复。
测试组件的事件、回调等是否正确触发
在测试组件的事件、回调等是否正确触发时，可以使用 shallow() 或 mount() 函数来完全渲染组件，并使用 Enzyme 的 API 来模拟事件、触发回调等。
例如，我们可以使用 simulate() 函数来模拟点击事件，并使用 Jest 的 fn() 函数来监听回调是否被正确调用：
-- -------------------- ---- -------
------ ----- ---- --------
------ - ----- - ---- ---------
------ ----------- ---- ----------------
----------------------- -- -- -
---------- ---- ------- -------- ---- ------ -- --------- -- -- -
----- ----------- - ----------
----- --------- - ------------------ --------------------- ----
-------------------------------------------
---------------------------------------
---
---这个测试用例的意思是：断言 MyComponent 的 onClick 回调是否正常触发。如果测试通过，则说明组件的事件、回调等正确，否则说明有问题，需要调试。
总结
本文介绍了如何使用 Jest 和 Enzyme 编写 React 组件测试。在编写测试用例时，我们需要按照组件的属性、状态、样式、事件等多个方面进行测试，并使用 Enzyme 的 API 来模拟和操作组件。通过测试，我们可以发现和解决潜在的问题，提高代码质量和可维护性。
来源：JavaScript中文网 ，转载请注明来源 https://www.javascriptcn.com/post/66469ff0d3423812e44bbbd9