Fake timers doesn't work with latest version of user-event?

Question

Following is a custom hook that I wish to test:

import { useEffect, useState } from "react";

export const useAlert = () => {
  const [alert, setAlert] = useState(null);

  useEffect(() => {
    let timerId = setTimeout(() => {
      console.log("Timeout, removing alert from DOM");
      setAlert(null);
    }, 200);

    return () => clearTimeout(timerId);
  }, [alert]);

  return {
    renderAlert: alert ? alert : null,
    setAlert,
  };
};

It simply allows a component to set alerts and clears it automatically after 300ms.

This is a working test for the above hook

import { render, screen, waitFor } from "@testing-library/react";
import userEvent from "@testing-library/user-event";
import { useAlert } from "../components/useAlert";

// jest.useFakeTimers();

function FakeComponent() {
  const { renderAlert, setAlert } = useAlert();

  return (
    <div>
      <button onClick={() => setAlert("fake alert")}>Set Alert</button>
      <p>{renderAlert}</p>
    </div>
  );
}

test("testing", async () => {
  const user = userEvent.setup();
  render(<FakeComponent />);
  const button = screen.getByRole("button", { name: /set alert/i });

  await user.click(button);
  expect(screen.getByText(/fake alert/i)).toBeInTheDocument();

  await waitFor(() => {
    expect(screen.queryByText(/fake alert/i)).not.toBeInTheDocument();
  });
});

My doubt is that I want to use jest's fake timers inside the test but if I uncomment the line jest.useFakeTimers() , the test breaks saying that the test timed out as the default timeout value is 5000ms consider increasing the timeout if it's a long running test.

I don't understand why this happens, any help please!

Answer 1

To use fake timers with @testing-library/user-event 's latest version, you need to configure the the advanceTimers option ( docs ) while setting up userEvent :

const user = userEvent.setup({
  advanceTimers: () => jest.runOnlyPendingTimers(),
});

Here's your updated test:

import { render, screen, waitFor } from "@testing-library/react";
import userEvent from "@testing-library/user-event";
import { useAlert } from "../components/useAlert";

jest.useFakeTimers();

function FakeComponent() {
  const { renderAlert, setAlert } = useAlert();

  return (
    <div>
      <button onClick={() => setAlert("fake alert")}>Set Alert</button>
      <p>{renderAlert}</p>
    </div>
  );
}

test("testing", async () => {
  const user = userEvent.setup({
    advanceTimers: () => jest.runOnlyPendingTimers(),
  });
  render(<FakeComponent />);
  const button = screen.getByRole("button", { name: /set alert/i });

  await user.click(button);
  expect(screen.getByText(/fake alert/i)).toBeInTheDocument();

  act(() => jest.runAllTimers());
  expect(screen.queryByText(/fake alert/i)).toBeNull();
});

Answer 2

You can pass the delay property as null to your userEvent.setup call

test("testing", async () => {
  const user = userEvent.setup({ delay: null });

  render(<FakeComponent />);
  const button = screen.getByRole("button", { name: /set alert/i });

  await user.click(button);
});