简介
Enzyme 是针对 React 的 JavaScript 测试工具，能够轻松地测试 React 组件的渲染结果和行为，支持浅渲染，方便测试组件的特定行为。然而，在处理动态加载的 React 组件时，我们可能会遇到一些挑战，因为这些组件不在最初的渲染阶段加载。本文将介绍如何使用 Enzyme 库，以及如何针对动态加载的 React 组件进行测试。
Enzyme 简介
Enzyme 是一个由 Airbnb 推出的 React 测试库，可以方便地在我们的 React 项目中进行测试。它提供了几个测试工具，包括 shallow、mount 和 render。它们的区别如下：
Shallow rendering
Shallow rendering 只进行一层渲染，不渲染子组件，这样可以加快测试速度。它能检测到的内容如下：
- 组件是否能够正常渲染。
- 组件渲染的内容是否如预期。
- 是否能够在组件上调用生命周期函数和事件处理程序。
- 是否能访问组件中维护的状态和属性。
Full DOM rendering
Full Document Object Model(Full DOM) 渲染使用 jsdom 导出的虚拟 DOM 来获取真实的 DOM 节点。它检查以下内容：
- 全部渲染，包含子组件
- 与轻量级渲染相比，速度较慢
- 它是更全面测试的选择
Static Rendered Markup
Static Rendered Markup仅是渲染组件， 不渲染子组件，它仅仅返回渲染结果的 HTML 字符串，所以你无法检查组件的交互行为。它能检查以下内容：
- 组件是否能够正常渲染。
- 渲染结果是否如预期。
- 是否能访问组件中维护的状态和属性。
现在，随着对 Enzyme 的简要介绍，让我们来看一下如何使用 Enzyme 进行测试。
动态加载的组件
动态加载的组件是一种先在应用程序启动时不加载组件的方式，而是在其需要显示时动态加载组件。此类组件需要组件懒加载或 React.lazy() 方法。
-- -------------------- ---- -------
-- ------------------
------ ----- ---- --------
----- --------------- - -- --
-----
-------- -- - ----------- ------ ---------------
------- --------- --- ----------- -----------
------
------ ------- ------------------ -------------------- ---- -------
-- ----------
------ ------ - --------- ---- - ---- --------
----- --------------- - ------- -- -----------------------------
----- ------- - -- -- -
--- ----------- ------------- - ----------------------
----- ----------- - -- -- -
-------------------
-
------ -
-----
------- -------------------------- ------------------
--------- ---------------------------------
---------- - ---------------- -- - -----
-----------
------
--
--
------ ------- --------使用 Enzyme 测试动态加载的组件
要测试动态加载的组件，我们需要在测试文件中引入 Enzyme，以及需要进行测试的组件。
-- -------------------- ---- -------
-- -----------------------
------ ----- ---- --------
------ - ----- - ---- ---------
------ --------------- ---- --------------------
------------------------- ---- ------ -- -- -
---------- ------ ----------------- -- -- -
----- ------- - ---------------------- ----
----------------------------------
---
---在上面的测试案例中，我们首先在测试文件中导入所需的组件和 Enzyme。然后，我们使用 mount 方法来渲染组件，并断言它是否能成功渲染。运行上述测试，我们可以看到测试通过。
深层测试
一个组件可能会依赖于其他组件来接收数据或触发事件。在这种情况下，我们需要深层测试组件的交互和行为。我们可以通过使用 find 和 simulate 方法来实现。例如，如果我们想测试在点击按钮后是否显示动态加载的组件，那么我们可以使用下面的测试用例进行测试：
-- -------------------- ---- -------
-- -----------------------
------ ----- ---- --------
------ - ----- - ---- ---------
------ --------------- ---- --------------------
------ ------- ---- ------------
------------------------- ---- ------ -- -- -
---------- ------ ----------------- -- -- -
----- ------- - ---------------------- ----
----------------------------------
---
---------- ---- --------------- ----- ------ ------- -- -- -
----- ------- - -------------- ----
-----------------------------------------
------------------------------------------------------
---
---在上述测试中，我们使用了一个新的组件 MainApp。 它是动态加载组件的容器，并且包含了一个按钮，该按钮在 click 事件发生时会设置 isVisible 状态为 true，从而显示动态加载的组件。我们使用 find 和 simulate 方法检查按钮行为，以确保动态加载的组件正常渲染。运行上述测试，我们也将看到该测试通过。
结论
Enzyme 是一个非常强大的测试库，可以轻松地测试 React 组件的渲染结果和行为。本文介绍了如何使用 Enzyme 测试动态加载的组件，并给出了使用 mount 方法进行深层测试的示例。要注意测试代码的编写需要根据开发的实际情况灵活应对。
来源：JavaScript中文网 ，转载请注明来源 https://www.javascriptcn.com/post/671e12bc2e7021665ef594b2