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 la prueba se agotó porque el valor de tiempo de espera predeterminado es de 5000 ms. Considere aumentar el tiempo de espera si es largo. prueba de carrera.

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