概述
在开发 React 应用程序时，我们经常涉及异步操作，比如数据加载、API 调用等。这些操作可能导致组件的状态和效果发生变化，难以手工测试。Enzyme 是一个流行的 JavaScript 测试工具，专门为 React 应用程序提供了易于使用的测试 API。在本文中，我们将介绍如何使用 Enzyme 测试 React 的异步操作。
准备工作
在开始测试 React 组件之前，您需要安装几个依赖项。
首先，我们需要安装 enzyme 和 enzyme-adapter-react-16。这两个依赖项可以使用 npm 或 yarn 所需，如下所示：
npm install --save-dev enzyme enzyme-adapter-react-16
或
yarn add --dev enzyme enzyme-adapter-react-16
接下来，我们将在 src/setupTests.js 文件中配置 Enzyme。
import { configure } from 'enzyme';
import Adapter from 'enzyme-adapter-react-16';
configure({ adapter: new Adapter() });使用 Enzyme 测试异步操作
一般来说，我们测试异步操作的方式如下：
- 设置要模拟的异步操作
- 渲染组件
- 执行异步操作
- 断言组件状态或效果是否符合预期
让我们来看看一个更具体的示例。
考虑如下的 FetchingComponent 组件，它根据 API 调用的结果渲染一段文本：
-- -------------------- ---- -------
------ ------ - --------- - ---- --------
------ ----- ---- --------
----- ----------------- ------- --------- -
------------------ -
-------------
---------- - - ----- ---- --
-
------------------- -
------------------------------------------------------ -- -
--------------- ----- ------------- ---
---
-
-------- -
----- - ---- - - -----------
------ -
-----
----- - -
------ ---- --- ----------
- - -
-----------------
--
------
--
-
-
------ ------- ------------------如您所见，此组件在 componentDidMount() 生命周期钩子中进行 API 调用，并在结果到达后将状态更新为相应的数据。我们想要测试这个组件，以确保在数据之前正确显示“Loading...”文本，然后正确显示数据。
在进行测试之前，我们需要模拟 axios 的 API 调用。我们可以使用 jest.mock API 来模拟 axios，如下所示：
import axios from 'axios';
jest.mock('axios', () => ({
get: jest.fn(() => Promise.resolve({ data: 'mock data' }))
}));在测试文件中，我们可以使用 Enzyme 的 mount 函数来渲染组件，并使用 Jest 的 async/await 语法来等待异步操作完成。然后，我们可以使用 update 函数强制 Enzyme 重新渲染组件，以便我们可以检查其状态和效果。最后，我们使用 Jest 的 expect 函数检查组件中的文本。
-- -------------------- ---- -------
------ ----- ---- --------
------ - ----- - ---- ---------
------ ----------------- ---- ----------------------
------ ----- ---- --------
------------------ -- -- --
---- ---------- -- ----------------- ----- ----- ----- ---
----
----------------------------- -- -- -
------------ ------------ ----- -------- ------ ----- -- -- -
----- ------- - ------------------------ ----
-------------------------------------------------------
----- ------------------ -- -- ------- ------------
-----------------
--------------------------------------------- ---- --- ---- -------
---
---这个测试中，我们首先断言 <FetchingComponent> 组件渲染后第一个 <p> 元素包含正确的文本“Loading...”（即 wrapper.find('p').text() 是否为 "Loading..."）。然后我们 await Axios API 调用的 Promise（在这种情况下不会真正执行，而是被 jest.fn() 捕获和模拟），强制 Enzyme 重新渲染组件，并检查 <p> 元素是否包含正确的文本“ The data is: mock data”（即 wrapper.find('p').text() 是否为 "The data is: mock data"）。
结论
Enzyme 是一种非常有用的测试工具，它可以帮助我们测试 React 组件及其异步操作的状态和效果。在这篇文章中，我们讨论了如何使用 Enzyme 测试异步操作，并提供了一个具体的示例，以演示如何在 React 应用程序中使用它。希望这篇文章对您有所帮助！
来源：JavaScript中文网 ，转载请注明来源 https://www.javascriptcn.com/post/677254086d66e0f9aad79057