在前端开发中，测试是非常重要的一环。Enzyme 和 Jest 是 React 测试领域使用最广泛的两个库，它们可以协同使用，对 React 组件进行测试和断言。
Enzyme 简介
Enzyme 是一款用于 React 测试的 JavaScript 工具，由 Airbnb 开发和维护。它提供了一系列简单易用的 API，帮助开发者对 React 组件进行渲染、断言和变更测试。
Enzyme 官方支持 React 16 及以上的版本。
Jest 简介
Jest 是一个令人愉悦的 JavaScript 测试框架，由 Facebook 开发和维护。它可以与 Babel、Webpack、Node 等工具进行集成，并且内置了代码覆盖率报告等功能，使用起来非常方便。
Jest 目前支持大多数的 JavaScript 库和框架，包括 React。
Enzyme 和 Jest 结合使用
在项目中使用 Enzyme 和 Jest 可以很好的增强代码质量，以下是如何结合使用它们的方法。
安装 Enzyme 和 Jest
要安装 Enzyme 和 Jest，可以使用 npm 命令行。
npm install --save-dev enzyme jest enzyme-adapter-react-16 react-test-renderer
这里安装了 enzyme，jest，enzyme-adapter-react-16 和 react-test-renderer 这些依赖。
配置 Enzyme Adapter
在使用 Enzyme 前，我们需要先配置适配器。在这里，我们使用 enzyme-adapter-react-16 这个适配器。
在 setupTests.js 文件中添加以下代码：
import { configure } from 'enzyme';
import Adapter from 'enzyme-adapter-react-16';
configure({ adapter: new Adapter() });这会告诉 Enzyme 使用适配器 Adapter，以支持 React 16。
编写测试用例
编写测试用例之前，我们需要先了解 Enzyme 提供的几种渲染器：shallow、mount 和 render。
shallow：进行浅渲染，只渲染当前组件，不渲染其中包含的子组件。mount：进行完全渲染，即渲染当前组件和其中包含的子组件。render：用于生成静态 HTML，如果测试组件需要静态生成 HTML 用于测试，则可以使用此方法。
我们可以用这些渲染器来测试组件是否渲染正确，并断言其特定属性和状态的值。
下面是一个简单的示例：
-- -------------------- ---- -------
------ ----- ---- --------
------ - ------- - ---- ---------
------ --- ---- --------
-------------- ---- -- -- -
---------- ------ ----------- -- -- -
----- --------- - ------------ ----
------------------------------------
---
---在该测试用例中，我们使用 shallow 渲染器来渲染 <App /> 组件，并使用 toMatchSnapshot() 方法来对比快照。将来如果组件发生变化时，这个测试将会失败，从而提示我们进行修复。
运行测试用例
最后，我们需要运行测试代码，使用 Jest 来执行 Enzyme 测试用例。
在 package.json 中添加如下代码：
{
"scripts": {
"test": "react-scripts test",
"test:coverage": "react-scripts test --coverage --watchAll=false",
"test:update": "react-scripts test --updateSnapshot"
}
}其中，test 执行基本测试，test:coverage 生成测试覆盖率报告，test:update 更新快照文件。
总结
本文介绍了 Enzyme 和 Jest 的概述和如何结合使用，通过使用它们来进行测试，可以保证代码的健壮性和可维护性。希望本文能对前端工程师有所帮助。
来源：JavaScript中文网 ，转载请注明来源 https://www.javascriptcn.com/post/64748fd0968c7c53b01e7da2