MSW无法拦截API请求问题求助

问题背景 #

尝试用MSW mock /api/sector/list接口，但测试时handler中的console.log从未触发，请求未被拦截，测试用例失败。相关代码如下：

接口代码（/src/api/Sectors.js） #

export const getSectors = async (token)=>{
    const requestOptions = {
        method: "GET",
        headers: {
            "Content-Type": "application/json",
            Authorization: "Bearer " + token,
        },
    };
    try{
        const response = await fetch("/api/sector/list", requestOptions);
        if(!response.ok){
            return{error:`Request failed with status ${response.status}`}
        }else{
            const data = await response.json();
            return data;
        }
    } catch (error){
        return{ error : "Request failed"}
    }
};

Jest配置 #

jest.setup.js

import "@testing-library/jest-dom";
import {server} from 'src/mocks/server.js';

beforeAll(() => {
  server.listen()
  console.log('server listening')
});

afterEach(() => server.resetHandlers());

afterAll(() => server.close());

jest.config.js

const TEST_REGEX = "(/__tests__/.*|(\\.|/)(test|spec))\\.(jsx?|js?|tsx?|ts?)$";

module.exports = {
  testRegex: TEST_REGEX,
  transform: {
    "^.+\\.jsx?$": "babel-jest",
  },
  testPathIgnorePatterns: ["<rootDir>/build/", "<rootDir>/node_modules/", "<rootDir>/dist/"],
  moduleFileExtensions: ["ts", "tsx", "js", "jsx", "json"],
  moduleNameMapper: {
    "^~(.*)$": "<rootDir>/src/$1"
  },
  modulePaths: ["<rootDir>"],
  testEnvironment: "node",
  setupFilesAfterEnv: ["<rootDir>/jest.setup.js"],
}

MSW配置 #

/src/mocks/handlers.js

import { rest } from "msw";

export const handlers = [
    rest.get("/api/sector/list", (req, res, ctx) => {
    console.log('api sector list')
    const token = req.headers.get("Authorization");

    if (!token) {
      return res(
        ctx.status(401),
        ctx.json({ error: "Authorization token is missing" })
      );
    }

    return res(
      ctx.status(200),
      ctx.json([
        { id: 1, name: "Sector 1" },
        { id: 2, name: "Sector 2" },
      ])
    );
  }),
]

/src/mocks/server.js

import { setupServer } from 'msw/node';
import { handlers } from './handlers';

export const server = setupServer(...handlers);

测试用例（/tests/Sectors.test.js） #

import { getSectors } from 'src/api/Sectors';
  it("should fetch sectors successfully", async () => {
    const token = "fakeToken";
    const sectors = await getSectors(token);

    expect(sectors).toEqual([
      { id: 1, name: "Sector 1" },
      { id: 2, name: "Sector 2" },
    ]);
  });

解决方法 #

1. 为Node环境polyfill fetch #

Jest的node测试环境中没有原生fetch，若代码使用了未被MSW拦截的fetch实现，MSW无法捕获请求。

• 安装依赖：

npm install whatwg-fetch --save-dev

• 在jest.setup.js顶部导入：

import 'whatwg-fetch';
import "@testing-library/jest-dom";
import {server} from 'src/mocks/server.js';

// ... 其余代码

2. 确认请求URL与handler完全匹配 #

MSW的REST handler采用精确匹配规则，确保请求的URL（包括路径、查询参数）与handler定义的完全一致。此处代码路径一致，可排除此问题，但后续修改需注意。

3. 验证Jest setup文件是否正确加载 #

检查jest.config.js中的setupFilesAfterEnv路径是否正确，确保<rootDir>/jest.setup.js指向正确文件。运行测试时查看控制台是否打印server listening，确认server已启动。

4. 检查请求头的传递与匹配 #

代码中Authorization头是"Bearer " + token，handler中通过req.headers.get("Authorization")获取。可在handler中添加日志确认头是否正确接收：

rest.get("/api/sector/list", (req, res, ctx) => {
  console.log('Received Authorization header:', req.headers.get("authorization"));
  // ... 其余代码
});

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