useFakeTimers returns timeout with react 18 and waitFor

[maximinetto]

Describe the bug

Describe the bug

useFakeTimer returns timeout error when used with waitFor in react 18.
I've been trying to use wairFor and fake timers in a unit test but i get this error message:

FAIL  src/__tests__/ExampleComponent.vitest.test.jsx > ExampleComponent > changes message after 1 second
Error: Test timed out in 5000ms.
If this is a long-running test, pass a timeout value as the last argument or configure it globally with "testTimeout".

I created a repo in github to show this problem and here it is.

Unit test:

import "@testing-library/jest-dom";
import { act, render, screen, waitFor } from "@testing-library/react";
import ExampleComponent from "../ExampleComponent";

describe("ExampleComponent", () => {
  beforeEach(() => {
    vi.useFakeTimers();
  });

  afterEach(() => {
    vi.restoreAllMocks();
    vi.clearAllTimers();
  });

  test("changes message after 1 second", async () => {
    render(<ExampleComponent />);
    act(() => vi.advanceTimersByTime(1000));
    expect(await screen.findByText("Hello, world!")).toBeInTheDocument();
  });

  test("changes message after 1 second --- 2", async () => {
    render(<ExampleComponent />);
    act(() => vi.advanceTimersByTime(1000));
    await waitFor(() =>
      expect(screen.getByText("Hello, world!")).toBeInTheDocument()
    );
    expect(await screen.getByText("Hello, world!")).toBeInTheDocument();
  });
});

React component:

import { useState, useEffect } from "react";

function ExampleComponent() {
  const [message, setMessage] = useState("");

  useEffect(() => {
    const timeoutId = setTimeout(() => {
      setMessage("Hello, world!");
    }, 1000);
    return () => clearTimeout(timeoutId);
  }, []);

  return <div>{message}</div>;
}

export default ExampleComponent;

The error is exactly the same with the findBy method. Note that if jest is executed the tests pass. It is also worth mentioning that with react 17 I have not had this problem.

Reproduction

https://github.com/maximinetto/vitest-issue

System Info

System:
   OS: Linux 6.1 Manjaro Linux
   CPU: (6) x64 Intel(R) Core(TM) i5-8400 CPU @ 2.80GHz
   Memory: 5.15 GB / 15.17 GB
   Container: Yes
   Shell: 5.1.16 - /bin/bash
Binaries:
   Node: 18.14.2 - ~/.nvm/versions/node/v18.14.2/bin/node
   npm: 9.5.0 - ~/.nvm/versions/node/v18.14.2/bin/npm
Browsers:
   Firefox: 111.0
npmPackages:
   @vitejs/plugin-react-swc: ^3.0.0 => 3.2.0 
   vite: ^4.2.0 => 4.2.1 
   vitest: ^0.29.8 => 0.29.8

Used Package Manager

npm

Validations

• Follow our Code of Conduct
• Read the Contributing Guidelines.
• Read the docs.
• Check that there isn't already an issue that reports the same bug to avoid creating a duplicate.
• Check that this is a concrete bug. For Q&A open a GitHub Discussion or join our Discord Chat Server.
• The provided reproduction is a minimal reproducible example of the bug.

[jgoz]

I worked around this by adding the following to a setupFile:

// Simulate Jest for waitFor()
// see https://github.com/testing-library/dom-testing-library/blob/0ce0c7054dfa64d1cd65053790246aed151bda9d/src/helpers.ts#L5
// and https://github.com/testing-library/dom-testing-library/blob/0ce0c7054dfa64d1cd65053790246aed151bda9d/src/wait-for.js#L53
global.jest = {
  advanceTimersByTime: (ms: number) => vi.advanceTimersByTime(ms),
} as any;

[sheremet-va]

Doesn't seem like this is a Vitest problem. vi.advanceTimersByTime does what you asked it to do. For better compatibility with jest you can add a global jest variables in your setupFiles:

import { vi } from 'vitest'
globalThis.jest = vi