重构MSW Mock Server后server.use()无法使用的问题排查

报错的核心原因是测试文件里的server变量根本没定义。你在server.js的createServer函数里创建了server实例，但这个实例是函数内部的局部变量，没有暴露给外部，测试代码里直接调用server.use()自然会找不到这个对象，抛出undefined错误。

修复步骤 #

1. 修改server.js，让createServer返回server实例

修改后的server.js代码：

import { setupServer } from "msw/node";
import { rest } from "msw";

export function createServer(handlerConfig) {
  const handlers = handlerConfig.map((config) => {
    return rest[config.method || "get"](config.path, (req, res, ctx) => {
      return res(ctx.json(config.res(req, res, ctx)));
    });
  });
  const server = setupServer(...handlers);

  beforeAll(() => {
    server.listen();
  });
  afterEach(() => {
    server.resetHandlers();
  });
  afterAll(() => {
    server.close();
  });

  // 返回server实例，供外部测试代码调用
  return server;
}

2. 在测试文件中接收server实例

修改App.test.js里的createServer调用，把返回的实例赋值给server变量：

// 替换原来的createServer调用
const server = createServer([
  {
    path: "http://localhost:3005/birds",
    method: "get",
    res: () => {
      return [
        { id: "1", name: "blue tit", number: "5" },
        { id: "2", name: "grey heron", number: "1" },
      ];
    },
  },
  {
    path: "http://localhost:3005/birds",
    method: "post",
    res: () => {
      return { id: "3", name: "robin", number: "2" };
    },
  },
]);

这样测试代码里的server就指向了正确的MSW服务器实例，调用server.use()就能正常添加临时请求处理器了。

额外说明 #

• 你原来配置的afterEach(() => server.resetHandlers())会在每个测试结束后重置处理器，所以临时添加的get请求处理器不会影响其他测试用例，无需额外清理。
• 确保所有测试用例都使用同一个server实例，避免重复创建服务器导致的冲突。

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