在前端开发中，测试是必不可少的一步。在 React 项目中，有两个流行的测试工具：Jest 和 Enzyme。本文将详细介绍这两个工具的使用，并给出相关示例代码。
Jest 简介
Jest 是 Facebook 推出的一款快速、简单、适用于所有 JavaScript 项目的测试框架。它能够在单个框架中提供整个测试套件的功能，支持快照测试、异步测试以及行覆盖率等特性。
在 React 项目中，Jest 的使用相对简单，框架可自动枚举所有测试用例并运行它们。只需在 package.json 文件的 scripts 属性中配置测试命令，如下所示：
"test": "jest"
默认情况下，Jest 会根据项目中的 tests 目录来查找测试用例。但如果你愿意，也可以在 webpack 中自定义需要进行测试的文件。
Jest 还提供了一种称为 Snapshot 的特性，该特性可通过对组件和页面快照的比对，来将 UI 测试自动化。借助 Jest 的 “record” 操作，可以生成用于重复性测试的标准文件快照。
Enzyme 简介
Enzyme 是 Airbnb 开发的 React 测试工具。它可以让测试工程师轻松地模拟 React 组件，为 React 开发提供足够的自信心来编写可靠的单元测试。
Enzyme 的 API 分为三层：
- Shallow：只渲染单个组件而非子组件。用于快速测试单个组件是否正常工作。
- Mount：在 DOM 中完全渲染组件，用于测试组件的交互和渲染。
- Render：渲染组件并返回纯 HTML 输出，用于与快照库配合使用。
Jest 和 Enzyme 结合使用
Jest 通常被用于测试 React 组件的行为和功能。而 Enzyme 则需要和 Jest 结合使用，以测试每个组件是否被正确地渲染。
在使用 Enzyme 时，需要重点关注几个 API：
- shallow：用于渲染单个组件。
- mount：用于 DOM 中渲染完整组件。
- simulate：用于模拟组件内的事件。
- find：用于查找某个组件或元素。
- setProps：用于更改组件的属性。
- setState：用于更改组件状态。
以下是一个简单的示例，展示了如何在 Jest 中使用 Enzyme 渲染并测试组件：
-- -------------------- ---- ------- ------ ----- ---- -------- ------ - ------- - ---- --------- ------ ------- ---- ----------------------- ------------------- -- -- - ---------- ------ ----------- -- -- - ----- ------- - ---------------- ------------ ------ ---- ------------------------------------------------ -------- --- ---展开代码
在上述示例中，我们首先导入了 React 和 Enzyme。接着，我们使用 shallow 方法将 Example 组件渲染为虚拟 DOM 树，之后使用 find 查找 <h1> 标签，并判断其内容与我们传入的 title 属性值是否相等。
结论
在本文中，我们详细介绍了 Jest 和 Enzyme 两个工具在测试 React 项目中的使用。通过深入了解这两个工具的用法，我们可以很好地为我们的项目提供稳健的测试套件，同时在开发时能够更加自信地推进项目进度。如果你正在开发一个大型的 React 项目，Jest 和 Enzyme 将是你不可或缺的良师益友。
来源：JavaScript中文网 ，转载请注明来源 https://www.javascriptcn.com/post/67315c480bc820c582388325
