从Cypress传递环境变量至React应用的问题求助

关于NODE_ENV能否设为'integration' #

React（尤其是Create React App）默认限制NODE_ENV只能是development、production、test三个值，无法直接修改为integration。建议继续使用自定义的REACT_APP_*前缀环境变量（比如你用的REACT_APP_ENV）来标识Cypress测试环境。

解决process is not defined错误 #

这个错误的核心原因是：你在启动Cypress时传递的环境变量，并没有被注入到React应用中。React应用的环境变量是在它自己的启动/构建阶段注入的，和Cypress的启动命令无关。以下是具体解决方法：

方法1：启动React应用时传递环境变量（适用于CRA或自定义配置） #

如果你的测试流程是先启动React开发服务器，再用Cypress访问它，需要在启动React时设置环境变量：

# 先启动React应用，带上环境变量
REACT_APP_ENV=integration npm start
# 再启动Cypress（新开终端）
npx cypress open --e2e --browser=chrome

这样React应用启动时会把REACT_APP_ENV=integration注入到process.env中，App.tsx里就能正常访问process.env.REACT_APP_ENV了。

方法2：在Cypress中直接注入环境变量到React应用 #

如果不想修改React的启动命令，可以在Cypress测试中通过onBeforeLoad钩子给浏览器的window对象注入变量，然后在React应用中读取这个变量：

1. 在Cypress测试文件的beforeEach中添加：

beforeEach(() => {
  cy.visit('你的应用地址', {
    onBeforeLoad(win) {
      // 给window对象添加环境变量
      win.REACT_APP_ENV = 'integration';
    }
  });
});

2. 修改App.tsx中的访问方式：

// 替换原来的process.env.REACT_APP_ENV
const env = window.REACT_APP_ENV;

方法3：自定义Webpack配置注入变量（非CRA项目） #

如果你的项目没有用CRA，是自定义Webpack配置，需要确保webpack.config.js中用DefinePlugin注入环境变量：

const webpack = require('webpack');

module.exports = {
  // 其他配置...
  plugins: [
    new webpack.DefinePlugin({
      // 把环境变量注入到process.env中
      'process.env.REACT_APP_ENV': JSON.stringify(process.env.REACT_APP_ENV)
    })
  ]
};

之后同样需要在启动React应用时带上REACT_APP_ENV=integration。

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