本文介绍 DOM Testing Library 中两个核心异步测试工具 waitFor 和 waitForElementToBeRemoved。waitFor 用于等待条件成立，支持超时、轮询间隔等配置；waitForElementToBeRemoved 专门用于等待元素从 DOM 移除。文章通过代码示例展示了基本用法、高级配置及工作原理，并提供了实战选择建议和常见问题解决方案，帮助开发者编写可靠的前端异步测试。
DOM Testing Library 是一个简单而完整的 DOM 测试工具库，它鼓励良好的测试实践。在现代 Web 应用开发中，异步操作无处不在，如数据加载、状态更新和动画效果等。本文将详细介绍 DOM Testing Library 中两个核心的异步测试工具——waitFor 和 waitForElementToBeRemoved，帮助你轻松应对各种异步场景，编写可靠的前端测试。
在前端测试中，我们经常需要等待某些异步操作完成后再进行断言。例如，当用户点击按钮后，数据需要从服务器加载，DOM 会随之更新。如果测试代码在 DOM 更新前就执行断言，测试很可能会失败。waitFor 和 waitForElementToBeRemoved 就是为了解决这类问题而设计的，它们能够智能地等待 DOM 变化，确保测试的准确性和稳定性。
waitFor 是 DOM Testing Library 中最常用的异步测试工具之一。它会反复执行提供的回调函数，直到该函数不再抛出错误或返回一个已解决的 Promise。如果在指定的超时时间内回调函数成功执行，waitFor 将返回一个已解决的 Promise；否则，它将抛出一个超时错误。
import { render, screen, waitFor } from '@testing-library/react';
test('异步加载数据后显示用户信息', async () => {
render(<UserProfile userId="123" />);
// 等待用户信息加载完成并显示在页面上
const userInfo = await waitFor(() => screen.getByText(/John Doe/i));
expect(userInfo).toBeInTheDocument();
});
在上面的例子中，waitFor 会反复调用回调函数，直到 screen.getByText(/John Doe/i) 成功找到元素，或者超时（默认超时时间为 1000ms）。
waitFor 提供了多种配置选项，以满足不同的测试需求：
timeout：设置超时时间（毫秒），默认为 1000ms。interval：设置轮询间隔（毫秒），默认为 50ms。container：指定要观察的 DOM 容器，默认为 document。mutationObserverOptions：配置 MutationObserver 的选项，用于观察 DOM 变化。await waitFor(() => {
screen.getByText('加载完成');
}, {
timeout: 3000,
interval: 100,
container: document.getElementById('app'),
});
waitFor 的实现位于 src/wait-for.js 文件中。它通过以下方式实现异步等待：
这种结合了 DOM 观察和定期检查的方式，使得 waitFor 能够高效地等待 DOM 更新，而不会像传统的 setTimeout 那样导致不必要的等待。
waitForElementToBeRemoved 是另一个实用的异步测试工具，专门用于等待指定的元素从 DOM 中移除。它接受一个返回元素或元素数组的回调函数，并等待这些元素被移除。
import { render, screen, waitForElementToBeRemoved } from '@testing-library/react';
test('关闭对话框后元素消失', async () => {
render(<Dialog />);
// 点击关闭按钮
screen.getByRole('button', { name: /关闭/i }).click();
// 等待对话框消失
await waitForElementToBeRemoved(() => screen.getByRole('dialog'));
// 确认对话框已不在 DOM 中
expect(screen.queryByRole('dialog')).not.toBeInTheDocument();
});
waitForElementToBeRemoved 的实现位于 src/wait-for-element-to-be-removed.js 文件中。它内部使用了 waitFor 来实现等待逻辑，但添加了专门的初始检查和移除判断：
null 或空数组，则认为元素已被移除。这种设计确保了 waitForElementToBeRemoved 能够准确地等待元素从 DOM 中消失，而不会误判。
waitFor：当你需要等待某个条件成立，例如元素出现、文本内容变化等。waitForElementToBeRemoved：当你需要明确等待某个元素从 DOM 中移除时。在实际测试中，这两个工具经常结合使用，以处理复杂的异步场景。例如，在测试表单提交时，你可能需要先等待加载指示器出现（使用 waitFor），然后等待加载指示器消失（使用 waitForElementToBeRemoved），最后检查结果是否正确显示（再次使用 waitFor）。
解决方案：
waitFor(() => {}, { timeout: 3000 })waitForElementToBeRemoved 立即失败解决方案：
waitForElementToBeRemoved 之前，元素确实存在于 DOM 中。waitFor 和 waitForElementToBeRemoved 是 DOM Testing Library 提供的两个强大的异步测试工具。它们能够帮助你编写更加可靠、稳定的前端测试，应对各种复杂的异步场景。通过合理使用这两个工具，你可以大大提高测试的准确性和效率，确保你的 Web 应用在各种情况下都能正常工作。可通过查看项目源码或官方文档获取更多信息。
微信公众号「极客日志」，在微信中扫描左侧二维码关注。展示文案：极客日志 zeeklog
查找任何按下的键的javascript键代码、代码、位置和修饰符。 在线工具，Keycode 信息在线工具，online
JavaScript 字符串转义/反转义；Java 风格 \uXXXX（Native2Ascii）编码与解码。 在线工具，Escape 与 Native 编解码在线工具，online
使用 Prettier 在浏览器内格式化 JavaScript 或 HTML 片段。 在线工具，JavaScript / HTML 格式化在线工具，online
Terser 压缩、变量名混淆，或 javascript-obfuscator 高强度混淆（体积会增大）。 在线工具，JavaScript 压缩与混淆在线工具，online
将字符串编码和解码为其 Base64 格式表示形式即可。 在线工具，Base64 字符串编码/解码在线工具，online
将字符串、文件或图像转换为其 Base64 表示形式。 在线工具，Base64 文件转换器在线工具，online