前端开发中，测试是不可避免的一步，因为测试可以帮助我们发现潜在的问题，提高代码质量和可维护性。React 组件测试是前端测试的一个重要部分，通过测试可以确保组件的正确性、稳定性和有效性。本文将详细介绍如何使用 Jest 和 Enzyme 编写 React 组件测试。
Jest
Jest 是 Facebook 开源的 JavaScript 测试框架，它具有简单易用、零配置、速度快、快照测试等优点，在社区中得到了广泛的应用和认可。在 React 中，Jest 不仅可以用于单元测试，还可以用于集成测试和端到端测试。下面我们来了解一下 Jest 的基本用法。
安装 Jest
安装 Jest 的最简单方式是使用 npm：
--- ------- ---------- ----
编写测试用例
Jest 的测试用例文件按照特定的命名规则，以 .test.js 或 .spec.js 结尾。在 React 中，通常会为每个组件编写一个对应的测试用例文件，例如 MyComponent.test.js。
一个简单的测试用例如下所示：
---------- - - - -- ----- --- -- -- - -------- - ----------- ---
这个测试用例的意思是：断言 1 + 2 的结果是否等于 3。如果测试通过，则输出 PASS，否则输出 FAIL。
运行测试
要运行 Jest 测试，可以在命令行中输入以下命令：
--- ----
Jest 会自动查找项目中所有的测试用例文件，并执行它们。运行测试时，可以通过 --watch 参数启动监视模式，自动监测文件改动并重新执行测试。
Enzyme
Enzyme 是由 Airbnb 开源的 React 组件测试工具，它提供了强大的组件渲染、断言、事件模拟等功能，可以帮助我们编写更加易于维护和扩展的测试用例。下面我们来了解一下 Enzyme 的基本用法。
安装 Enzyme
安装 Enzyme 的最简单方式也是使用 npm：
--- ------- ---------- ------ -----------------------
其中，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 测试，可以在命令行中输入以下命令：
--- ----
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