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