如何测试定时更新状态的React组件并消除act警告？

我懂你碰到的这个问题了——用Jest假定时器测试React组件异步状态更新时，这个act警告确实挺烦人的。咱们一步步来搞定它：

首先先看你的组件代码，这里有个小疏漏：useEffect没加依赖数组，这会导致组件每次渲染都重新创建定时器，不仅浪费资源，还可能加重测试里的警告问题。先把组件的useEffect改成只在挂载时执行一次，顺便加上定时器清理避免内存泄漏：

import React from 'react';
function App() {
  const [text, setText] = React.useState("text1");
  // 加空依赖数组，确保只在组件挂载时执行一次
  React.useEffect(() => {
    const timer = setTimeout(() => {
      setText("text2");
    }, 5000);
    // 组件卸载时清理定时器
    return () => clearTimeout(timer);
  }, []);
  return <div>{text}</div>;
}
export default App;

接下来处理测试代码的警告。根源是：当你调用jest.advanceTimersByTime(5000)后，组件会触发状态更新，但这个更新操作没有被React的act()包裹——React要求所有会引发组件渲染更新的操作，都要在act()里执行，这样测试环境才能和真实浏览器的渲染行为保持一致。

这里有两种靠谱的解决方式：

方式一：用act()包裹定时器推进操作 #

直接把推进定时器的代码放进act()里就行，记得先从@testing-library/react导入act：

import React from 'react';
import { render, act } from '@testing-library/react';
import App from './App';

jest.useFakeTimers();

test('has text1 on start, text2 in 5 seconds', () => {
  const { getByText } = render(<App />);
  // 验证初始文本
  expect(getByText('text1')).toBeInTheDocument();
  
  // 把推进定时器的操作包裹在act中
  act(() => {
    jest.advanceTimersByTime(5000);
  });
  
  // 验证更新后的文本
  expect(getByText('text2')).toBeInTheDocument();
});

// 测试结束后恢复真实定时器，避免影响其他测试
afterEach(() => {
  jest.useRealTimers();
});

方式二：用waitFor（更推荐，符合Testing Library最佳实践） #

Testing Library提供的waitFor会自动帮你处理act()的包裹，更贴合真实用户等待异步更新的场景，代码也更优雅：

import React from 'react';
import { render, waitFor } from '@testing-library/react';
import App from './App';

jest.useFakeTimers();

test('has text1 on start, text2 in 5 seconds', async () => {
  const { getByText } = render(<App />);
  expect(getByText('text1')).toBeInTheDocument();
  
  // 推进定时器到5秒后
  jest.advanceTimersByTime(5000);
  
  // 用waitFor等待状态更新完成，自动处理act包裹
  await waitFor(() => {
    expect(getByText('text2')).toBeInTheDocument();
  });
});

afterEach(() => {
  jest.useRealTimers();
});

这样修改之后，那个烦人的act警告应该就彻底消失了。核心思路就是确保所有会触发组件更新的异步操作，都被React的act机制（或Testing Library的封装工具）覆盖，让测试能正确追踪组件的渲染状态。

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