配置Cypress 11组件测试时NODE_ENV未指定的解决方法

直接命令行临时指定 #

根据操作系统，启动Cypress时附带环境变量：

• Windows（cmd）：set NODE_ENV=development&&npx cypress open --component
• Windows（PowerShell）：$env:NODE_ENV="development"; npx cypress open --component
• macOS/Linux：NODE_ENV=development npx cypress open --component

配置package.json脚本（推荐） #

把环境变量整合到npm脚本，避免重复输入：

1. 打开项目根目录的package.json，找到scripts节点
2. 添加组件测试启动命令：

   "scripts": {
     // 保留原有脚本
     "cypress:component": "NODE_ENV=development npx cypress open --component"
   }
   

3. 若需跨平台兼容（Windows/macOS/Linux通用），先安装cross-env依赖：

   npm install cross-env --save-dev
   

   再修改脚本：

   "cypress:component": "cross-env NODE_ENV=development npx cypress open --component"
   

4. 启动时运行：npm run cypress:component

在Cypress配置文件中设置（兜底方案） #

如果上述方法无效，直接在cypress.config.js（或.ts）顶部指定：

// 优先使用系统已有变量，无则默认development
process.env.NODE_ENV = process.env.NODE_ENV || 'development';

const { defineConfig } = require('cypress');

module.exports = defineConfig({
  component: {
    devServer: {
      framework: 'react',
      bundler: 'webpack',
      // 弹出配置的CRA需指定webpack配置路径
      webpackConfig: require('./webpack.config.js')
    }
  }
});

补充说明 #

弹出配置后的Storybook+React应用，原CRA封装的环境变量自动注入逻辑被暴露，而Cypress 11默认不会给组件测试环境主动注入NODE_ENV，因此必须手动指定。通常设为development即可，若需生产环境测试，替换为production。

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