AbortController 在 React 测试中不工作（开玩笑）

Question

我们的 React 项目中有一个 function 来获取商店列表。 如果获取时间超过 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();
})