根据setinterval方法测试组件[React Testing Library]

Question

有没有办法测试使用react测试库根据setinterval函数更新的组件？

例如

class Counter extends React {
    state = { counter: 0}

    incrementCounter = () => this.setState(({counter}) => counter: counter + 1);

    componentDidMount() {
       setInterval(incrementCounter, 1000);
    }

    render() {
       return <>{this.state.counter}</>
    }
}

这个组件应该每秒显示增加的数量，所以避免实现细节测试和检查组件state我实际上想检查我是否得到了正确的值。

我想我可以使用jest的advanceTimersByTime方法

it('renders increased counter every sec', () => {
   jest.useFakeTimers();

   const { container } = render(<Counter />)

   // render 0 before first iteration
   expect(container.textContent).toBe(0)

   //first iteration
   jest.advanceTimersByTime(1000)
   expect(container.textContent).toBe(1)

   //second iteration
   jest.advanceTimersByTime(1000)
   expect(container.textContent).toBe(1)
})

我不确定这种方法是否合适，因为我没有在每次render调用之前调用React Testing Library的expect，或者我应该以完全不同的方式实现此测试？

Answer 1

我认为你应该考虑使用react-testing-library docs中的wait helper。你可以找到描述here。

它应该与async await一起使用，它确实有你需要的间隔选项：

function wait(
    callback?: () => void,
    options?: {
        timeout?: number
        interval?: number
    },
): Promise<void>