什么是 Enzyme？
Enzyme 是 Facebook 出品的 React 组件测试工具，可以帮助你测试组件的状态和行为。Enzyme 提供了一个方便易用的 API，可以遍历和模拟渲染组件，并断言组件的输出结果，以确保组件的行为符合预期。通过 Enzyme，我们可以轻松地测试那些复杂的交互逻辑和组件间的通信，而且不需要渲染整个应用程序。
Enzyme 的工作原理
Enzyme 提供了三个渲染器：
- Shallow Rendering：只渲染组件本身，不会递归渲染子组件。这种渲染方法速度极快，适用于测试一个组件。
- Mount Rendering：渲染整个组件树，包括子组件。这种渲染方法速度较慢，适用于测试应用程序的总体行为。
- Static Rendering：只渲染组件并返回 HTML 标记，适用于服务器端渲染或 UI 简单的组件。
Enzyme 的核心 API 包括：
mount()：用于完整地渲染组件树。shallow()：用于浅渲染，只渲染当前组件，不递归渲染子组件。render()：将组件渲染成静态 HTML 字符串。通常用于服务器端渲染。
Enzyme 还提供了断言功能，用于验证测试结果的正确性。
Enzyme 在测试组件时的应用
在测试组件时，我们需要了解组件的各个部分，以便在测试的过程中顺利地定位问题。
安装和导入 Enzyme
如果你还没有安装 Enzyme，可以通过在终端中运行下面的命令进行安装：
npm install --save-dev enzyme enzyme-adapter-react-16
然后，需要在测试脚本中导入 Enzyme：
import Enzyme, { mount, shallow, render } from "enzyme";
import Adapter from "enzyme-adapter-react-16";
Enzyme.configure({ adapter: new Adapter() });接着，就可以使用 Enzyme 提供的 API 来测试组件了。
测试组件状态
测试组件时，我们通常需要验证组件的状态是否符合预期。下面是一个例子：
-- -------------------- ---- -------
------ ----- ---- --------
------ - ------- - ---- ---------
------ ------- ---- ------------
----------------- ----------- -- -- -
---------- ------ --- ------- ------- -- -- -
----- ------- - ---------------- ----
----- ---- - -------------------------
---------------------------- ----
---
---------- --------- --- ----- ---- --- ------ -- --------- -- -- -
----- ------- - ---------------- ----
----- ------ - -----------------------
-------------------------
----- ---- - -------------------------
---------------------------- ----
---
---上面的代码中，我们通过 shallow() 渲染了 Counter 组件，并断言组件的输出结果是否和预期一致。第一个测试用例验证了组件是否渲染了初始的计数值，第二个测试用例则验证了组件是否能够正常地响应按钮点击事件。
测试组件的事件处理函数
测试组件的事件处理函数同样很重要。下面是一个例子：
-- -------------------- ---- -------
------ ----- ---- --------
------ - ----- - ---- ---------
------ ---- ---- ---------
-------------- ----------- -- -- -
---------- ---- -------- ---- --- ---- -- ----------- -- -- -
----- -------- - ----------
----- ------- - ----------- ------------------- ----
----- ---- - ---------------------
----- ----- - ----------------------
----- ----- - ----- -------
------------------------ - ------- - ----- - ---
------------------------
------------------------------------------
---------------------------------------------
---
---上面的代码中，我们在 mount() 中传入了一个 onSubmit 回调函数，并测试了表单的提交事件。测试用例中，我们首先模拟了输入框的值被修改为 test value，然后模拟表单的提交事件。最后，我们使用 Jest 提供的 toHaveBeenCalled() 和 toHaveBeenCalledWith() 方法，验证回调函数是否被正确调用。
如何快速定位问题
想要快速定位问题，必须先了解组件的结构和数据流。在测试组件时，如果断言失败，我们可以尝试下列方法：
- 在终端窗口中打印组件或元素的内容
console.log(wrapper.debug())，以便查看组件的结构。 - 使用 Jest 的
toMatchSnapshot()方法创建快照，以便比较组件的渲染结果。 - 在测试用例中使用
debug()方法，以便在调试器中查看组件状态和结构。
实例代码
下面是一个完整的组件：
-- -------------------- ---- -------
------ ----- ---- --------
----- ------- ------- --------------- -
----- - -
------ --
--
----------- - -- -- -
--------------------- -- -- ------ ----------- - - ----
--
-------- -
----- - ----- - - -----------
------ -
-----
--------- -----------
------- ---------------------------------------------
------
--
-
-
------ ------- --------下面是一个使用了 Enzyme 的测试脚本：
-- -------------------- ---- -------
------ ----- ---- --------
------ - ------- - ---- ---------
------ ------- ---- ------------
----------------- ----------- -- -- -
---------- ------ --- ------- ------- -- -- -
----- ------- - ---------------- ----
----- ---- - -------------------------
---------------------------- ----
---
---------- --------- --- ----- ---- --- ------ -- --------- -- -- -
----- ------- - ---------------- ----
----- ------ - -----------------------
-------------------------
----- ---- - -------------------------
---------------------------- ----
---
---总结
Enzyme 是 React 组件测试的核心工具之一，为 React 开发者提供了方便易用的 API，并且能够快速定位问题，验证组件的状态和行为。在测试组件时，我们需要了解组件的结构和数据流，以便更好地测试组件。希望这篇文章能够为你提供帮助！
来源：JavaScript中文网 ，转载请注明来源 https://www.javascriptcn.com/post/64d203a2b5eee0b5259618b3