Tengo un componente que utiliza bastantes setTimeouts para hacer tres cosas: a) montar un niño en el DOM, b) animar a ese niño, c) desmontar a ese niño después de la interacción del usuario.

Estoy tratando de burlarme de este comportamiento en una prueba, y estoy probando específicamente el paso b: estoy haciendo una queryByText por texto para obtener el valor de texto del niño en el que animo.

Sin embargo, el texto nunca parece aparecer en el HTML que se imprime en la CLI cuando falla la prueba. El error es el siguiente:

 expect(received).toBeInTheDocument() received value must be an HTMLElement or an SVGElement. Received has value: null

Mi prueba se ve así:

 it("should show message after setTimeout", async () => { jest.useFakeTimers(); jest.advanceTimersByTime(5000); const amendedMockContext = { ...baseMockContext, introductionData: { data: { cta: "This is a cta!", }, }, }; customRender(<FAB />, { contextProps: amendedMockContext }); const message = screen.queryByText(/this/i); await waitFor(() => expect(message).toBeInTheDocument()); });

y mi componente entra y sale así. Tenga en cuenta que la bandera $visible activa la animación:

 const CTA_REVEAL_TIME = 5000; export default function FAB() { const [showCTA, setShowCTA] = useState(false); const [mountCTA, setMountCTA] = useState(false); // mount just before animating (step a) useEffect(() => { const mountCTATimer = setTimeout( () => setMountCTA(true), CTA_REVEAL_TIME - 1000 ); return () => { clearTimeout(mountCTATimer); }; }, []); // animate in message (step b) useEffect(() => { const CTATimer = setTimeout( () => setShowCTA((prevState) => !prevState), CTA_REVEAL_TIME ); return () => { clearTimeout(CTATimer); }; }, []); return ( <> {mountCta && <p $visible={showCTA}>{message}</p>} </> ); }

En mi prueba, he intentado usar varios métodos de async/await, waitFor , todos los diferentes métodos de consulta/obtención/búsqueda, pero parece que no puedo esperar a que se revele el mensaje, aunque estoy avanzando artificialmente tiempo por 5000ms. También uso advanceTimersBytime en otras pruebas y no tengo tales problemas.