React 是一个非常流行的前端框架，它为我们提供了优雅地构建用户界面的方式。在 React 中，组件担当着核心角色，它们是构建 UI 的基本单位。测试 React 组件是一项非常重要的任务，特别是当我们开发具有复杂业务逻辑的应用程序时，测试变得更加重要。本文将介绍如何使用 Enzyme 和 Jest 来测试无状态组件和异步更新。
环境设置
在开始测试之前，我们需要安装所需的依赖项。我们将使用 Enzyme 和 Jest 来测试。
- Enzyme 是 React 组件测试库，它为我们提供了可以轻松操作和检查 React 组件的 API。安装 Enzyme 请使用以下命令：
npm install --save-dev enzyme enzyme-adapter-react-16
- Jest 是一个基于 JavaScript 的测试框架，它专注于提供易于使用的测试框架。安装 Jest 请使用以下命令：
npm install --save-dev jest babel-jest @babel/preset-env @babel/preset-react
现在我们已经安装了所需的依赖项，我们可以开始编写测试用例。
测试无状态组件
无状态组件是指没有内部状态，不管理内部状态，没有生命周期方法，并且完全受控于它的 props 的组件。通常情况下，这些组件仅仅只是渲染 UI 元素。无状态组件是 React 中的最佳实践之一，因为它们易于维护，可测试性好。
在测试无状态组件时，我们需要测试以下几个方面：
- 组件是否正确呈现 UI 元素
- 确认在给定的 props 下组件是否呈现 UI 元素
- 确认组件的回调函数是否按预期被调用
下面是一个展示了如何测试无状态组件的示例：
-- -------------------- ---- -------
------ ----- ---- --------
------ - ------- - ---- ---------
------ --------- ---- --------------
-------------- ----------- -- -- -
--- --------
------------- -- -
------- - ------------------ ------------ ----
---
----------- --- ----------- -- -- -
-----------------------------------------------------
---
------------ --- ------ -- -- -
--------------------------------------------------- --------
---
--------- --- -------- -------- ---- --------- -- -- -
----- ----------- - ----------
------------------ ----------- ---
-----------------------------------------
---------------------------------------------
---
---上面的例子演示了以下内容：
- 我们首先设置了一个
wrapper对象，它代表我们测试的组件 - 在第一个测试用例中，我们使用
expect和toEqual断言法断言了组件的正确渲染情况 - 在第二个测试用例中，我们使用
expect和toEqual断言法断言了渲染的输出结果是否正确。 - 在第三个测试用例中，我们测试组件中的点击事件，确保回调函数被正确地调用。
测试具有异步逻辑的组件
有些 React 组件包含异步逻辑。这意味着在渲染组件时，可能需要等待某些异步操作完成之后才能进行测试。在这种情况下，我们需要使用 async/await 和 waitFor 函数。
waitFor 函数是 Enzyme 中的一个实用程序，它允许我们等待一个异步操作完成之后再继续执行测试。它可以帮助我们避免在繁琐的等待时间内耗费过多的时间。
以下是一个展示了如何测试具有异步逻辑的组件的示例：
-- -------------------- ---- -------
------ ----- ---- --------
------ - ----- - ---- ---------
------ ----- ---- --------
------ --------- ---- --------------
-------------------
-------------- ----------- -- -- -
------------- -- -
---------------------
---
------------ ---- ----- --- ---- -- ---------- ----- -- -- -
----- -------- - - ----- - ----- ------- - --
--------------------------------------
----- ------- - ---------------- ----
----- ---------------------------------
-----------------------------------------------------
--------------------------------------------------- --------
---
---
-------- -------------------------------- -
------ --- --------------- -- ---------------------
-上面的例子演示了以下内容：
- 我们首先模拟了一个 Axios API 调用，并使用
mockResolvedValue方法模拟了异步调用的响应。 - 在测试用例中，我们使用
mount方法呈现组件，等待异步操作完成，确保组件的正确渲染 - 我们使用了自定义的
waitForComponentToPaint函数将异步操作延迟到浏览器完成绘制之前，仅仅为了让渲染效果更加直观。这个函数对于初学者可不是必要的。 - 使用
expect和toEqual断言法断言了组件是否正确地渲染。
总结
在本文中，我们学习了如何使用 Enzyme 和 Jest 测试 React 组件，包括无状态组件和具有异步逻辑的组件。我们介绍了常用的测试技术，例如设置包装对象、断言和模拟 API 调用。我们还讨论了如何避免异步调用和等待时间对测试性能的影响。
测试不仅有助于保持代码的质量和可维护性，还为程序员提供了一种思考的模式，以确保代码是高质量的。在测试组件时，请遵循尽可能详细的测试用例，以确保组件在所有情况下都能按预期工作。
示例代码
下面是我们在本文中使用的示例代码：
./Component.jsx
-- -------------------- ---- -------
------ ----- ---- --------
----- --------- - -- ----- ----------- -- -- -
------ -
---- ----------------------
--- ---------------------- -----------
------- --------------------------- -----------
------
--
--
------ ------- ----------来源：JavaScript中文网 ，转载请注明来源 https://www.javascriptcn.com/post/647d56f8968c7c53b0827a22