React 是一个流行的 JavaScript 库，用于构建用户界面。使用 Jest 和 Enzyme 进行 React 组件测试是开发 React 应用的重要方面。本文将深入介绍 Jest 和 Enzyme，它们的作用，如何设置以及如何编写测试用例来测试您的 React 组件。
Jest 概述
Jest 是由 Facebook 开发的一个基于 JavaScript 的测试框架。它是一个全功能的测试框架，它包括断言、mock、测试用例运行和结果报告等功能。Jest 非常容易上手，具有简化和自动化测试的功能。除此之外，Jest 还具有快速和可信赖的测试结果。
Enzyme 概述
Enzyme 是 React 应用程序的的一个 JavaScript 测试实用程序。它支持反应组件的渲染、断言、模拟等操作。Enzyme 可以在浏览器和服务器端运行，并与 Jest 配合使用可以实现有效的 React 组件测试。
配置 Jest 和 Enzyme
在使用 Jest 和 Enzyme 进行 React 组件测试之前，您需要安装它们。您可以使用以下命令来通过 npm 安装这些库：
--- ------- ---- ------ ----------------------- ----------
安装了 Jest 和 Enzyme 后，您需要在 Jest 环境中配置 Enzyme。
在项目根目录下创建一个名为 jest.config.js 的文件，并添加以下配置：
-------------- - - ------------------- ---------------------------- -------------------- ----------------------------- --
此配置将需要在测试运行之前执行的脚本（setupTests.ts）和用于测试快照序列化的 Enzyme 序列化程序添加到 Jest 配置中。
接下来，创建一个 setupTests.ts 文件，并添加以下内容：
------ ------ ---- --------- ------ ------- ---- -------------------------- ------------------ -------- --- --------- ---
此文件将配置 Enzyme 适配器以及其他 Enzyme 设置。
编写 React 组件测试用例
现在，我们已经成功配置了 Jest 和 Enzyme。下面是如何编写测试用例的详细说明。
React 组件测试的基本包括以下内容：
- 渲染测试
- 交互性测试
- 快照测试
下面，我们将逐一介绍这几种测试方式。
渲染测试
渲染测试旨在测试组件是否可以成功渲染。这种测试不考虑组件逻辑和交互性，仅仅测试组件是否可以正确地生成 HTML 元素。
例如，下面的代码是可以测试 Hello 组件是否成功渲染：
------ ----- ---- --------
------ - ------- - ---- ---------
------ ----- ---- ----------
--------------- ----------- -- -- -
---------- ------ ------- -------- -- ------- -- -- -
----- ------- - -------------- ----
------------------------------------------------
---
---在上面的测试用例中，我们先使用 Enzyme 中的 shallow() 方法来创建一个组件包装器，然后使用 find() 方法来查找是否有 div 元素渲染。
交互性测试
交互性测试旨在测试组件的行为，通常涉及用户与组件的交互。例如，当用户点击按钮时，组件是否正确响应，是否正确更新状态。
例如，下面的代码可以测试一个 Counter 组件的点击事件和状态更新：
----------------- ----------- -- -- -
---------- -------- --- ----- ---- --- --------- ------ -- --------- -- -- -
----- ------- - ---------------- ----
----- --------------- - -----------------------------
----------------------------------
-------------------------------------------------
---
---在上面的代码中，我们使用 shallow() 方法创建 Counter 组件的包装器，然后使用 find() 方法来查找 increment 按钮。接着使用 simulate() 方法模拟点击按钮的操作，并使用 expect() 方法断言是否正确更新状态。
快照测试
快照测试旨在在每次测试运行时生成组件的快照，并在每次测试运行时比较快照。这样可以确保组件没有意外的变化。
例如，下面是一个简单的 Button 组件，我们可以使用快照测试来测试组件是否无意中更改。
------ ----- ---- --------
------ -------- ---- ----------------------
------ ------ ---- -----------
---------------- ----------- -- -- -
----------- --- ---------- -- -- -
----- ---- - ----------------------- -------------
-------------------------------
---
---在上面的代码中，我们使用 renderer.create() 方法生成组件树并将其转换为 JSON 格式。然后使用 toMatchSnapshot() 方法生成组件的快照。在后续测试运行中，如果组件快照更改，则测试将失败。
结论
使用 Jest 和 Enzyme 进行 React 组件测试使得开发高质量的 React 应用变得更加容易。它提供了一种有效的方法来测试 React 组件，并帮助捕捉潜在的问题和错误。在本文中，我们已经介绍了 Jest 和 Enzyme 简介，配置和编写测试用例。我们希望这份指南能够帮助您更好地理解 Jest 和 Enzyme，并更好地测试您的 React 组件。
来源：JavaScript中文网 ，转载请注明来源 本文地址：https://www.javascriptcn.com/post/6710e3adad1e889fe2fc9550