NODE_ENV=test环境下，如何正确使用Cypress结合Istanbul实现VueJS代码覆盖率测试？

你碰到的核心问题是环境区分不彻底——既不想生产代码被插桩，又要在测试环境正常加载Cypress覆盖率插件，同时避免浏览器端出现require未定义的错误。下面是几个关键的修复步骤，应该能解决你的问题：

1. 条件加载Cypress覆盖率插件 #

首先在tests/e2e/plugins/index.js里，不要直接无条件引入@cypress/code-coverage/task，而是通过环境变量判断是否启用：

module.exports = (on, config) => {
  // 只在测试环境加载覆盖率任务
  if (config.env.NODE_ENV === 'test' || process.env.NODE_ENV === 'test') {
    require('@cypress/code-coverage/task')(on, config);
    // 可在此添加其他测试环境专属配置
  }
  return config;
};

这样生产环境下这段代码完全不会执行，也就不会触发require相关的问题。

2. 确保Vue只在测试环境进行代码插桩 #

你需要在Vue的构建配置里，仅当NODE_ENV=test时才启用Istanbul的插桩工具，分两种项目类型处理：

Vue CLI（Webpack）项目 #

在vue.config.js里添加babel插件的条件配置：

module.exports = {
  chainWebpack: config => {
    if (process.env.NODE_ENV === 'test') {
      config.module
        .rule('js')
        .use('babel-loader')
        .tap(options => {
          options.plugins.push('istanbul');
          return options;
        });
    }
  }
};

同时确保babel.config.js里没有全局启用istanbul插件，只在测试环境通过上述方式注入。

Vite（Vue3）项目 #

先安装vite-plugin-istanbul，然后在vite.config.js里条件启用：

import istanbul from 'vite-plugin-istanbul';

export default defineConfig({
  plugins: [
    vue(),
    // 只在测试环境加载覆盖率插件
    process.env.NODE_ENV === 'test' && istanbul({
      include: 'src/**/*',
      exclude: ['node_modules', 'tests/**/*'],
      extension: ['.js', '.vue'],
    })
  ].filter(Boolean)
});

3. 避免测试环境直接使用生产构建产物 #

你提到当NODE_ENV=test时Vue似乎不编译源码——这大概率是因为你的构建脚本在test环境下复用了生产构建逻辑，导致没有启用webpack的模块打包，进而让require暴露在浏览器中。

确保测试环境下启动的是开发模式的Vue服务，或者专门为测试环境做一次带插桩的构建。比如在package.json里添加测试专属的启动脚本：

{
  "scripts": {
    "test:e2e": "NODE_ENV=test vue-cli-service serve --mode test",
    "cy:run": "cypress run"
  }
}

这里的--mode test会让Vue CLI加载.env.test配置文件，你可以在这个文件里单独设置测试环境变量：

NODE_ENV=test
VUE_APP_COVERAGE=true

4. 验证生产环境无插桩代码 #

最后记得测试生产构建，检查打包后的代码里是否包含Istanbul的插桩逻辑（比如__cov相关变量）。如果还有，那可能是某个配置文件里的环境判断有误，需要排查是否有全局启用的插桩插件。

总结一下，核心就是把所有覆盖率相关的配置都严格限定在测试环境，不管是Cypress插件的加载，还是Vue构建时的插桩，都通过环境变量做条件判断，这样就能避免生产代码被污染，同时解决测试环境的require未定义问题。

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