React 是一种流行的前端框架，可以快速构建交互式用户界面。在开发 React 应用程序时，测试是至关重要的一部分。测试可以确保代码的正确性，并帮助开发人员在应用程序中引入新功能时避免出现错误。在本文中，我们将介绍如何使用 Enzyme 和 Jest 进行 React 测试。
Enzyme
Enzyme 是一个 React 测试工具，它提供了一组 API，用于测试 React 组件的渲染输出和交互行为。Enzyme 可以方便地模拟 React 组件的操作，例如点击按钮或输入文本。在使用 Enzyme 之前，需要安装它和 React Test Utilities。
安装 Enzyme 和 React Test Utilities：
npm install --save-dev enzyme react-test-renderer
Jest
Jest 是 Facebook 开发的一个 JavaScript 测试框架，它可以与 React 无缝集成。Jest 提供了一组强大的功能，例如代码覆盖率、快照测试和异步测试。在使用 Jest 之前，需要安装它和 Enzyme。
安装 Jest 和 Enzyme：
npm install --save-dev jest enzyme enzyme-adapter-react-16
编写测试
在编写测试之前，我们需要创建一个示例 React 组件。以下是一个简单的计数器组件：
-- -------------------- ---- -------
------ ------ - -------- - ---- --------
-------- --------- -
----- ------- --------- - ------------
-------- ----------- -
-------------- - ---
-
------ -
-----
--------- -----------
------- --------------------------------------
------
--
-
------ ------- --------在编写测试之前，我们需要创建一个 Enzyme 适配器。在项目根目录下创建一个 setupTests.js 文件，并添加以下内容：
import { configure } from 'enzyme';
import Adapter from 'enzyme-adapter-react-16';
configure({ adapter: new Adapter() });现在我们可以编写测试了。在 src 目录下创建一个名为 Counter.test.js 的文件，并添加以下内容：
-- -------------------- ---- -------
------ ----- ---- --------
------ - ------- - ---- ---------
------ ------- ---- ------------
----------------- ----------- -- -- -
---------- ------ - ----- -- --- -- -- -
----- ------- - ---------------- ----
----- ----- - -------------------------
----------------------------- ----
---
---------- --------- --- ----- ---- --- --------- ------ -- --------- -- -- -
----- ------- - ---------------- ----
----- ------ - -----------------------
-------------------------
----- ----- - -------------------------
----------------------------- ----
---
---在上面的示例中，我们使用了 Enzyme 的 shallow 方法来渲染组件，并检查渲染的输出。我们还模拟了点击按钮事件，以测试计数器是否按预期增加。
运行测试
现在我们已经编写了测试，我们可以使用 Jest 运行它们。在 package.json 文件中添加以下内容：
{
"scripts": {
"test": "jest"
}
}现在我们可以运行测试：
npm test
如果一切正常，您将看到测试通过的消息。
结论
在本文中，我们介绍了如何使用 Enzyme 和 Jest 进行 React 测试。我们学习了如何编写测试和运行它们。测试是确保代码正确性和可靠性的重要部分，因此在开发 React 应用程序时，测试应该是一个必不可少的步骤。希望这篇文章对您有所帮助！
来源：JavaScript中文网 ，转载请注明来源 https://www.javascriptcn.com/post/675e70aec52bb71917662fe6