React 是一种流行的前端框架，它为开发人员提供了许多灵活性和可定制性。但是，测试是一个必不可少的步骤，以确保您的 React 应用程序按预期工作。 enzyme 是一个旨在帮助您轻松编写 React 测试的工具。在本文中，我们将介绍如何使用 enzyme 来测试 React 应用程序。
为什么要使用 enzyme？
enzyme 提供了一套测试工具，用于测试 React 组件的属性和行为，例如渲染、交互和状态更改。还有一些其他的工具，如 Jest 和 React Testing Library ，也可以用于测试 React 组件。那么为什么要选择 enzyme？
enzyme 提供了简单易用的 API，与 React 组件的层次结构紧密集成。它允许您轻松地模拟 React 组件，并对其进行操作和验证。除此之外，它还支持多个渲染器，包括浏览器、Node 和 React Native。这使得测试 React 应用程序变得容易且灵活。
安装 enzyme
在您开始编写测试前，需要安装 enzyme 模块及其两个依赖项：enzyme-adapter-react 和 react-test-renderer。您可以使用以下命令安装它们：
--- ------- ---------- ------ ----------------------- -------------------
完成安装后，您需要初始化一个适配器，以便 enzyme 可以与 React 一起工作。在您的测试文件中，添加以下导入：
------ - --------- - ---- --------- ------ ------- ---- -------------------------- ----------- -------- --- --------- ---
这个设置指定使用 enzyme-adapter-react-16 适配器在 React v16.x 中运行测试。根据您的应用版本和需要使用的适配器，您可以更换配置选项。
编写测试
现在让我们来编写一些测试。假设我们有一个名为 MyComponent 的 React 组件，它接受一个 name 属性，并在页面上渲染“Hello, [name]!”。我们将测试组件是否按预期呈现。注意，您需要将组件渲染到嵌入式的浏览器渲染器中，才能进行测试。
------ ----- ---- --------
------ - ----- - ---- ---------
------ ----------- ---- ----------------
----------------------- -- -- -
----------- --- --------- ---- --- ------- -- -- -
----- ------- - ------------------ ------------ ----
----------------------------------- ---------
---
---在这个测试中，我们使用了 enzyme 的 mount() 方法来渲染 MyComponent 组件。接下来，我们使用 text() 方法从渲染的组件中提取文本值，并使用 expect() 和 toBe() 匹配器来验证是否按预期呈现。
模拟事件
除了测试组件的呈现，还可以测试组件的交互。enzyme 提供了多种方法来模拟各种事件。
------ ----- ---- --------
------ - ------- - ---- ---------
------ ----------- ---- ----------------
----------------------- -- -- -
--------- --- ------- --------- -- -- -
----- ----------- - ----------
----- ------- - -------------------- --------------------- ----
-----------------------------------------
---------------------------------------
---
---在这个测试中，我们模拟了一个点击事件，并验证 handleClick() 处理程序是否被调用。
快照测试
enzyme 还提供了快照测试的支持，这种测试将组件的呈现与之前的快照进行比较，以确保没有任何意外的更改。
------ ----- ---- --------
------ - ------- - ---- ---------
------ ----------- ---- ----------------
----------------------- -- -- -
----------- --- ---------- -- -- -
----- ------- - -------------------- ------------ ----
----------------------------------
---
---在这个测试中，我们将组件的呈现与之前的快照进行比较，并使用 expect() 和 toMatchSnapshot() 匹配器来验证是否匹配。
结论
本文简要介绍了如何使用 enzyme 来测试 React 应用程序。您可以使用简单易用的 API，模拟组件和各种事件，并执行快照测试。在测试应用程序时，enzyme 是一个非常有用的工具，可以帮助您确保应用程序按预期工作。
完整代码示例可以在 GitHub 上找到：https://github.com/jest-community/
祝您测试愉快！
来源：JavaScript中文网 ，转载请注明来源 本文地址：https://www.javascriptcn.com/post/67148095ad1e889fe2141ff3