Estoy representando un elemento que utiliza setTimeout para cambiar el texto interno de un estado de carga a un mensaje deseado:
function Message({ message }: any) { const [showMessage, setShowMessage] = useState(false); useEffect(() => { const CTATimer = setTimeout(() => { setShowMessage(true); }, 1500); return () => { clearTimeout(CTATimer); }; }, []); if (!showMessage) { return <p>Loading...</p>; } return ( <> <div>{message.text}</div> </> ); } La prueba correspondiente se procesa, luego avanza el tiempo en 1500 ms y luego debería mostrar el mensaje. Sin embargo, actualmente la prueba falla y la terminal muestra que el texto aún se está Loading... . La prueba se escribe así:
const mockMessage = { text: "this is a message", answers: [], id: 1, }; afterEach(() => { jest.useRealTimers(); }); it("should show message after setTimeout", () => { jest.useFakeTimers(); jest.advanceTimersByTime(1500); customRender(<Message message={mockMessage} />); // my customRender is just the default render but with a ThemeProvider wrapper. const message = screen.getByText(/this is a message/i); expect(message).toBeInTheDocument(); });¿Por qué mi prueba aún muestra el estado de carga cuando han pasado 1500 ms?
Debe avanzar los temporizadores después de renderizar el componente. Además, debe llamar a jest.advanceTimersByTime() dentro de la función act . De lo contrario, arrojará una advertencia: Warning: An update to Message inside a test was not wrapped in act(...).
index.tsx :
import React from 'react'; import { useEffect, useState } from 'react'; export function Message({ message }: any) { const [showMessage, setShowMessage] = useState(false); useEffect(() => { const CTATimer = setTimeout(() => { setShowMessage(true); }, 1500); return () => { clearTimeout(CTATimer); }; }, []); if (!showMessage) { return <p>Loading...</p>; } return ( <> <div>{message.text}</div> </> ); } index.test.tsx :
import React from 'react'; import { render, screen, act } from '@testing-library/react'; import '@testing-library/jest-dom/extend-expect'; import { Message } from './'; describe('Message', () => { const mockMessage = { text: 'this is a message', answers: [], id: 1, }; afterEach(() => { jest.useRealTimers(); }); it('should show message after setTimeout', () => { jest.useFakeTimers(); render(<Message message={mockMessage} />); act(() => { jest.advanceTimersByTime(1500); }); const message = screen.getByText(/this is a message/i); expect(message).toBeInTheDocument(); }); });Resultado de la prueba:
PASS stackoverflow/71174071/index.test.tsx (9.705 s) Message ✓ should show message after setTimeout (27 ms) -----------|---------|----------|---------|---------|------------------- File | % Stmts | % Branch | % Funcs | % Lines | Uncovered Line #s -----------|---------|----------|---------|---------|------------------- All files | 100 | 100 | 100 | 100 | index.tsx | 100 | 100 | 100 | 100 | -----------|---------|----------|---------|---------|------------------- Test Suites: 1 passed, 1 total Tests: 1 passed, 1 total Snapshots: 0 total Time: 10.903 s Ran all test suites related to changed files.