React Testing Library测试通过但报act(...)未包裹更新警告如何解决

这个警告的本质是测试执行流程结束后，组件还有未处理的状态更新操作，React无法将这部分更新纳入测试的生命周期管控，因此抛出警告。你的问题核心出在第二个测试用例的写法错误：
getBy* 系列查询是同步方法，额外添加await不会产生任何等待效果，测试会在异步请求返回、状态更新前就直接执行结束。之后getter函数里的setData、setLoading触发状态更新的时候，测试已经跑完，这部分更新没有被act逻辑包裹，就触发了警告。

• 第一个测试用例写法没有问题，findBy*本身是异步查询，内部已经自动封装了act逻辑，会等待状态更新完成再返回结果，不会触发警告。
• 第二个测试用例如果是要校验组件首次渲染的加载状态，直接去掉await即可，同时可以补充一行逻辑等待异步操作执行完成，避免测试结束后出现 pending 的状态更新：

test("sad, no data - testing the async call", async () => {
  fetch.mockResponseOnce(JSON.stringify({}))
  render(<App />)
  // getByText为同步查询，直接取首次渲染的加载状态即可
  const element = screen.getByText(/loading.../i)
  expect(element).toBeInTheDocument()
  // 等待所有微任务执行完成，确保后续异步状态更新在测试生命周期内完成
  await waitFor(() => {})
})

• React Testing Library 提供的findBy*、waitFor、fireEvent 等API内部都已经自动做了act包裹，常规场景不需要你手动编写act函数，绝大多数act警告都是测试逻辑没有等所有状态更新完成就提前结束导致的。
• 如果你使用的是v13以下的React Testing Library版本，可以升级到最新稳定版，对act的自动处理逻辑更完善，能避免很多不必要的警告。

内容的提问来源于stack exchange，提问作者fluffy-lionz