如何测试在一段时间后改变状态的ReactJs组件

我有一个简单的组件：

import React from 'react';

function App() {
  const [text, setText] = React.useState("text1");

  React.useEffect(() => {
    setTimeout(() => {
      setText("text2");
    }, 5000);
  });

  return (
    <div>{text}</div>
  );
}

export default App;

从“React”导入React；
函数App（）{
const[text，setText]=React.useState（“text1”）；
React.useffect（（）=>{
设置超时（（）=>{
setText（“text2”）；
}, 5000);
});
返回(
{text}
);
}
导出默认应用程序；

它立即呈现“text1”。5秒后，它呈现“text2”。我需要测试一下这种行为

以下是我的测试代码：

import React from 'react';
import { render } 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();

  jest.advanceTimersByTime(5000);

  expect(getByText('text2')).toBeInTheDocument();
});

从“React”导入React；
从'@testing library/react'导入{render}；
从“./App”导入应用程序；
开玩笑。使用faketimers（）；
测试（'启动时有text1，5秒内有text2'，（）=>{
常量{getByText}=render(

如何避免这个警告？我试着用act（）来包装所有东西，但没有用

下面是一个示例（要运行测试，请在控制台中键入“npmt”）：
act（（）=>jest.advanceTimersByTime（5000））

我试过这个，它对我有效，我没有看到任何警告

从“反应测试库”导入{act}

参考资料：
您是否尝试过从“/App.”导入{App}

或如何导出“

App

”？请查看：我使用“import App from.”/App'；（因为App.js有默认导出）我可以在您的链接中运行测试吗？测试为我通过了吗？是的，当然。在控制台（右下窗口）中键入“npm t”.你会看到警告谢谢！事实上我在我的实际应用程序中尝试了这个，但没有成功。这就是为什么我没有在操场上检查它。但是当你告诉我这个在操场上有效时，我发现了错误的原因。在我的实际应用程序中，我有很多测试。出于某种原因，为了避免这个警告，我不得不添加“act（）=>jest.advanceTimersByTime（5000）），我必须在每次测试后添加“act（（）=>jest.runAllTimers（）），然后一切都正常。