AbortController在React test (Jest)中不工作

Question

我们在React项目中有一个函数来获取商店列表。如果获取时间超过3秒(为测试目的设置较低)，我们将中止请求并显示错误。

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; })
);

我正在尝试从Jest触发Abort错误。我正在使用Mock Service Worker来拦截获取请求并模拟延迟响应:

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();
});

当我运行这个时，延迟工作，模拟响应需要5000秒才能触发并通过测试。但是…测试通过了，似乎从未调用过abortController。为什么会发生这种情况?有没有更好的方法来测试这个(理想情况下不使用MSW或其他库)?

Answer 1

您的测试正在同步运行;Jest运行所有代码，其中包括触发Promise但不等待它，然后完成。测试结束后，Promise返回，但是没有人在等待它。

Jest甚至从未到达.then块中的代码，因为它没有被等待。

可以在Jest测试中使用async代码。我怀疑这可能会给你更多的里程:

// mock a quick response for this test
it('returns stores', async () => {
const stores = await StoresAPI.fetchStores(MOCK_STORES)
expect(stores).toEqual([/* returned array */])
})
// mock a long response for this test
it('times out', async () => {
await expect(() => StoresAPI.fetchStores(MOCK_STORES)).rejects.toThrow();
})