React测试中如何等待useEffect更新完成

本文深入解析了 React 单元测试中因 `useEffect` 异步更新导致断言失败的常见痛点，直击“状态已修改但 DOM 未更新”的测试失效根源，并给出两种官方推荐、稳定可靠的解决方案：一是使用 `act()` 显式包裹渲染逻辑，确保所有副作用和重渲染同步完成；二是采用更现代、更贴近用户行为的 `@testing-library/react` 配合 `waitFor`，自动轮询直至 UI 达到预期状态。文章不仅提供可直接复用的代码示例，还逐一拆解常见误区（如滥用 `setTimeout`、忽略 `async/await`、硬断言 `innerHTML`），并给出新旧项目落地建议——帮你写出真正可靠、可维护、符合 React 测试理念的高质量测试。

本文详解如何在单元测试中确保 `useEffect` 触发的状态更新和组件重渲染完成后再执行断言，避免因异步时机问题导致测试失败。核心方案是使用 `act()` 包裹渲染逻辑，或采用更现代的 `@testing-library/react` 配合 `waitFor`。

在 React 测试中，useEffect 中的副作用（如 setState）会触发异步状态更新，进而引起组件重渲染。但原生 ReactDOM.render 不会自动等待该过程完成，导致测试中的 expect 在 DOM 更新前就执行，从而断言失败——这正是你遇到的问题：debugger 只触发一次，el.innerHTML 仍为 "0"。

✅ 正确解法一：使用 act()（官方推荐，轻量可靠）

act() 是 React 提供的测试工具函数，用于包裹所有可能触发渲染或状态更新的操作，确保所有更新同步完成后再继续执行后续代码：

import { render } from "react-dom";
import { act } from "react-dom/test-utils";
import App from "./App";

it("should render 1", async () => {
  const el = document.createElement("div");

  // 使用 act 等待初始渲染 + useEffect 引发的更新全部完成
  await act(async () => {
    render(, el);
  });

  expect(el.innerHTML).toBe("1"); // ✅ 现在能稳定通过
});

⚠️ 注意：必须 await act(async () => {...})，因为 useEffect 中的 setCtr(1) 属于异步更新，act 内部会等待其 flush 完成。

✅ 正确解法二：使用 @testing-library/react（更符合用户行为逻辑）

推荐在新项目中优先采用 React Testing Library（RTL），它抽象了底层渲染细节，聚焦“用户看到什么”，并内置对异步更新的智能等待支持：

// __tests__/App.test.tsx
import { render, screen, waitFor } from "@testing-library/react";
import App from "../App";

test("displays updated counter after useEffect", async () => {
  render();

  // waitFor 会自动轮询，直到断言通过或超时（默认 1000ms）
  await waitFor(() => {
    expect(screen.getByText("1")).toBeInTheDocument();
  });
});

配合 RTL 的 render，你无需手动创建 div 或操作 innerHTML，语义更清晰，且 waitFor 能自动处理 useEffect → setState → re-render 的完整异步链。

❌ 常见误区与避坑指南

• 不要用 setTimeout / for 循环“模拟等待”：JavaScript 单线程下，同步循环不会让出控制权给 React 的更新队列，无法保证 useEffect 执行。
• 不要忽略 act 的 async/await：若 useEffect 内含 Promise（如 fetch），必须 await act(async () => {...})；否则 act 可能提前退出。
• 避免直接断言 innerHTML：它耦合实现细节（如是否加了
  包裹），应优先使用语义化查询（如 screen.getByText）。
• 确保测试环境启用并发特性：若使用 React 18+，请确认测试运行在 createRoot 模式下（RTL 默认支持，react-dom/test-utils 需注意版本兼容性）。

总结

要让测试准确捕获 useEffect 后的最终 UI 状态，关键在于显式同步化异步更新流。act() 是最直接、最小侵入的解决方案；而 @testing-library/react 则提供了更高阶、更可维护的测试范式。两者都比手动轮询或阻塞循环更可靠、更符合 React 官方测试理念。建议新项目统一采用 RTL，遗留项目可先用 act 快速修复，再逐步迁移。

今天带大家了解了的相关知识，希望对你有所帮助；关于文章的技术知识我们会一点点深入介绍，欢迎大家关注golang学习网公众号，一起学习编程~