MSW在Vitest覆盖率测试中报错：无法解析./browser模块

问题详情 #

已完成浏览器端MSW（Mock Service Worker）配置，Mock功能在浏览器中运行正常。涉及配置文件：handlers.ts、browser.ts、main.tsx，开发依赖为@vitest/coverage-istanbul@1.2.2和vitest@1.3.0。执行命令vitest run --coverage时触发以下错误：

Error: No known conditions for "../browser" specifier in "msw" package
 ❯ e node_modules/vite/dist/node/chunks/dep-jDlpJiMN.js:47384:25
 ❯ n node_modules/vite/dist/node/chunks/dep-jDlpJiMN.js:47384:646
 ❯ o node_modules/vite/dist/node/chunks/dep-jDlpJiMN.js:47384:1297
 ❯ resolveExportsOrImports node_modules/vite/dist/node/chunks/dep-jDlpJiMN.js:48061:20
 ❯ resolveDeepImport node_modules/vite/dist/node/chunks/dep-jDlpJiMN.js:48080:31
 ❯ tryNodeResolve node_modules/vite/dist/node/chunks/dep-jDlpJiMN.js:47805:20
 ❯ Context.resolveId node_modules/vite/dist/node/chunks/dep-jDlpJiMN.js:47568:28
 ❯ Object.resolveId node_modules/vite/dist/node/chunks/dep-jDlpJiMN.js:50762:64
 ❯ process.processTicksAndRejections node:internal/process/task_queues:95:5
 ❯ TransformContext.resolve node_modules/vite/dist/node/chunks/dep-jDlpJiMN.js:50453:23
 ❯ normalizeUrl node_modules/vite/dist/node/chunks/dep-jDlpJiMN.js:65586:34
 ❯ async file:/Users/ankurmarwaha/IdeaProjects/order-entry-ui/node_modules/vite/dist/node/chunks/dep-jDlpJiMN.js:65749:47
 ❯ TransformContext.transform node_modules/vite/dist/node/chunks/dep-jDlpJiMN.js:65670:13
 ❯ Object.transform node_modules/vite/dist/node/chunks/dep-jDlpJiMN.js:50838:30
 ❯ loadAndTransform node_modules/vite/dist/node/chunks/dep-jDlpJiMN.js:53611:29
 ❯ ViteNodeServer._transformRequest node_modules/vite-node/dist/server.mjs:413:16
 ❯ IstanbulCoverageProvider.getCoverageMapForUncoveredFiles node_modules/@vitest/coverage-istanbul/dist/provider.js:281:7
 ❯ IstanbulCoverageProvider.reportCoverage node_modules/@vitest/coverage-istanbul/dist/provider.js:228:33
 ❯ Vitest.reportCoverage node_modules/vitest/dist/vendor/cli-api.RIYLcWhB.js:6537:7
 ❯ async file:/Users/ankurmarwaha/IdeaProjects/order-entry-ui/node_modules/vitest/dist/vendor/cli-api.RIYLcWhB.js:6328:7
 ❯ Vitest.runFiles node_modules/vitest/dist/vendor/cli-api.RIYLcWhB.js:6332:12
 ❯ Vitest.start node_modules/vitest/dist/vendor/cli-api.RIYLcWhB.js:6223:7
 ❯ startVitest node_modules/vitest/dist/vendor/cli-api.RIYLcWhB.js:13380:5
 ❯ start node_modules/vitest/dist/cli.js:1386:17
 ❯ CAC.run node_modules/vitest/dist/cli.js:1367:3

原因 #

Vitest运行在Node.js环境中，msw/browser是专为浏览器环境设计的导出模块，Node.js环境下MSW提供的是msw/node模块。Istanbul覆盖率工具处理browser.ts时，会在Node环境下解析msw/browser，导致模块找不到。

解决方案 #

1. 条件导入适配双环境 #

修改src/mocks/browser.ts，根据运行环境动态导入对应MSW模块：

import type { SetupWorker, SetupServer } from 'msw';

let workerOrServer: SetupWorker | SetupServer | undefined;

if (typeof window !== 'undefined') {
  // 浏览器环境使用 setupWorker
  import('msw/browser').then(({ setupWorker }) => {
    import('./handlers').then(({ default: handlers }) => {
      workerOrServer = setupWorker(...handlers);
    });
  });
} else {
  // Node/Vitest环境使用 setupServer
  import('msw/node').then(({ setupServer }) => {
    import('./handlers').then(({ default: handlers }) => {
      workerOrServer = setupServer(...handlers);
    });
  });
}

export default workerOrServer;

同时在测试文件中确保启动Node环境的服务：

import worker from '../src/mocks/browser';

beforeAll(async () => {
  await worker?.listen();
});

afterAll(async () => {
  await worker?.close();
});

2. 排除Mock文件的覆盖率统计 #

如果不需要对Mock文件计算覆盖率，直接在Vitest配置中排除该目录：
在vitest.config.ts中添加：

import { defineConfig } from 'vitest/config';

export default defineConfig({
  test: {
    coverage: {
      exclude: [
        'src/mocks/**/*',
        // 其他不需要统计的文件
      ],
    },
  },
});

3. 升级MSW版本 #

部分旧版本MSW的导出规范可能存在兼容性问题，升级到最新稳定版：

npm install msw@latest --save-dev

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