React Vite项目中如何为Jest模拟process环境变量

DevOps 小满

2026-7-4

解决Jest测试中import.meta.env.APP_ENV为undefined的问题

原因

Vite的define配置是在构建阶段做静态字符串替换，而Jest运行测试时不会经过Vite的构建流程，所以import.meta.env.APP_ENV不会被替换成process.env.ENV的对应值，自然返回undefined。直接设置process.env.ENV也没用，因为Jest没触发Vite的替换逻辑。

解决方案

方案1：在Jest配置中全局模拟`import.meta.env`

创建jest.setup.js初始化文件：

// jest.setup.js
Object.defineProperty(window, 'import.meta', {
  value: {
    env: {
      APP_ENV: process.env.ENV?.toLowerCase() || 'prod'
    }
  }
});

在Jest配置文件（jest.config.js/jest.config.ts）中引入该文件：

// jest.config.js
module.exports = {
  // 其他已有配置...
  setupFilesAfterEnv: ['./jest.setup.js']
};

测试运行前，import.meta.env.APP_ENV会被自动设置为对应值，和Vite中的逻辑保持一致。

方案2：用Babel插件处理`import.meta.env`替换

如果项目使用Babel，可借助插件让Jest运行时处理环境变量替换：

安装依赖：

npm install babel-plugin-transform-vite-meta-env --save-dev

在babel.config.js中配置插件：

// babel.config.js
module.exports = {
  presets: [/* 你的现有presets */],
  plugins: [
    ['transform-vite-meta-env', {
      env: {
        APP_ENV: process.env.ENV?.toLowerCase() || 'prod'
      }
    }]
  ]
};

方案3：单个测试文件临时赋值

如果仅个别测试需要，可在测试文件顶部直接设置：

// 目标测试文件
beforeAll(() => {
  Object.defineProperty(window, 'import.meta', {
    value: {
      env: {
        APP_ENV: 'local' // 或 process.env.ENV?.toLowerCase() || 'prod'
      }
    }
  });
});

test('组件渲染正常', () => {
  // 测试逻辑
});