El principal problema es que parece que no puedo llegar a las siguientes líneas del código debido a una función de espera en mi CustomHook. Por contexto, he creado una función llamada dormir que se ve así.
export const sleep = (ms: number): Promise<void> => new Promise<void>((res) => setTimeout(res, ms));
Ahora mi gancho personalizado se parece a esto.
const useCustomHook = () => { const [sampleState, setSampleState] = useState(null); const callApiFunction = async () => { const results = await callApi(); await sleep(500); if(results.success) { const secondResults = await callSecondApi(); await sleep(500); if(secondResults.success) { setSampleState(secondResults.data); //Should set state to an {} } } } return { sampleState, callApiFunction, } }
Para crear una prueba de unidad para esto, estoy usando @testing-library/react-hooks
.
He escrito una prueba donde
it('should do something', async () => { jest.useFakeTimers() const {result, waitForNextUpdate} = renderHook(()=> useCustomHook()) // Using act since we won't allow running functions that changes states without act act(() => { result.current.callApiFunction(); jest.advanceTimersByTime(500); }) await waitForNextUpdate() expect(result.current.sampleState).toEqual(expectedApiResults); })
Los de arriba están bastante simplificados, pero es básicamente la esencia. He visto otras implementaciones, pero la mayoría usa useEffect
que es un poco diferente de lo que quiero hacer.
También con la implementación anterior obtengo "Tiempo de espera excedido de 5000 ms para una prueba. Use jest.setTimeout (newTimeout) para aumentar el valor de tiempo de espera, si se trata de una prueba de larga duración". y el estado sigue siendo `null