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，而实际上我想检查是否呈现了正确的值。

我想我可以使用玩笑的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 文档中的wait帮助程序。您可以找到描述here。

它应该与异步await一起使用，并且确实具有所需的间隔选项：

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

根据setinterval方法测试组件[反应测试库]

1 个答案: