Using jest's fake timer breaks an already working test, why?

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!

Via Active questions tagged javascript - Stack Overflow https://ift.tt/Xk3CzAp