React 是一种流行的 JavaScript 库，用于构建用户界面。它可以帮助我们轻松地利用组件化构建高效的应用程序。然而，在大型和复杂的应用程序中，将 React 组件集成到应用程序中可能有一些不确定性。测试框架可以让我们拥有信心，确保在集成 React 组件时没有引入任何错误。Enzyme 是一个流行的 React 测试框架，可以帮助我们轻松地测试 React 组件。
在本文中，我们将介绍如何使用 Enzyme 进行 React 组件测试，从而让您的应用程序变得更加健壮。我们将提供详细的步骤和示例代码来指导您完成这个过程。
什么是 Enzyme
Enzyme 是一个 React 测试工具，由 Airbnb 提供。 它为 React 组件测试提供了易于使用的 API，以模拟组件的行为，包括模拟事件和状态更改。
Enzyme 也提供了多种测试 API，例如负责渲染和测试 React 组件的 shallow、mount、和 render。我们将在后面的部分中更多地谈论这些方法。
准备工作
在开始之前需要安装 Enzyme。您可以使用 npm 进行安装。
--- ------- ---------- ------
除此之外，我们还需要安装 enzyme-adapter-react-16，其中 16 表示 React 版本号（16.x.x）。
--- ------- ---------- -----------------------
在安装了 Enzyme 和适当的适配器之后，我们就可以开始了。
测试 React 组件
渲染组件
我们首先将展示用 Enzyme 渲染 React 组件的方式。Enzyme 提供的渲染方式有三种：
- Shallow rendering：仅渲染被测试组件（称为浅渲染）。
- Full DOM rendering：使用 jsdom 将组件渲染到虚拟 DOM 中，然后将其作为完整浏览器环境和重新渲染虚拟 DOM。
- Static rendering：将组件渲染为静态 HTML 字符串。
通常，我们会使用 shallow rendering 进行组件的单元测试。 浅渲染只会渲染当前组件以及它的直接子组件，而不会渲染子组件的子组件。
这有助于把测试关注点集中在被测试的组件，而不是其子组件上。例如，下面是一个非常简单的组件：
------ ----- ---- ------- ------ ------- -------- ------------- - ----- - ----- - - ----- ------ ------------------------ -
要使用 Enzyme 进行测试，我们可以按照以下代码示例进行设置：
------ ----- ---- -------
------ - ------- - ---- --------
------ ------ ---- -----------
---------------- --------- ------ -- -- -
--- ------- - ----
------------- -- -
------- - --------------- ------------ ---- ---
--
---------- --------- ------ ------ ----------- -- -- -
---------------------------------------------------- -----
--
--在这个代码示例中，我们首先导入 shallow 方法和要测试的 Button 组件。在 beforeEach 中，我们调用 shallow 方法传递一个组件作为参数，并将结果分配给变量 wrapper 中。
此 wrapper 变量现在包含模拟的 Button 组件。在我们的单元测试中，我们确保组件从渲染按钮(label=“Click me!”)正确。我们使用 wrapper.find 方法定位到 元素，然后使用 text() 方法获取其包含的文本内容。
测试组件的状态
在测试 React 组件时，我们需要测试它们的状态。 Enzyme 测试框架提供了两种方法来实现组件状态的测试：
- setState：使用此方法可以设置组件状态，但它不会在组件中触发重新渲染。
- simulate：这个方法用于触发组件上的事件。
下面是一个简单的示例：
------ ----- ---- -------
------ - ------- - ---- --------
------ ------- ---- ------------
----------------- --------- ------- -- -- -
--- ------- - ----
------------- -- -
------- - ---------------- ---
--
----------- --------- ------- ----- ----- ------ -- ------ -- -- -
-----------------------------------------
--
----------- --------- ----------- ------ --------- ----- ------- -- -- -
--------------------------------
-----------------------------------------
--
----------- --------- --------- ------ ----- ------ --------- ----- ------- -- -- -
--------------------------------------------------
-----------------------------------------
--
----------- --------- ----- ----- ------ --------- ----- -- --- ----- -- -- -
------------------------------------------------------
--------------------------------------------------
------------------------------------------------------
--
--在这个示例中，我们定义了一个 Counter 组件，该组件包含一个计数器和两个按钮，一个用于递增计数器，一个用于递减计数器。
我们首先通过调用 shallow 方法对组件进行浅渲染，并将其结果存储在变量 wrapper 中。在单元测试中，我们使用 setState 方法测试组件状态并修改它。我们还使用 simulate 方法来模拟事件，例如递增计数器按钮的点击事件，并使用及时显示模拟的 DOM 中的计数器。
模拟 React 组件功能
当测试 React 组件时，有时需要模拟组件功能。Enzyme 测试框架提供了两种模拟 React 组件功能的方法：模拟生命周期方法和模拟函数。
模拟生命周期方法
在测试 React 组件时，有时需要模拟生命周期方法的行为，例如 componentDidMount、componentWillUnmount 等方法。
Enzyme 测试框架提供了 mount 方法来模拟完整 DOM ，因此可以模拟 React 组件的完整生命周期。 mount 方法渲染整个组件树，而不仅仅是组件本身。这样就可以测试 React 组件的生命周期方法，并模拟状态改变等操作。
例如：
------ ----- ---- -------
------ - ----- - ---- --------
------ ----------- ---- ----------------
--------------------- ------ -- -- -
--------------------- -------- ------ -- ------ ----- --------- -------- -- -- -
----- --------------------- - ---------
--------------------------------------- - ---------------------
----- ------- - ------------------ ---
------------------------------------------------
-----------------
--
------------------------ -------- ------ -- ------ ---- --------- --------- -- -- -
----- ------------------------ - ---------
------------------------------------------ - ------------------------
----- ------- - ------------------ ---
-----------------
---------------------------------------------------
--
--在这个示例中，我们定义了一个名为 “MyComponent” 的 React 组件，它具有 componentDidMount 和 componentWillUnmount 方法。我们定义了两个测试单元，用于测试生命周期方法的行为，即组件加载、卸载等。在测试中，我们使用 mount 将整个组件树渲染到 DOM 中。我们使用 jest.spyOn 方法和 componentDidMountMock 来模拟 componentDidMount 方法。
模拟函数
Enzyme 测试框架提供 Mock 函数来模拟函数的行为。
下面是一个简单的示例：
------ ----- ---- -------
------ - ----- - ---- --------
------ ----------- ---- ----------------
--------------------- ------ -- -- -
--------------- -------- ------ -- ------ -- ------ ------- -- -- -
----- --------------- - ---------
----- ------- - ------------------ ------------------------- ---
----------------------------------------
------------------------------------------
-----------------
--
--在本示例中，我们利用 Enzyme 测试框架的 mount 方法自动测试组件。 在此基础上，使用 jest.fn 方法创建Mock方法，用来检测单击按钮后组件上方法是否被调用过。
测试结果
最后，我们运行我们的测试套件并检查输出，以确保测试通过。我们可以使用下面的命令运行测试：
--- --- ---- -- --- --- ----------
测试套件将执行所选的测试，输出测试结果。如果测试通过，则我们可以放心地将代码部署到生产环境中，而无需担心在集成时引入任何错误。
结论
在本文中，我们提供了如何使用 Enzyme 测试 React 组件的指南。我们了解了如何设置 Enzyme 和适当的适配器，并使用 Shallow Rendering、模拟函数、生命周期的技术让组件测试变得更加简单。
总而言之，使用像 Enzyme 这样的 React 测试框架可以帮助我们对 React 组件进行验证，从而让我们的应用变得更加健壮并避免引入任何错误。
来源：JavaScript中文网 ，转载请注明来源 本文地址：https://www.javascriptcn.com/post/67384ba8317fbffedf0f64b0