DOM Testing Library 异步测试实战：waitFor 与 waitForElementToBeRemoved

await waitFor(() => {
  screen.getByText('加载完成');
}, {
  timeout: 3000,
  interval: 100,
  container: document.getElementById('app'),
});

waitFor 的工作原理

waitFor 的实现位于 src/wait-for.js 文件中。它通过以下方式实现异步等待：

1. 设置一个总体超时定时器，如果在指定时间内未完成，将抛出超时错误。
2. 使用 MutationObserver 观察 DOM 变化，当 DOM 发生变化时触发检查。
3. 定期执行回调函数，直到回调函数成功执行或超时。

这种结合了 DOM 观察和定期检查的方式，使得 waitFor 能够高效地等待 DOM 更新，而不会像传统的 setTimeout 那样导致不必要的等待。

waitForElementToBeRemoved：等待元素消失的专用工具

waitForElementToBeRemoved 是另一个实用的异步测试工具，专门用于等待指定的元素从 DOM 中移除。它接受一个返回元素或元素数组的回调函数，并等待这些元素被移除。

waitForElementToBeRemoved 的基本用法

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 的实现原理

waitForElementToBeRemoved 的实现位于 src/wait-for-element-to-be-removed.js 文件中。它内部使用了 waitFor 来实现等待逻辑，但添加了专门的初始检查和移除判断：

1. 初始检查：确保要等待移除的元素在开始时是存在的。
2. 定期检查：反复执行回调函数，检查元素是否已被移除。
3. 移除判断：如果元素为 null 或空数组，则认为元素已被移除。

这种设计确保了 waitForElementToBeRemoved 能够准确地等待元素从 DOM 中消失，而不会误判。

实战技巧：如何选择合适的异步测试工具？

• 使用 waitFor：当你需要等待某个条件成立，例如元素出现、文本内容变化等。
• 使用 waitForElementToBeRemoved：当你需要明确等待某个元素从 DOM 中移除时。

在实际测试中，这两个工具经常结合使用，以处理复杂的异步场景。例如，在测试表单提交时，你可能需要先等待加载指示器出现（使用 waitFor），然后等待加载指示器消失（使用 waitForElementToBeRemoved），最后检查结果是否正确显示（再次使用 waitFor）。

常见问题与解决方案

问题 1：测试偶尔失败，提示超时

解决方案：

• 增加超时时间：waitFor(() => {}, { timeout: 3000 })
• 检查是否有其他异步操作未被正确等待，例如 API 请求、定时器等。
• 确保测试环境的性能稳定，避免因资源不足导致的超时。

问题 2：waitForElementToBeRemoved 立即失败

解决方案：

• 确保在调用 waitForElementToBeRemoved 之前，元素确实存在于 DOM 中。
• 检查是否有其他因素导致元素提前被移除，例如组件卸载逻辑错误。

总结

waitFor 和 waitForElementToBeRemoved 是 DOM Testing Library 提供的两个强大的异步测试工具。它们能够帮助你编写更加可靠、稳定的前端测试，应对各种复杂的异步场景。通过合理使用这两个工具，你可以大大提高测试的准确性和效率，确保你的 Web 应用在各种情况下都能正常工作。可通过查看项目源码或官方文档获取更多信息。