Enzyme 是一个 React 组件测试库，它提供了一组工具来轻松地测试 React 组件和它们的 DOM 节点。这使得开发人员可以更加轻松地测试他们的组件，确保它们满足预期，而不需要手动操作 DOM 节点。在本文中，我们将探讨使用 Enzyme 测试 React 组件的 DOM 节点的过程。
安装 Enzyme
在使用 Enzyme 进行测试之前，需要先安装它。可以使用 npm 包管理器来安装 Enzyme。
--- ------- ---------- ------ ----------------------- -------------------
这将安装 Enzyme 及其适配器，以及 React Test Renderer。
配置 Enzyme
在使用 Enzyme 进行测试之前，需要为适配器创建配置。在项目中的任何地方，创建一个名为 setupTests.js 或者 jest.config.js 的文件，并添加以下配置。
------ ------ ---- --------- ------ ------- ---- -------------------------- ------------------ -------- --- --------- ---
这将为 enzyme-adapter-react-16 创建一个全局适配器，以便在测试组件时使用它。
测试组件的 DOM 节点
现在，我们已经完成了 Enzyme 的配置，我们可以开始测试 React 组件的 DOM 节点。我们将从最简单的测试开始。
测试组件是否成功渲染
测试组件是否成功渲染是测试 React 组件的最基本的方法之一。测试代码如下：
------ ----- ---- --------
------ ------- --------- ---- ---------
------ ------- ---- --------------------------
------ ----------- ---- ----------------
------------------ -------- --- --------- ---
----------------------- -- -- -
---------- ------ ----------- -- -- -
----- ------- - -------------------- ----
------------------------------------
---
---在这个例子中，我们创建了一个测试套件来测试 MyComponent 组件是否能够成功渲染。我们使用 Enzyme 的 shallow 方法来渲染组件，然后使用 Jest 的 toBe 匹配器来断言组件是否被渲染。
测试组件是否正确渲染特定元素
测试组件是否正确地渲染了特定的元素是测试 React 组件的另一种方式。测试代码如下：
------ ----- ---- --------
------ ------- --------- ---- ---------
------ ------- ---- --------------------------
------ ----------- ---- ----------------
------------------ -------- --- --------- ---
----------------------- -- -- -
---------- ------ - --- ---- --- ----- ---------------- -- -- -
----- ------- - -------------------- ----
-------------------------------------------------------------
---
---在这个例子中，我们正在测试 MyComponent 组件是否已经正确地渲染一个具有类名 "my-component" 的 div 元素。我们使用了 find 方法来查找这个元素，并且使用 Jest 的 toBe 匹配器来验证它是否存在。
测试组件的特定属性和样式
测试组件的特定属性和样式是编写复杂 React 组件的重要组成部分。测试代码如下：
------ ----- ---- --------
------ ------- --------- ---- ---------
------ ------- ---- --------------------------
------ ----------- ---- ----------------
------------------ -------- --- --------- ---
----------------------- -- -- -
---------- ---- - ----- -- ------- -- -- -
----- ------- - -------------------- ----
------------------------------------------------------------------------------ ---------
---
---在这个例子中，我们正在测试 MyComponent 组件是否具有一个特定的宽度，因此我们使用了 prop 方法来获取 div 元素的样式属性，并使用 Jest 的 toHaveProperty 匹配器来验证它是否为 100px。
结论
使用 Enzyme 测试 React 组件的 DOM 节点可以使开发人员更轻松地测试他们的组件。通过使用 Enzyme 提供的工具和方法，我们可以轻松地测试组件是否正确呈现，并确保它们具有所需的属性和样式。最重要的是，我们可以在编写代码时更加自信地使用组件，因为我们可以对它们进行彻底的测试！
来源：JavaScript中文网 ，转载请注明来源 本文地址：https://www.javascriptcn.com/post/6709d433d91dce0dc87c2e10