Компонент тестирования в зависимости от методов setinterval [React Testing Library]

Question

Есть ли способ протестировать компонент, который обновляется в зависимости от функции 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 метод jest

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)
})

IЯ не уверен в правильности этого подхода, поскольку я не вызываю библиотеку React Testing render перед каждым вызовом expect, или, может быть, мне следует выполнить это тестирование совершенно по-другому?

Answer 1

Я думаю, вам следует рассмотреть возможность использования wait помощника из реагирующей библиотеки тестирования документов.Вы можете найти описание здесь .

Затем он должен использоваться с async await, и у него есть опции для необходимого интервала:

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