Vite React项目中MSW结合环境变量的单元测试失败问题

问题根源 #

测试环境中import.meta.env.VITE_API_URL_USER的取值和开发环境不一致，或者测试时未正确注入该变量，导致MSW处理器监听的URL与组件实际请求的URL不匹配，mock未被命中，测试自然失败。

解决方案 #

1. 为测试环境配置专属环境变量 #

在项目根目录创建.env.test文件，设置测试用的API基础地址：

VITE_API_URL_USER=http://localhost:3000

• Vitest会自动加载.env.test文件；如果用Jest，可借助dotenv包，在jest.config.js中配置加载该文件。

2. 统一URL来源，避免硬编码 #

直接复用USER_URL变量配置MSW处理器，确保监听的URL和组件请求的URL完全一致：

import { USER_URL } from './path-to-your-url-file';

rest.get(USER_URL, (req, res, ctx) => {
  return res(
    ctx.json([
      {
        firstName: 'Admin',
        lastName: 'Admin',
        fullName: 'Admin Admin',
      }
    ])
  );
})

3. 手动注入环境变量（自动加载失效时） #

如果测试框架未自动加载环境变量，可手动注入：

• Vitest：在vitest.config.js中配置define：

  import { defineConfig } from 'vitest/config';
  import react from '@vitejs/plugin-react';
  
  export default defineConfig({
    plugins: [react()],
    test: {
      environment: 'jsdom',
      define: {
        'import.meta.env.VITE_API_URL_USER': JSON.stringify('http://localhost:3000'),
      },
    },
  });
  

• Jest：在src/setupTests.js中模拟全局环境变量：

  globalThis.import.meta.env = {
    ...globalThis.import.meta.env,
    VITE_API_URL_USER: 'http://localhost:3000',
  };
  

4. 验证测试环境的URL正确性 #

在测试代码中打印USER_URL，确认监听URL和请求URL一致：

import { USER_URL } from './path-to-your-url-file';

it('should verify USER_URL in test environment', () => {
  console.log('Test USER_URL:', USER_URL);
  // 确保输出的URL和组件请求的URL完全匹配
});

5. 可选：用正则匹配路径（不依赖域名） #

如果不想受域名影响，可使用正则匹配API路径部分，适配多环境：

rest.get(/\/api\/v1\/userroles$/, (req, res, ctx) => {
  return res(
    ctx.json([
      {
        firstName: 'Admin',
        lastName: 'Admin',
        fullName: 'Admin Admin',
      }
    ])
  );
})

这种方式只要请求路径匹配，不管域名是什么，都能命中mock。

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