在我们构建 Web 应用程序时， JavaScript 是不可避免的。随着前端应用程序的复杂性增加，代码变得难以维护。为了尽量减少代码出错的可能，我们需要使用测试框架来测试我们的应用程序。本文将探讨如何使用 Enzyme 测试 React 组件来调试我们的代码。
Enzyme 简介
Enzyme 是 React 的一个 JavaScript 测试实用工具集，由 Airbnb 开发和维护。它允许您在渲染组件时以编程方式方式访问它们的属性和状态，并将它们用作断言。Enzyme 非常容易上手，并且速度非常快，因此它已成为 React 社区中最广泛使用的测试工具之一。
安装 Enzyme
首先，您需要在项目中安装 Enzyme。您可以使用 npm 安装它，命令如下：
npm install enzyme enzyme-adapter-react-[version] –-save-dev
其中， version 可以是 "16"、 "17" 或其他 React 版本。如果您使用的是 TypeScript，就需要安装 @types/enzyme 并且在配置文件中添加相应的 types。
编写一些测试
让我们编写几个简单的测试来测试我们的 React 组件。在这个例子中，我们测试一个简单的按钮组件：
-- -------------------- ---- -------
------ ----- ---- --------
-------- ------------- - -------- -- -- ---- -- -
------ -
------- ------------------------
----------------
---------
--
-
------ ------- -------为了测试这个组件，我们需要编写一些仅用 Enzyme 语法实现的简单测试。这是一个基本的测试用例:
-- -------------------- ---- -------
------ ----- ---- --------
------ - ------- - ---- ---------
------ ------ ---- -----------
------------------ -- -- -
----------- - -------- -- -- -
----- ------- - --------------- ----
----- ------ - -----------------------
-------------------------------------
---
---在此测试用例中，我们使用 shallow 函数来呈现我们的组件。然后，我们使用 find 函数来获取我们的组件中的 button 元素，并断言 button 已被渲染。
运行你的测试
现在我们已经编写了我们的测试。让我们更新我们的 package.json 文件，添加以下运行脚本：
"scripts": {
"test": "react-scripts test"
}现在，您可以运行以下命令来运行测试：
npm run test
这将启动测试运行程序，并显示测试结果。
调试你的测试
有时，当测试失败时，你需要调试你的测试并查找问题。Enzyme 提供了许多调试选项来帮助你查找问题。
查看呈现结果
可以使用以下代码查看组件在浏览器中的呈现情况：
console.log(wrapper.debug());
这将输出当前渲染组件的 HTML 结构并使其通过控制台显示。
模拟事件
您可以使用 simulate 函数来模拟与组件的交互。例如，下面的代码演示如何在按钮上进行单击操作：
const handleButtonClick = jest.fn();
const wrapper = shallow(<Button onClick={handleButtonClick}>Click Me</Button>);
const button = wrapper.find('button');
button.simulate('click');
expect(handleButtonClick).toHaveBeenCalled();我们使用 Jest 的 mock 函数来跟踪按钮点击的次数，并在单击 button 元素时使用 simulate 函数调用它。
结论
在本文中，我们介绍了 Enzyme，一个功能强大的 React 测试工具集。我们还讨论了如何使用 Enzyme 编写、运行和调试测试。如果你想学习更多关于 Enzyme 的内容，可以到其官方文档中学习。希望此篇文章能够帮助您更好地理解如何使用 Enzyme 来测试您的 React 应用程序。
来源：JavaScript中文网 ，转载请注明来源 https://www.javascriptcn.com/post/670ddafe5f551281025eaf71