Estoy tratando de hacer una prueba de mi comprensión de los ganchos de reacción usando Jest.
Específicamente, quiero probar una representación simple después de un tiempo de espera (que me burlo usando useFakeTimers())
import { render } from '@testing-library/react'; import { useEffect, useState } from 'react'; import { delay } from './delay'; describe('useState', () => { it("should set rerender when setting state", async () => { jest.useFakeTimers(); let renderCount = 0; function MyComponent() { const [foo, setFoo] = useState("bar"); ++renderCount; useEffect(() => { (async function asyncEffect() { await delay(1000); setFoo("mew") })() }, []) return (<div data-testid="test">{foo}</div>); } const { getByTestId } = render(<MyComponent />) expect(getByTestId("test").textContent).toEqual("bar"); expect(renderCount).toEqual(1); jest.runAllTimers(); expect(getByTestId("test").textContent).toEqual("mew"); expect(renderCount).toEqual(2); }) afterEach(() => { jest.useRealTimers(); }) })