Component test with setTimeout and vitest fake timers not working

[wilcoschoneveld]

• @testing-library/react version: 14.0.0
• Testing Framework and version: vitest 0.29.8
• DOM Environment: happydom 8.9.0

Relevant code or config:

import { useEffect, useState } from "react";

export default function Timer() {
  const [state, setState] = useState("Start");

  useEffect(() => {
    setTimeout(() => {
      setState("Next");
    }, 1000);
  }, []);

  return <span>{state}</span>;
}

import { vi, expect, test, beforeEach, afterEach } from "vitest";
import { render, screen } from "@testing-library/react";
import Timer from "./Timer";

beforeEach(() => {
  vi.useFakeTimers();
});

afterEach(() => {
  vi.runOnlyPendingTimers();
  vi.useRealTimers();
});

test("timer test", () => {
  render(<Timer></Timer>);

  expect(screen.getByText("Start")).toBeDefined();

  vi.advanceTimersByTime(1000);

  expect(screen.getByText("Next")).toBeDefined();
});

test("sanity check", () => {
  let flag = false;
  setTimeout(() => (flag = true), 1000);

  expect(flag).toBe(false);

  vi.advanceTimersByTime(1000);

  expect(flag).toBe(true);
});

What you did:

Trying to advance fake timers with vitest and update the Timer component according to its useEffect hook.

What happened:

the Timer component is not updated

Reproduction:

https://github.com/wilcoschoneveld/timer-test/tree/b54f14a06b04c3d467ddecfa0d0d5c1f203d1f04

run tests with npx vitest

Problem description:

the Timer component should be updated, as shows when running npm run dev.

the sanity check test shows that the vitest fake timers work.

Could be related to #1197

Suggested solution:

it also does not work with testing-library/react version 13.4.0
not yet

[MatanBobi]

I think that this might be related to testing-library/dom-testing-library#987, did you see that one?

[wilcoschoneveld]

I think that this might be related to testing-library/dom-testing-library#987, did you see that one?

Hey @MatanBobi, thanks for your reply. I checked the issue and tested the recommended solution of shouldAdvanceTime: true, but it doesn't work unfortunately.

TypeError: Cannot read properties of undefined (reading 'prototype')
 ❯ src/Timer.spec.tsx:6:6
      4| 
      5| beforeEach(() => {
      6|   vi.useFakeTimers({ shouldAdvanceTime: true });
       |      ^
      7| });
      8| 

I'm not entirely sure what is going on here, I can't seem to debug exactly where this error is coming from.

[runofthemillgeek]

The following worked for me, although I find this to be pretty bizarre:

describe("Mocking timers", () => {
  beforeEach(() => {

    // This feels weird to do, given what it does: 
    // https://sinonjs.org/releases/latest/fake-timers/#:~:text=config.-,shouldAdvanceTime
    vi.useFakeTimers({ shouldAdvanceTime: true });
  });

  afterEach(() => {
    vi.runOnlyPendingTimers();
    vi.useRealTimers();
  });

  it("mocks timers", async () => {
    const user = userEvent.setup({
      // works even when I comment the following
      advanceTimers: (ms) => vi.advanceTimersByTime(ms),
    });

    render(<Countdown from={5} />);

    await user.click(screen.getByRole("button"));

    expect(screen.getByRole("alert")).toHaveTextContent("5");
    await act(() => vi.runAllTimers());
    expect(screen.getByRole("alert")).toHaveTextContent("0");
  });
});

I'll open an issue on vitest side and see if this is expected and if there's an explanation. Jest variant works without any such options.

---

vitest@0.29.2
@testing-library/user-event@^14.4.3

[runofthemillgeek]

Nevermind, I guess it might be #1197 itself.

[eps1lon]

#1197 is for 14.0 specificially. You mentioned in the issue description you're having the same issue in 13.4 which makes sense since we only have support for fake timers in Jest at the moment.

[mryechkin]

@eps1lon are there any plans to support Vitest in the future? Running into this issue as well in our tests, and it's pretty much the only thing that's blocking my team from moving to Vitest. Do you have any recommendations for how we're supposed to test components that use setTimeout?

@wilcoschoneveld were you able to find a workaround for your issue? I am facing exactly the same problem.

[wilcoschoneveld]

@mryechkin nope, no workaround yet

[eps1lon]

I always were in favor of supporting Vitest fake timers. I just never needed it myself so I don't spend time implementing it.

Anybody is free to start working on it. But keep in mind that we don't have testing infrastructure for Vite yet and that somebody needs to maintain Vitest support.

[nickserv]

Closing this as a duplicate of #1197 to make discussions easier to track, but we're still considering Vitest support there.

[joshysmart]

Is there a workaround to this?

[nickserv]

#1197 (comment)

[rickythefox]

The original example can be fixed by applying the following changes:

1. Change
   expect(screen.getByText("Next")).toBeDefined();
   to
   await waitFor(() => expect(screen.getByText("Next")).toBeDefined());.

2. Use vi.useFakeTimers({ shouldAdvanceTime: true });.

3. Make the test function async.

I ran into another issue with my tests where they were hanging when using MSW. This can be fixed by setting toFake like so:

vi.useFakeTimers({
        toFake: [
            'setTimeout',
            'clearTimeout',
            'setImmediate',
            'clearImmediate',
            'setInterval',
            'clearInterval',
            'Date',
            'nextTick',
            'hrtime',
            'requestAnimationFrame',
            'cancelAnimationFrame',
            'requestIdleCallback',
            'cancelIdleCallback',
            'performance',
            // The above excludes 'queueMicrotask'
            ],
        shouldAdvanceTime: true,
    });

Even though the docs say queue microtasks are not faked by default, it seems like they are.

[TomPlum]

If it helps anyone, the culprit timer component in question for me was an old class component. Converting it to a functional component fixed this. I still needed vi.useFakeTimers({ shouldAdvanceTime: true }), but it was only after converting that it started to actually advance time.