在前端开发中，React 已经成为了非常流行的框架之一，因为 React 使用组件模式构建 Web 应用程序。但是，由于复杂性的增加和组件交互，对于测试 React 组件变得更加困难。在这种情况下，Enzyme 提供了一种简单的方法来测试 React 组件。
Enzyme 是什么？
Enzyme 是一个神奇的库，可以使得你在测试 React 组件时感到轻松自在。它是由 Airbnb 开源的，是 React 组件的渲染和测试工具，提供了可读性强且易于使用的 API。
使用 Enzyme，你可以快速地测试自己的 React 组件而无需操心其它繁琐的设置或链式调用等技术。
如何使用 Enzyme？
Enzyme 可以在任何环境中使用，因为它只是一个标准的 JavaScript 模块。它的安装非常简单，你可以在命令行中执行以下命令进行安装：
--- ------- ------ ----------------------- ----------
安装完成后，在你的测试代码中引入它：
------ ------ ---- --------- ------ ------- ---- -------------------------- ------------------ -------- --- --------- ---
Shallow Rendering（浅渲染）
Shallow Rendering 是一种轻量级的测试方法，功能类似于纯组件测试。它还通过减少渲染组件树的深度以及避免其后代组件的渲染来使测试更加快速。
在浅渲染中，你只需要渲染 React 组件的最外层容器（shallow）即可进行测试。我们通过一个 Todo 组件的例子来演示测试：
------ ----- ---- --------
------ - ------- - ---- ---------
------ ---- ---- ---------
-------------- ----------- -- -- -
---------- ------ --------- ---- -- ------- -- -- -
----- --------- - ------------- ----
------------------------------------
---
---------- ------ --------- ---- ------- -- -- -
----- ---- - -
--- --
----- ---- -----------
---------- ------
--
----- --------- - ------------- ----------- ----
------------------------------------
---
---我们可以看到，我们使用 shallow 函数来创建一个浅层组件，并传递给它 todo 数据作为 props。Enzyme 为我们提供了一种在将组件呈现给 DOM 之前查看其输出的方法，并将其与因某种原因更改模板/组件时收到的输出进行比较。
Mounting（挂载）
Mounting（挂载）是一种比 Shallow Rendering 更深入的渲染方法，会渲染出 React 组件的完整 DOM 树，并执行组件的层次生命周期方法，包括 componentWillMount()、componentDidMount() 等。在某些情况下，Mounting 可能比 Shallow Rendering 更适合进行测试，尤其是在需要测试组件的实际交互的时候。
我们来看一下如何用 Enzyme 对 React 组件进行 Mounting 测试。下面是我们以 TodoList 组件为例的代码：
------ ----- ---- --------
------ - ----- - ---- ---------
------ -------- ---- -------------
------------------ ----------- -- -- -
---------- ------ --------- ---- -- ------- -- -- -
----- --------- - --------------- ----
------------------------------------
---
---------- ------ ------ ---- --------- ---- ----- --------- -- -- -
----- --------- - --------------- ------------ ----------- ----- ------ ----
----- -- - ---------------------
---------------------------- ----- --- ---------- ---- ------
---
---我们可以看到，在这个测试用例中，我们使用 mount 函数来创建了一个真实的组件，并对其进行测试。并使用 find() 方法在组件树中查找特定元素，以便进行各种方法的测试，例如 text() 等。
Enzyme 总结
Enzyme 提供了使得测试 React 组件变得更简单和更方便的工具和方法。它支持 Shallow Rendering 和 Mounting 测试，允许您对 React 组件的不同方面进行测试，并能够快速编写可读性高、易于维护的测试代码。如果你想更好地测试你的 React 组件，那么 Enzyme 就是你需要的全能工具！
希望这篇文章能够为你提供 Enzyme 的更多知识和指导。如果你想更多地了解 Enzyme，你可以访问官方文档：https://enzymejs.github.io/enzyme/docs/api/。
示例代码
以下是使用 Enzyme 进行 React 组件单元测试的示例代码。
------ ----- ---- --------
------ - ------- - ---- ---------
------ ---- ---- ---------
-------------- ----------- -- -- -
---------- ------ --------- ---- -- ------- -- -- -
----- --------- - ------------- ----
------------------------------------
---
---------- ------ --------- ---- ------- -- -- -
----- ---- - -
--- --
----- ---- -----------
---------- ------
--
----- --------- - ------------- ----------- ----
------------------------------------
---
---
------ ----- ---- --------
------ - ----- - ---- ---------
------ -------- ---- -------------
------------------ ----------- -- -- -
---------- ------ --------- ---- -- ------- -- -- -
----- --------- - --------------- ----
------------------------------------
---
---------- ------ ------ ---- --------- ---- ----- --------- -- -- -
----- --------- - --------------- ------------ ----------- ----- ------ ----
----- -- - ---------------------
---------------------------- ----- --- ---------- ---- ------
---
---来源：JavaScript中文网 ，转载请联系管理员！ 本文地址：https://www.javascriptcn.com/post/645b0573968c7c53b0d60b86