Enzyme 作为 React 单元测试工具
Enzyme 是 Facebook 出品的 React 单元测试工具，它提供了一套 API，可以使 React 组件的测试变得简单和直观。在本文中，我们将深入讲解 Enzyme 在前端开发中的应用，及其使用方法和使用场景。
一、什么是 Enzyme
首先，让我们先来了解什么是 Enzyme。Enzyme 是用于测试 React 组件的 JavaScript 工具库，它为组件测试提供了 API，以使测试更快速、简单和直观。它由 Airbnb 设计与维护，是开源的。
Enzyme 主要有三种类型的渲染器：Shallow, mount 和 render。Shallow 渲染器可以在不渲染完整 DOM 的情况下，将 React 组件的输出作为 javascript 对象进行测试。Mount 渲染器与 Shallow 渲染器相似，但可以对 React 树进行完整的渲染，并提供与 DOM 交互和完整的生命周期方法的能力。Render 渲染器将 React 组件的输出渲染成静态 HTML，并进行测试。
Enzyme 的作用是快速测试 React 组件的各个方面，包括渲染、行为和状态。同时，它还提供了多个 API，使测试更加简洁直观。
二、使用 Enzyme
接下来，我们来看一下如何使用 Enzyme 进行 React 组件的测试。
- 安装 Enzyme
可以使用 npm 或 yarn 安装 Enzyme。
- --- ------- ---------- ------ ----------- -----------------------
注意：jest-enzyme（如果使用 Jest） 或 Chai-enzyme（如果使用 mocha） 是 Enzyme 的一个包装器，可以提供更多的断言。这些情况下，这些库应该作为一个独立的包来安装。
- 创建适配器
因为 Enzyme 提供的 API 是由测试框架提供的，因此还需要为 Enzyme 创建一个适配器。
------ ------ ---- --------- ------ ------- ---- -------------------------- ------------------ -------- --- ---------- ---
- 测试 React 组件
下面是一个简单的 React 组件，我们将使用 Enzyme 编写测试用例。
------ ------ - --------- - ---- --------
------ --------- ---- -------------
----- ------ ------- --------- -
----------- - -- -- -
----- - ------- - - -----------
-- --------- -
----------
-
--
-------- -
----- - -------- - - -----------
------ -
------- ---------------------------
----------
---------
--
-
-
---------------- - -
-------- ---------------
--------- ---------------
--
------ ------- -------接下来是 Enzyme 测试用例，用于测试上述组件的行为。
------ ----- ---- --------
------ ------ ---- ---------
------ ------- ---- --------------------------
------ ------ ---- -----------
------------------ -------- --- --------- ---
------------------ -- -- -
------------ ---- ------- ---- ---- --------- -- -- -
----- ------- - ----------
----- ------- - ---------------------- ----------------------- --------------
-----------------------------------------
-----------------------------------------
---
---在上面的例子中，我们首先导入了 Enzyme 和适配器，并配置了它。然后，我们描述了一个 Button 组件，并在测试用例中定义了一个事件处理程序 onClick。接下来，我们创建了一个 Enzyme 的浅渲染器，并模拟单击事件。最后，我们使用 jest 对 onClick 函数进行了调用的测试。
三、使用场景
接下来，我们来看一些 Enzyme 的使用场景。
- 测试渲染结果
当开发者修改 React 组件时，渲染结果可能会发生变化。可以使用 Enzyme 进行比较，以确保组件在经过修改后仍然具有相同的渲染结果。
------ ----- ---- -------- ------ ------- - ------- - ---- --------- ------ ------- ---- ------------------------- ------ ----------- ---- ---------------- ------------------ -------- --- --------- --- ------------- - --------- ---- --- -------- ------ -- -- - ----- ------- - -------------------- ----------- ------ ---- ----- --------- - ------------------ --------------------------------------- -------- ---
在上面的例子中，我们测试了一个叫做 MyComponent 的组件。我们期望这个组件会渲染出一个包含文本 “hello world” 的段落。我们将组件传入 shallow() 方法中，并使用 find() 方法查找我么所期望的元素。
- 测试事件句柄
React 组件中常常包含各种事件，例如 onChange、onClick 等等。用 Enzyme 可以测试这些事件句柄是否被正确的调用。
------ ----- ---- -------- ------ ------- - ------- - ---- --------- ------ ------- ---- -------------------------- ------ ------ ---- ----------- ------------------ -------- --- --------- --- ----------- --- ------- ----- ---- --------- -- -- - ----- ----------- - ---------- ----- ------- - --------------- --------------------- ---- -------------------------- --------------------------------------------- ---
在上面的例子中，我们测试了一个叫做 Button 的组件。我们包含了一个 onClick 的事件处理程序。我们使用 simulate() 方法模拟了点击事件，然后使用 expect() 方法确保该事件处理程序被调用了。
- 测试状态
React 组件中的状态通常在组件被其他组件或代码所调用之前得到初始化。可以使用 Enzyme 来测试这些状态是否被设置正确。
------ ----- ---- -------- ------ ------- - ------- - ---- --------- ------ ------- ---- -------------------------- ------ ------- ---- ------------ ------------------ -------- --- --------- --- ---------- - -- --- ------- ----- ---- --------- -- -- - ----- ------- - ---------------- ---- ----------------------------------------- ------------------------------------------- ---
在上面的例子中，我们测试了一个叫做 Counter 的组件。这个组件包含了一个点击后增加计数器状态的按钮。我们使用 simulate() 方法模拟了点击事件，并使用 expect() 方法确保状态被更新。在这个例子中，我们使用 state() 来获取 Counter 组件的状态。
四、总结
在本文中，我们介绍了 Enzyme 如何作为 React 单元测试工具。我们讨论了 Enzyme 的基本用法，并提供了使用 Enzyme 的示例代码。我们还提供了使用 Enzyme 的一些场景，如测试渲染结果、测试事件处理程序和测试状态。在 React 开发时，使用 Enzyme 可以改善测试代码的可读性和易用性。
来源：JavaScript中文网 ，转载请联系管理员！ 本文地址：https://www.javascriptcn.com/post/645b68db968c7c53b0dbf98a