如何在Cypress组件测试中指定使用的.env文件

以下是几种可行的方案，按需选择：

方案1：通过Cypress配置加载指定.env文件 #

1. 安装dotenv依赖（如果未安装）：

   npm install dotenv --save-dev
   

2. 修改cypress.config.js（或.ts），在配置开头加载.env.test：

   const { defineConfig } = require('cypress')
   const dotenv = require('dotenv')
   
   // 加载测试环境变量文件
   dotenv.config({ path: './.env.test' })
   
   module.exports = defineConfig({
     component: {
       devServer: {
         framework: 'react', // 替换为你的项目框架（vue/angular等）
         bundler: 'webpack', // 替换为你的打包工具（vite等）
       },
       // 将加载的环境变量同步到Cypress环境中
       env: { ...process.env }
     }
   })
   

3. 如果使用Vite作为打包工具，需额外创建vite.config.test.js指定env文件：

   // vite.config.test.js
   export default {
     envFile: './.env.test'
   }
   

   然后在Cypress配置中关联该文件：

   devServer: {
     framework: 'react',
     bundler: 'vite',
     viteConfig: './vite.config.test.js'
   }
   

方案2：通过npm命令动态指定.env文件 #

1. 确保已安装dotenv，然后修改cypress.config.js，支持从环境变量读取env文件路径：

   const { defineConfig } = require('cypress')
   const dotenv = require('dotenv')
   
   // 优先读取命令传入的路径，默认用.env
   const envFilePath = process.env.CYPRESS_ENV_FILE || './.env'
   dotenv.config({ path: envFilePath })
   
   module.exports = defineConfig({
     component: {
       devServer: {
         framework: 'react',
         bundler: 'webpack'
       },
       env: { ...process.env }
     }
   })
   

2. 修改package.json中的测试命令，传入指定的env文件路径：

   "test-component": "CYPRESS_ENV_FILE=./.env.test cypress open --component"
   

   运行该命令即可加载.env.test的变量。

方案3：使用env-cmd直接加载（适合脚手架项目） #

1. 安装env-cmd依赖：

   npm install env-cmd --save-dev
   

2. 修改package.json的测试命令：

   "test-component": "env-cmd -f .env.test cypress open --component"
   

   这种方式无需修改Cypress配置，env-cmd会自动将.env.test的变量注入到process.env中。

注意：组件中使用的process.env变量需确保符合打包工具的要求（比如React项目需前缀REACT_APP_，Vue项目需VITE_），否则打包工具不会将这些变量注入到组件代码中。

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