Tenemos una función en nuestro proyecto React para obtener una lista de tiendas. Si la obtención tarda más de 3 segundos (establecido en un nivel bajo para fines de prueba), abortamos la solicitud y mostramos un error.

 const controller = new AbortController(); const getTimeout = setTimeout(() => controller.abort(), 3000); const fetchStores = storeId => ( ourFetchStoresFunction(`http://my-api/${storeId}`, { headers: { 'x-block': 'local-stores' }, signal: controller.signal }) .then((results) => { clearTimeout(getTimeout); return results }) .catch((err) => { throw err; }) );

Estoy tratando de activar el error de cancelación de Jest. Estoy usando Mock Service Worker para interceptar solicitudes de búsqueda y simular una respuesta retrasada:

 import * as StoresAPI from '../Stores-api'; import { rest } from 'msw'; import { setupServer } from 'msw/node'; const server = setupServer(rest.get(`http://my-api/*`, (req, res, ctx) => { console.log('TEST'); return res( ctx.delay(5000), ctx.status(200), ctx.json({ stores: ['hi']}) ) })); beforeAll(() => server.listen()); afterAll(() => server.close()); afterEach(() => server.resetHandlers()); it('fetchStores should return a stores array', async () => { await StoresAPI.fetchStores(MOCK_STORES) .then((stores) => { expect(Array.isArray(stores)).toBe(true); }) .catch(); });

Cuando ejecuto esto, el retraso funciona, se necesitan 5000 segundos para que la respuesta simulada al fuego y la prueba pasen. Pero... La prueba pasa y parece que nunca se llama a abortController. ¿Por qué está pasando esto? ¿Y hay una mejor manera de probar esto (idealmente sin usar MSW u otra biblioteca)?