React Testing Library测试Promise回调内setState报act未包裹警告

核心原因 #

你遇到的警告是因为Promise.resolve的回调属于微任务，会在当前act()包裹的同步代码执行完毕后才触发状态更新。虽然你把loadData()的调用放在了act()里，但状态更新的时机已经跳出了act()的包裹范围，所以React测试框架会抛出警告。

至于reject的测试没有问题，大概率是巧合——比如你的reject逻辑中状态更新的时机刚好被测试框架的其他逻辑（如错误捕获）间接包裹进了act()，或者测试中的断言同步触发了状态更新的检测。

解决方法 #

你需要确保异步操作完成后再进行断言，把异步逻辑完整包裹进act()或者使用测试库的异步等待工具：

方法1：用async/await配合act()

如果你的loadData()方法返回了Promise（应该返回，因为是异步操作），直接在act()中await它：

test('模拟API调用成功', async () => {
  const { result } = renderHook(() => useCustomHook());
  
  await act(async () => {
    await result.current.loadData(); // 等待Promise完成，确保状态更新在act内
  });

  expect(result.current.data).toBe('预期数据');
});

方法2：用waitFor等待状态更新

如果loadData()没有返回Promise，或者你需要等待特定状态出现，可以用@testing-library/react提供的waitFor工具，它内部会自动用act()包裹状态更新：

import { waitFor } from '@testing-library/react';

test('模拟API调用成功', async () => {
  const { result } = renderHook(() => useCustomHook());
  
  act(() => {
    result.current.loadData();
  });

  // 等待状态更新完成后再断言
  await waitFor(() => {
    expect(result.current.data).toBe('预期数据');
  });
});

关键原理 #

React的act()要求所有组件状态更新都在其包裹范围内，确保测试时DOM和状态的一致性。异步操作的回调（比如Promise的then/catch）会在当前事件循环的同步任务结束后执行，必须显式等待这些异步操作完成，才能让状态更新被act()覆盖。

内容的提问来源于stack exchange，提问作者Sagie