在前端开发中，针对组件和 DOM 的测试是必不可少的。React 是一个流行的 JavaScript 库，它使构建 UI 组件变得更加简单。Enzyme 是 React 的一款强大的 JavaScript 测试工具，它可以模拟组件和 DOM，以帮助开发人员创建高质量的 React 应用程序。Jest 是另一款强大的 JavaScript 测试框架，它可以在集成测试中很好地与 Enzyme 配合使用。在本文中，我们将探讨如何使用 Enzyme 和 Jest 进行 React 应用程序集成测试。
安装 Enzyme 和 Jest
要开始使用 Enzyme 和 Jest 进行集成测试，我们需要安装 Enzyme 和 Jest。在终端输入以下命令进行安装：
--- ------- ---------- ------ ----------------------- ---- ----------
配置 Enzyme
在安装 Enzyme 后，我们需要将 Enzyme 配置到 Jest 中。在 src/setupTests.js 文件中添加以下内容：
------ ------ ---- --------- ------ ------- ---- -------------------------- ------------------ -------- --- --------- ---
这个文件将在每次运行 Jest 测试时自动运行。
编写测试用例
现在我们已经安装了 Enzyme 和 Jest 并进行了配置，我们可以编写我们的测试用例了。在编写测试用例之前，我们需要通过命令行创建一个名为 App.test.js 的测试文件。在 App.test.js 文件中添加以下内容：
------ ----- ---- --------
------ ------- - ----- - ---- ---------
------ ------- ---- --------------------------
------ --- ---- --------
------------------ -------- --- --------- ---
------------- ----------- -- -- -
---------- ------ ----------- -- -- -
----- --------- - ---------- ----
------------------------------------
---
---在这个测试文件中，我们首先将 React 组件和 Enzyme 引入。我们然后配置了 Enzyme，使用 Mount 方法将我们的组件渲染到文档中。最后，我们使用 Jest expect 断言进行测试，检查组件是否按预期渲染。在这个测试用例中，我们期望 App 组件能够被正确地渲染，并且返回结果应该匹配我们与应用程序一起快照保存的预期结果。
运行测试
现在我们已经创建了测试用例，我们可以在终端中运行指示 Jest 运行所有应用程序测试的命令：
--- ----
这将在终端中启动 Jest 的交互式环境，并运行我们刚刚编写的测试。Jest 应该会检测到 App 组件是否按照预期进行渲染。如果测试通过，Jest 将向我们提供一个关于测试情况的报告。如果测试失败，可以使用 Jest 提供的原因和信息来确定源代码中的问题，并进行必要的更正和调整。
总结
在本文中，我们简要介绍了如何使用 Enzyme 和 Jest 来进行集成测试，并且提供了一个演示测试用例。测试是前端应用程序开发的关键部分，集成测试可以帮助我们确保我们的应用程序功能按预期方向工作。Enzyme 和 Jest 提供了一种简单，功能强大的测试路线，让我们容易地实现测试驱动开发（TDD），并为您的 React 应用程序提供高质量的保证。
来源：JavaScript中文网 ，转载请联系管理员！ 本文地址：https://www.javascriptcn.com/post/6460ad2c968c7c53b02515e4