I am testing a countdown clock in my React app with React Testing Library that renders a message at countdown end, and it seems that my usage of jest.advanceTimersByTime is making the test take between 6 and 10 seconds...
I'm wondering if there is either a way in which I can speed this up, or if there is another alternative for doing the same thing?
import MockDate from 'mockdate';
import {addHours} from "date-fns";
import {act, render, screen} from "@testing-library/react";
describe('my tests', () => {
beforeAll(() => {
MockDate.set('2022-01-01');
jest.useFakeTimers();
});
beforeEach(() => {
const endDate = addHours(new Date(), 1);
render(<MyAlarm alarm={endDate} />);
});
afterEach(() => {
act(() => {
jest.runOnlyPendingTimers();
});
});
afterAll(() => {
jest.useRealTimers();
MockDate.reset();
});
it('Should decrement countdown by 1 second', () => {
// Initially 01 hour, 00 minutes
expect(screen.queryAllByText('01')).toHaveLength(1);
expect(screen.queryAllByText('00')).toHaveLength(1);
act(() => {
jest.advanceTimersByTime(1000);
});
// Should be 00 hours, 59 minutes
expect(screen.queryByText('01')).toBeFalsy();
expect(screen.queryAllByText('00')).toHaveLength(1);
expect(screen.queryAllByText('59')).toHaveLength(1);
});
// Note I have 'fit' to focus on this test solely
fit('Should display expired message', () => {
// Initially 01 hour, 00 minutes
expect(screen.queryAllByText('01')).toHaveLength(1);
expect(screen.queryAllByText('00')).toHaveLength(1);
expect(screen.queryByText(/EXPIRED/)).toBeFalsy();
act(() => {
jest.advanceTimersByTime(60 * 60 * 1000);
});
expect(screen.queryByText(/EXPIRED/)).toBeTruthy();
});
})
If I run this test suite it will run my expired message test only, and I can see that I get a test pass, however it does seem to suggest that the test takes a while...
PASS src/tests/MyTest.spec.js (6.59s)
Whereas if I run the suite specifying to run the other test only, it does not mention to time taken, suggesting it runs much quicker.