Vitest迁移后MSW runtime request handler无法正常工作求助

核心问题原因 #

Vitest与Jest的测试隔离机制存在差异，若未正确重置MSW服务器状态，会导致测试间的请求处理器残留，新添加的动态处理器无法优先匹配，最终返回默认处理器的响应。

具体解决方案 #

1. 配置全局测试钩子，确保测试间状态隔离 #

在Vitest的全局配置文件（如vitest.setup.js）中添加MSW的初始化与清理逻辑，每个测试后重置服务器处理器：

import { server } from './mocks/server';

// 测试前启动MSW服务器
beforeAll(() => server.listen({ onUnhandledRequest: 'warn' }));
// 每个测试结束后重置处理器到初始状态（即setupServer时的默认处理器）
afterEach(() => server.resetHandlers());
// 所有测试结束后关闭服务器
afterAll(() => server.close());

2. 确保动态处理器优先匹配 #

MSW的server.use()会将新处理器添加到处理器队列的头部，因此更具体的端点处理器会优先于默认的通配符处理器匹配。但需保证每个测试前已重置状态，避免之前测试的处理器干扰当前测试。

3. 验证处理器添加状态（可选排查步骤） #

若问题仍存在，可在测试中打印当前服务器的处理器列表，确认自定义处理器是否已正确添加：

it('should call the correct endpoint and return the API response', async () => {
  mockApiResponse({
    endpoint: `/companies/1/api-key`,
    method: RESTMethods.POST,
    response: MOCK_CREATE_COMPANY_API_KEY_API_RESPONSE,
    statusCode: 201,
  });

  // 打印当前处理器，确认自定义POST处理器存在
  console.log(server.listHandlers());

  const { result, waitFor } = renderHook(() => useCreateCompanyApiKey(1));
  result.current.mutate();
  await waitFor(() => result.current.isSuccess);
  expect(result.current.data).toEqual(MOCK_CREATE_COMPANY_API_KEY_API_RESPONSE);
});

4. 检查React Query的缓存（可选） #

若使用React Query，需确保测试中缓存被正确清除，避免之前测试的缓存数据影响当前测试结果：

import { QueryClient, QueryClientProvider } from '@tanstack/react-query';

// 在测试中创建新的QueryClient，隔离缓存
const queryClient = new QueryClient({
  defaultOptions: {
    queries: {
      cacheTime: 0,
    },
  },
});

// 渲染钩子时包裹Provider
const { result, waitFor } = renderHook(() => useCreateCompanyApiKey(1), {
  wrapper: ({ children }) => (
    <QueryClientProvider client={queryClient}>{children}</QueryClientProvider>
  ),
});

总结 #

核心是通过server.resetHandlers()确保每个测试的MSW状态干净，动态添加的处理器能优先匹配请求。同时配合React Query的缓存隔离，即可解决Vitest环境下的响应不匹配问题。

内容的提问来源于stack exchange，提问作者Yomansk8