React 是一种流行的前端框架，它提供了一种组件化的方式来构建用户界面。在开发 React 应用程序时，测试是不可或缺的一部分。在本文中，我们将介绍如何使用 Enzyme 和 Jest 进行 React 测试。
Enzyme 是什么？
Enzyme 是一个 React 测试工具，它提供了一种易于使用的 API，可以帮助我们对 React 组件进行深度渲染和模拟事件。Enzyme 支持多种渲染器，包括 React DOM 和 React Native，因此它适用于各种 React 应用程序。
Jest 是什么？
Jest 是一个流行的 JavaScript 测试框架，它具有易于使用的 API、强大的断言库和内置的代码覆盖率报告功能。Jest 可以与 React 无缝集成，因此它是 React 测试的理想选择。
安装和配置 Enzyme 和 Jest
在开始之前，我们需要安装和配置 Enzyme 和 Jest。首先，我们需要使用 npm 安装 Enzyme 和 Jest：
npm install --save-dev enzyme jest enzyme-adapter-react-16
然后，我们需要在项目中配置 Enzyme 适配器。在 src/setupTests.js 文件中添加以下代码：
import { configure } from 'enzyme';
import Adapter from 'enzyme-adapter-react-16';
configure({ adapter: new Adapter() });最后，我们需要在 package.json 文件中添加以下 Jest 配置：
{
"jest": {
"setupFilesAfterEnv": ["<rootDir>/src/setupTests.js"]
}
}现在，我们已经成功配置了 Enzyme 和 Jest。
编写测试用例
让我们来编写一个简单的测试用例来测试一个 React 组件。假设我们有一个名为 Counter 的组件，它将显示一个计数器和两个按钮，一个用于增加计数器，另一个用于减少计数器。我们将使用 Enzyme 和 Jest 来测试该组件。
首先，我们需要导入 React、Enzyme 和 Counter 组件：
import React from 'react';
import { shallow } from 'enzyme';
import Counter from './Counter';然后，我们可以编写我们的测试用例。我们将测试组件是否正确地渲染了计数器和按钮，并且是否正确地响应了按钮点击事件：
-- -------------------- ---- -------
------------------- -- -- -
---------- ------ --- ------- --- --------- -- -- -
----- ------- - ---------------- ----
-----------------------------------------------------
----------------------------------------------------------------------
----------------------------------------------------------------------
---
---------- --------- --- ------- ---- --- --------- ------ -- --------- -- -- -
----- ------- - ---------------- ----
----------------------------------------------------
-----------------------------------------------------
---
---------- --------- --- ------- ---- --- --------- ------ -- --------- -- -- -
----- ------- - ---------------- ----
----------------------------------------------------
------------------------------------------------------
---
---在上面的代码中，我们首先编写了一个测试用例来测试组件是否正确地渲染了计数器和按钮。然后，我们编写了两个测试用例来测试当按钮被点击时，计数器是否正确地增加或减少。
运行测试
现在，我们已经编写了测试用例，让我们运行它们并查看结果。在终端中输入以下命令来运行测试：
npm test
在测试运行完毕后，我们应该看到类似于以下内容的输出：
-- -------------------- ---- -------
---- -------------------
-------
- ------ ------ --- ------- --- ------- -----
- ------ --------- --- ------- ---- --- --------- ------ -- ------- -----
- ------ --------- --- ------- ---- --- --------- ------ -- ------- -----
---- ------- - ------- - -----
------ - ------- - -----
---------- - -----
----- ------
--- --- ---- -------我们可以看到测试用例全部通过了，这意味着我们的组件正常工作。此外，我们还可以在 coverage/lcov-report/index.html 文件中查看代码覆盖率报告。
结论
在本文中，我们介绍了如何使用 Enzyme 和 Jest 进行 React 测试。我们首先安装和配置了 Enzyme 和 Jest，然后编写了一个简单的测试用例来测试一个 React 组件。最后，我们运行了测试并查看了代码覆盖率报告。希望这篇文章能够帮助你更好地理解如何使用 Enzyme 和 Jest 进行 React 测试。
来源：JavaScript中文网 ，转载请注明来源 https://www.javascriptcn.com/post/6726cc172e7021665e1b49ad