React 组件的异步行为通常是通过异步请求数据、使用 setTimeout 或 setInterval 等方式实现的。测试这些异步行为可能会带来许多挑战，但 Enzyme 提供了一些工具来解决这些问题。
在本文中，我们将探讨如何使用 Enzyme 测试 React 组件的异步行为，并提供一些示例代码来帮助你更好地理解。
Enzyme 介绍
Enzyme 是一个流行的 React 测试库，它提供了一组工具来测试 React 组件的行为。它支持深渲染、浅渲染和静态渲染，可用于测试组件的状态和 props，以及交互和异步行为。 Enzyme 支持许多测试框架，如 Jest、Mocha 和 Ava 等。
测试异步行为
在测试过程中，你需要确保你的组件在正确的时间点收到数据或触发事件。下面是一些示例，说明如何测试应用程序中的异步行为。我们将使用 Jest 和 Enzyme 进行演示。
Testing setTimeout
假设你有一个计时器组件，它在一段时间后会触发事件。你可以使用 setInterval 或 setTimeout 来实现这个计时器。我们将使用 setTimeout 来模拟这个行为。
// www.javascriptcn.com code example
// Timer.js
import React, { useEffect, useState } from "react";
export default function Timer() {
const [time, setTime] = useState(0);
useEffect(() => {
setTimeout(() => {
setTime(1);
}, 1000);
}, []);
return <p>{time}</p>;
}上面的代码中，我们使用了 useEffect 钩子，以及 setTimeout 方法在 1 秒后触发更新状态。现在，让我们编写一个测试，确保计时器组件至少在 1 秒后更新状态。
// www.javascriptcn.com code example
// Timer.test.js
import React from "react";
import Timer from "./Timer";
import { shallow } from "enzyme";
describe("Timer component", () => {
it("should update state after 1 second", () => {
jest.useFakeTimers();
const wrapper = shallow(<Timer />);
expect(wrapper.find("p").text()).toEqual("0");
jest.advanceTimersByTime(1000);
expect(wrapper.find("p").text()).toEqual("1");
});
});在测试用例中，我们首先设置了一个虚假的定时器。接下来，我们使用 shallow 方法创建一个包含 Timer 组件的 React 元素，并断言 时间 为 0。
然后，我们将时间快进到 1 秒钟，通过 advaceTimersByTime 方法强制完成定时器。最后，我们再次断言状态已更新 为 1 秒钟。
Testing Promise
假设我们有一个异步地从 API 获取数据并在组件中显示的搜索组件。我们将使用 Jest 和 Enzyme 测试 Search 组件的异步行为。我们将使用 fetch 来模拟异步数据获取，如下所示：
// www.javascriptcn.com code example
// Search.js
import React, { useState } from "react";
export default function Search() {
const [data, setData] = useState([]);
const [loading, setLoading] = useState(false);
const handleClick = () => {
setLoading(true);
const url = "https://jsonplaceholder.typicode.com/todos";
fetch(url)
.then((response) => response.json())
.then((data) => {
setData(data);
setLoading(false);
});
};
return (
<div>
<button onClick={handleClick}>Fetch Data</button>
{loading && <p>Loading...</p>}
<ul>
{data.length &&
data.map((item) => {
return <li key={item.id}>{item.title}</li>;
})}
</ul>
</div>
);
}在上面的代码中，我们从 jsonplaceholder 获取 Todo 数据，并在组件中显示它们。现在，让我们编写一个测试用例，确保 Search 组件能够正确地获取数据并更新它们的状态。
// www.javascriptcn.com code example
// Search.test.js
import React from "react";
import { mount } from "enzyme";
import Search from "./Search";
describe("Search component", () => {
beforeEach(() => {
fetch.resetMocks();
});
it("should fetch and update state on button click", async () => {
const data = [
{
userId: 1,
id: 1,
title: "delectus aut autem",
completed: false
},
{
userId: 1,
id: 2,
title: "quis ut nam facilis et officia qui",
completed: false
}
];
fetch.mockResponseOnce(JSON.stringify(data));
const wrapper = mount(<Search />);
wrapper.find("button").simulate("click");
expect(fetch.mock.calls.length).toEqual(1);
await new Promise((resolve) => setImmediate(resolve));
wrapper.update();
expect(wrapper.find("li").length).toEqual(2);
});
});在上述测试用例中，我们首先重置了 fetch，以确保每个测试过程中有相同的 Mock。然后，我们定义了将从 API 返回的数据。
接下来，我们使用 mockResponseOnce 方法创建了一个虚假的响应，并更新状态以保存返回的数据。
然后，我们使用 mount 导入 Search 组件，并通过 simulate 方法模拟用户点击按钮。
最后，在异步操作完成后，我们使用一个等待的 Promise 和 wrapper.update() 更新测试状态，以验证是否正确渲染了 li 元素的数量。
结束语
在本文中，我们了解了如何使用 Enzyme 测试 React 组件的异步行为。我们使用了 setTimeout 和 Promise 作为示例，演示了如何针对不同的场景编写测试用例。
然而，这些只是测试异步行为的基础。你可能会遇到其他情况，例如使用 setInterval、WebSocket 或其他异步库等。在这种情况下，只需了解它们的工作原理并进行测试即可。
总而言之，编写可靠的单元测试是保持应用程序高质量、可维护性和稳定性的重要步骤。希望本文可以帮助你更好地了解如何测试异步行为，并提供了一些独特的示例。
Source: FunTeaLearn,Please indicate the source for reprints https://funteas.com/post/67814da6935627c900b8c0ee