Javascript React测试库:如何在setInterval更新的文档中查找文本?

Javascript React测试库:如何在setInterval更新的文档中查找文本?,javascript,reactjs,unit-testing,setinterval,react-testing-library,Javascript,Reactjs,Unit Testing,Setinterval,React Testing Library,我得到了一个计数器(React hooks组件),它每秒递增地呈现一个新的数字。 在钩子更新DOM时,如何在DOM中声明某个数字 这里有一个 import React,{useState,useffect}来自“React”; 导出默认函数计数器(){ const[count,setCount]=useState(1); useffect(()=>{ const intervalId=setInterval(函数(){ 设置计数(计数+1); }, 1000); return()=>clearI

我得到了一个计数器(React hooks组件),它每秒递增地呈现一个新的数字。 在钩子更新DOM时,如何在DOM中声明某个数字

这里有一个

import React,{useState,useffect}来自“React”;
导出默认函数计数器(){
const[count,setCount]=useState(1);
useffect(()=>{
const intervalId=setInterval(函数(){
设置计数(计数+1);
}, 1000);
return()=>clearInterval(intervalId);
});
返回{count};
}
失败测试

  test("should be able to find 3 directly", async () => {
    render(<Counter />);

    const three = await waitFor(() => screen.findByText(/3/i));
    expect(three).toBeInTheDocument();
  });
test(“应该能够直接找到3”,async()=>{
render();
constthree=wait waitFor(()=>screen.findByText(/3/i));
期望(三个)成为文档();
});
通过测试

  test("should render one and then two and then three", async () => {
    render(<Counter />);

    const one = await waitFor(() => screen.findByText(/1/i));
    expect(one).toBeInTheDocument();

    const two = await waitFor(() => screen.findByText(/2/i));
    expect(two).toBeInTheDocument();

    const three = await waitFor(() => screen.findByText(/3/i));
    expect(three).toBeInTheDocument();
  });
test(“应该先呈现一个,然后呈现两个,然后呈现三个”,async()=>{
render();
const one=wait waitFor(()=>screen.findByText(/1/i));
期望(一)成为文件;
consttwo=wait waitFor(()=>screen.findByText(/2/i));
期望(两个)成为文档();
constthree=wait waitFor(()=>screen.findByText(/3/i));
期望(三个)成为文档();
});
根据,默认超时为1000ms,因此我认为在显示3之前超时

如果您按如下方式修改测试会怎么样

test("should be able to find 3 directly", async () => {
  render(<Counter />);

  const three = await waitFor(() => screen.findByText(/3/i), {
    timeout: 3000
  });
  expect(three).toBeInTheDocument();
});
test(“应该能够直接找到3”,async()=>{
render();
const three=wait waitFor(()=>screen.findByText(/3/i){
超时:3000
});
期望(三个)成为文档();
});
根据,默认超时为1000ms,因此我认为在显示3之前超时

如果您按如下方式修改测试会怎么样

test("should be able to find 3 directly", async () => {
  render(<Counter />);

  const three = await waitFor(() => screen.findByText(/3/i), {
    timeout: 3000
  });
  expect(three).toBeInTheDocument();
});
test(“应该能够直接找到3”,async()=>{
render();
const three=wait waitFor(()=>screen.findByText(/3/i){
超时:3000
});
期望(三个)成为文档();
});