Usar el temporizador falso de jest rompe una prueba que ya funciona, ¿por qué?

El siguiente es un gancho personalizado que deseo probar:

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,
 };
};

Simplemente permite que un componente establezca alertas y las borra automáticamente después de 300 ms.

Esta es una prueba de trabajo para el gancho anterior.

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();
 });
});

Mi duda es que quiero usar los temporizadores falsos de jest dentro de la prueba, pero si elimino el comentario de la línea jest.useFakeTimers(), la prueba se interrumpe y dice que se agotó el tiempo de espera, ya que el valor de tiempo de espera predeterminado es 5000 ms. Considere aumentar el tiempo de espera si se trata de una prueba de ejecución prolongada.

No entiendo por qué sucede esto, cualquier ayuda por favor!

Solución del problema

Para usar temporizadores falsos con @testing-library/user-eventla última versión, debe configurar la advanceTimersopción ( docs ) durante la configuración userEvent:

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

Aquí está su prueba actualizada:

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();
});