React 是当下最流行的前端框架之一，但是在 React 应用的开发过程中，一个很重要的问题就是如何进行测试。在 React 中，最受欢迎的测试工具之一就是 Enzyme。Enzyme 是 Airbnb 开源的一个 React 测试工具，它提供了一套友好的 API，使得测试 React 应用变得更加容易和高效。
本文将介绍 Enzyme 的基本使用和常见问题解决办法，包括如何选择正确的测试方法，如何处理异步行为以及如何模拟组件内部方法等等。
Enzyme 基础
开始使用 Enzyme
使用 Enzyme 进行测试时，需要安装以下两个依赖项：
npm install --save-dev enzyme npm install --save-dev enzyme-adapter-react-16
然后在测试代码中导入 Enzyme 和适配器，具体代码如下：
import { configure } from 'enzyme';
import Adapter from 'enzyme-adapter-react-16';
configure({ adapter: new Adapter() });这段代码告诉 Enzyme 使用适配器，以便它可以与 React 16 一起使用。现在，我们可以开始编写测试代码了。
Shallow Rendering 测试
Shallow Rendering 是 Enzyme 的最基本测试方法。它只渲染组件的一层，而不渲染其子组件。这个方法非常适合测试组件的行为和状态。
下面是一个示例代码，向您展示如何进行 Shallow Rendering 测试：
-- -------------------- ---- -------
------ ----- ---- --------
------ ------- - ------- - ---- ---------
------ ------- ---- --------------------------
------ ----------- ---- ----------------
------------------ -------- --- --------- ---
---------------------- ---- -- -- -
----------- --- ------------ -- -- -
----- ------- - -------------------- ----
------------------------------------------
---
---这个测试代码的目的是确保 MyComponent 渲染了两个段落。首先，我们使用 shallow() 方法创建一个组件实例。然后，我们使用 expect() 和 toHaveLength() 断言，以验证 MyComponent 实例中确实包含了两个段落。
Full Rendering 和 Static Rendering 测试
Full Rendering 和 Static Rendering 是 Enzyme 中可用的另外两种测试方法。Full Rendering 测试完整渲染一个组件，包括渲染其子组件，而 Static Rendering 只渲染一次，并且返回一个静态 HTML 字符串。
由于 Full Rendering 和 Static Rendering 都会完整渲染组件，因此它们的测试速度比 Shallow Rendering 慢。但是，它们可以测试组件的行为和状态，以及组件在实际用户界面中的呈现效果。
下面是一个示例代码，向您展示如何进行 Full Rendering 和 Static Rendering 测试：
-- -------------------- ---- -------
------ ----- ---- --------
------ ------- - ------ ------ - ---- ---------
------ ------- ---- --------------------------
------ ----------- ---- ----------------
------------------ -------- --- --------- ---
---------------------- ---- -- -- -
----------- ----------- -- -- -
----- ------- - ------------------ ----
------------------------------------------------------
-------------------------------------------------------------
------------------------------------------------------------
-------------------------------------------------------------
---
----------- - ------ ---- -------- -- -- -
----- ------- - ------------------- ----
------------------------------------------------------
-------------------------------------------------------------
------------------------------------------------------------
-------------------------------------------------------------
---
---这个测试代码的目的是确保 MyComponent 能够正确地渲染，并且返回正确的静态 HTML 字符串。我们使用 mount() 方法创建一个组件实例并进行完整渲染测试。然后，我们使用 expect() 和 toHaveLength() 断言，以验证 MyComponent 实例中包含正确的 HTML 类名和元素。最后，我们使用 render() 方法测试 MyComponent 是否返回正确的 HTML 字符串。
常见问题解决办法
处理异步行为
在 React 中，组件可能会有异步行为。比如，使用 setState() 更新组件的状态可能需要一些时间。如果使用 Enzyme 测试这样的组件，可能会遇到 setState() 尚未完成就调用 render() 的问题。我们可以使用 jest.advanceTimersByTime() 避免这个问题，以手动控制时间。
下面是一个示例代码，向您展示如何处理异步行为：
-- -------------------- ---- -------
------ ----- ---- --------
------ ------- - ----- - ---- ---------
------ ------- ---- --------------------------
------ ------- ---- ------------
------------------ -------- --- --------- ---
------------------ ---- -- -- -
---------- ---- ------- -- ------- -- -- -
----- ------- - -------------- ----
----- ------ - -----------------------
------------------------------
-------------------------------
----- ------- - -------------------------
--------------------------------
------------------------------
------------------------------
-------------------------------------------------
---
---这个测试代码的目的是确保 Sidebar 上的按钮在鼠标悬停时显示提示。首先，我们使用 mount() 方法创建 Sidebar 组件实例。然后，我们模拟鼠标悬停按钮（使用 simulate() 方法）。接着，我们使用 jest.advanceTimersByTime() 让测试等待 1000 毫秒，以便 setState() 更新状态。然后，我们判断是否存在正确的 HTML 类名。最后，我们使用 simulate() 方法模拟鼠标离开按钮并使用 jest.advanceTimersByTime() 等待 200 毫秒，以验证 Tooltip 是否被正确销毁。
模拟组件内部方法
在 Enzyme 中，可以通过 instance() 方法获得组件的实例。使用这个实例，我们可以模拟组件内部的方法，以便测试其行为。
下面是一个示例代码，向您展示如何模拟组件内部方法：
-- -------------------- ---- -------
------ ----- ---- --------
------ ------- - ----- - ---- ---------
------ ------- ---- --------------------------
------ ----------- ---- ----------------
------------------ -------- --- --------- ---
---------------------- ---- -- -- -
---------- ---- --------------- -- -- -
----- ------- - ------------------ ----
----- -------- - -------------------
----- -------------- - -------------------- ---------------
-----------------------
------------------------------------------
---
---这个测试代码的目的是确保 MyComponent 中的 handleClick() 方法被正确地调用。首先，我们使用 mount() 方法创建 MyComponent 实例并获取其实例。然后，我们使用 jest.spyOn() 方法模拟 handleClick() 方法。最后，我们调用 handleClick() 方法并使用 expect() 和 toHaveBeenCalled() 断言，以验证 handleClick() 是否被正确地调用。
结论
在 React 应用中，测试是一个重要的环节。Enzyme 是一个非常强大且易于使用的测试工具，它提供了多种测试方法和丰富的 API，使得测试 React 应用变得更加容易和高效。通过本篇文章的学习，您应该已经了解了基本的 Enzyme 使用和常见问题解决方法，希望这篇文章能够对您的 React 测试大有裨益。
来源：JavaScript中文网 ，转载请注明来源 https://www.javascriptcn.com/post/674e9144e884a3e30f282c1d