升级至MSW 2.0.1后REST API GET请求未被拦截问题

常见原因与对应修复方案 #

1. 导入路径错误 #

MSW 2.x 对运行环境做了拆分，Node.js 环境下的 setupServer 必须从 msw/node 导入，而非 v1 版本的 msw 根路径。

修复代码：

// 替换原导入语句
import { setupServer } from 'msw/node';
import { http, HttpResponse } from 'msw';

2. 未正确配置服务器生命周期 #

Jest 测试中必须显式启动 MSW 服务器，并在测试前后完成清理操作，v2 版本对这部分的要求更严格，未配置会导致请求无法被拦截。

添加测试生命周期钩子：

const server = setupServer(
  http.get('http://localhost:1800/users_info', ({ request, params, cookies }) => {
    return HttpResponse.json({ userId: 123 });
  })
);

beforeAll(() => server.listen({ onUnhandledRequest: 'error' })); // 启动服务器，未处理请求抛出错误便于排查
afterAll(() => server.close()); // 测试结束后关闭服务器
afterEach(() => server.resetHandlers()); // 重置请求处理器，避免测试间状态污染

3. URL 匹配规则变化 #

MSW 2.x 的 URL 匹配逻辑更严格，若实际请求带查询参数、路径后缀，或使用相对路径发起请求，可能导致匹配失败。可改用正则表达式优化匹配范围：

示例：正则匹配目标接口

http.get(/http:\/\/localhost:1800\/users_info/, () => {
  return HttpResponse.json({ userId: 123 });
})

4. Jest 环境配置问题 #

若测试运行在 jsdom 环境（前端测试场景），需确保环境支持 fetch API，或切换到 Node.js 测试环境。修改 jest.config.js：

module.exports = {
  testEnvironment: 'node',
  // 若需保留jsdom环境，添加以下配置
  setupFiles: ['<rootDir>/jest.setup.js'],
}

在 jest.setup.js 中补充：

import 'whatwg-fetch';

5. 依赖版本冲突 #

检查项目中是否存在与 MSW 2.x 冲突的依赖（如旧版 node-fetch、whatwg-fetch，或其他请求拦截工具 nock），暂时禁用这类依赖测试是否恢复正常。

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