¿Cómo pruebo mi useEffect Fetch con Jest en React? Intenté buscar respuestas y encontré un código que copié para probar, pero sigo fallando en la prueba. No he usado Jest antes y actualmente estoy tratando de implementarlo en un código en el que estoy trabajando.
Aquí está mi prueba dentro de mi archivo test.js:
it('Displays days from 1 to 31', async () => { expect(useEffectTest).toBe([{ day: 1 }]); });Y aquí está el useEffect en otro componente llamado calendar.jsx:
const useEffectTest = () => { const [daysData, setDaysData] = useState([]); useEffect(() => { fetch('http://localhost:5001/chocolates') .then((resp) => resp.json()) .then((data) => setDaysData(data)); }, []); console.log(daysData); };Quiero probar si la API obtenida está adquiriendo estos datos de una serie de objetos:
{ day: 1, status: 'empty' || 'open' }Gracias por cualquier ayuda de antemano.
En primer lugar, debe actualizar su prueba unitaria para llamar a su función, así:
it('Displays days from 1 to 31', async () => { expect(useEffectTest()).toBe([{ day: 1 }]); }); Esto se debe a expect necesita que se le pasen los datos devueltos por la función useEffectTest .
Sin embargo, esto seguirá fallando porque su función no devuelve nada. Entonces necesitamos actualizar useEffectTest para devolver daysData , así:
const useEffectTest = () => { const [daysData, setDaysData] = useState([]); useEffect(() => { fetch('http://localhost:5001/chocolates') .then((resp) => resp.json()) .then((data) => setDaysData(data)); }, []); return daysData; };A continuación, normalmente no queremos realizar solicitudes de red a partir de pruebas unitarias. Esto se debe a que las solicitudes de red pueden hacer que las pruebas unitarias sean lentas y frágiles. Por ejemplo, si su servidor API deja de funcionar, todavía queremos que pasen las pruebas unitarias. Para solucionar estos problemas, necesitamos simular la solicitud de recuperación. Una forma popular de simular solicitudes de búsqueda es con la biblioteca jest-fetch-mock .