如何在CRA-4.0.3搭建的Typescript React项目运行时使用.env环境变量

问题根因 #

CRA 内置的 REACT_APP_* 环境变量注入逻辑仅作用于前端构建产物运行的浏览器环境，你使用的 Jest+Playwright E2E 测试运行在 Node.js 侧，默认不会加载项目根目录的 .env 文件，webpack 配置也仅影响前端打包流程，不会同步到测试运行时的 Node 环境，这是读取变量返回 undefined 的核心原因。

具体实现步骤 #

1. 安装依赖 #

如果项目未安装dotenv，先执行安装命令：
npm install dotenv --save-dev

2. 配置Jest运行时自动加载.env #

任选一种配置方式即可：

• 方式一：修改项目Jest配置文件（通常为jest.config.js或package.json中的jest字段），添加setupFiles配置：

module.exports = {
  // 其余现有配置保持不变
  setupFiles: ["dotenv/config"]
}

• 方式二：在E2E测试的入口文件顶部主动加载.env，TS语法如下：

import dotenv from 'dotenv'
dotenv.config()
// 如果.env文件不在测试目录同级，需要指定相对路径，例如：
// dotenv.config({ path: '../../../../.env' })

3. 补充TS类型声明（可选，解决类型报错） #

在项目的react-app-env.d.ts或自定义的env.d.ts类型文件中添加如下声明：

declare namespace NodeJS {
  interface ProcessEnv {
    REACT_APP_ADMINUSER: string
    REACT_APP_ADMINPASS: string
  }
}

4. 测试读取变量 #

配置完成后，直接在/main/e2e/tests/file.spec.ts中读取即可：

const adminUser = process.env.REACT_APP_ADMINUSER
const adminPass = process.env.REACT_APP_ADMINPASS

注意事项 #

如果使用多环境.env文件（如.env.test、.env.production），加载时指定对应文件路径即可：
dotenv.config({ path: '.env.test' })

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