Enzyme 使用入门：详细介绍 React 组件测试工具
React 是目前最流行的前端框架之一，其组件化开发的思想深受开发者们的青睐。但是，如何高效地对组件进行测试一直是前端开发中的一大难点。为了解决这个问题，社区开源了一系列的 React 测试工具，而 Enzyme 就是其中最受欢迎的一种。本文将详细介绍 Enzyme 的使用方法，帮助读者快速上手这一工具。
安装 Enzyme
Enzyme 是由 Airbnb 推出的 React 组件测试工具库，使用 npm 包管理器进行安装。
npm install enzyme
除了 Enzyme 本身外，还需要安装 enzyme-adapter-react，这是一个适配器，将 Enzyme 与 React 进行连接。
npm install enzyme-adapter-react-16
Enzyme 的工作方式
Enzyme 的工作方式类似于一个虚拟 DOM。它可以将组件渲染到虚拟 DOM 中，然后对这个虚拟 DOM 进行各种操作，如查找、遍历、修改等。这样做的好处是可以避免对真实 DOM 的干扰，从而提高测试效率。
Enzyme 为我们提供了三种渲染组件的方式：shallow、mount 和 render。
- shallow：浅渲染，只渲染当前组件，不渲染子组件。
- mount：完全渲染，渲染当前组件及其所有子组件。
- render：静态渲染，将组件渲染成静态 HTML，并返回一个 Cheerio 对象，使我们能够使用 jQuery 的方式进行查找和操作。
使用示例
下面我们就以一个简单的组件为例，来介绍 Enzyme 的使用方法。
-- -------------------- ---- -------
------ ----- ---- --------
----- ------- ------- --------------- -
------------------ -
-------------
---------- - -
------ -
--
-
----------- - -- -- -
---------------
------ ---------------- - -
---
--
-------- -
------ -
-----
--------- ----------------------
------- ---------------------------------------
------
--
-
-
------ ------- --------这是一个简单的计数器组件，包含一个计数器和一个“加”按钮。我们现在可以使用 Enzyme 对其进行测试。
首先，我们需要编写单元测试。这里我们使用 jest 作为测试框架，通过 Enzyme 的 API 进行操作。
-- -------------------- ---- -------
------ ----- ---- --------
------ - ------- - ---- ---------
------ ------- ---- ------------
----------------- ----------- -- -- -
---------- ------ --------- ---- -- ------- -- -- -
----- ------- - ---------------- ----
----------------------------------
---
---------- ------ ----- ------- -- -- -
----- ------- - ---------------- ----
----- ------ - -----------------------
-------------------------
------------------------------------------
---
---在第一个单元测试中，我们使用 shallow 函数将 Example 组件进行浅渲染，并将其快照与预期快照进行比较。这里我们使用了 Jest 提供的 snapshot 特性来进行快照测试。
在第二个单元测试中，我们模拟了一个点击事件，并断言组件的状态是否改变。
通过这两个单元测试的示例，我们可以看到，使用 Enzyme 进行组件测试非常简单，并且可以通过 API 轻松地遍历组件的各个部分，断言其正确性。
在实际的开发过程中，我们还可以使用 Enzyme 的其他 API，如 mount、render 等。Enzyme 提供了大量的测试 API，可以满足我们对组件测试的各种需求。
Enzyme 的使用入门就介绍到这里，希望对读者有所帮助。在日常开发中，我们应该尽可能地编写完善的单元测试，将测试作为开发的基石之一，从而提高代码的可维护性和可扩展性。
Source: FunTeaLearn,Please indicate the source for reprints https://funteas.com/post/67cf3708e46428fe9ea35e86