如何在Playwright-CT配置中注入环境变量用于组件测试？

方案1：适配process.env的显式注入 #

如果你的useAnalytics钩子依赖process.env.ANALYTICS_URL，需要通过Vite的define配置把dotenv加载的变量映射到前端环境：

1. 确保项目根目录下的.env.test文件内容正确：

   ANALYTICS_URL=https://your-test-analytics-endpoint.com
   

2. 修改playwright-ct.config.ts，完整配置如下：

   import { defineConfig, devices } from '@playwright/experimental-ct-react';
   import dotenv from 'dotenv';
   import path from 'path';
   
   // 加载测试环境变量文件
   const envVars = dotenv.config({
     path: path.resolve(__dirname, '.env.test'),
   }).parsed;
   
   export default defineConfig({
     testDir: './tests/component',
     fullyParallel: true,
     forbidOnly: !!process.env.CI,
     retries: process.env.CI ? 2 : 0,
     workers: process.env.CI ? 1 : undefined,
     reporter: 'html',
     use: {
       trace: 'on-first-retry',
       ctPort: 3100,
     },
     projects: [
       {
         name: 'chromium',
         use: { ...devices['Desktop Chrome'] },
       },
     ],
     ctViteConfig: {
       define: {
         // 必须把变量转成JSON字符串，否则会被当成代码标识符
         'process.env.ANALYTICS_URL': JSON.stringify(envVars?.ANALYTICS_URL),
       },
     },
   });
   

方案2：改用Vite原生环境变量规范（推荐） #

Vite默认支持VITE_前缀的环境变量，无需额外配置define，更简洁：

1. 更新.env.test的变量前缀：

   VITE_ANALYTICS_URL=https://your-test-analytics-endpoint.com
   

2. 修改useAnalytics钩子，将process.env.ANALYTICS_URL替换为import.meta.env.VITE_ANALYTICS_URL

3. 简化playwright-ct.config.ts的Vite配置（如果.env.test在根目录，envDir可省略）：

   import { defineConfig, devices } from '@playwright/experimental-ct-react';
   
   export default defineConfig({
     // 其他基础配置不变
     ctViteConfig: {
       envDir: './', // 指定环境变量文件所在目录，默认根目录
     },
   });
   

验证变量是否生效 #

在测试文件中添加打印语句，确认变量已正确加载：

test('verify analytics url is loaded', async ({ mount }) => {
  // 方案1用这个打印
  console.log('Loaded ANALYTICS_URL:', process.env.ANALYTICS_URL);
  // 方案2用这个打印
  // console.log('Loaded ANALYTICS_URL:', import.meta.env.VITE_ANALYTICS_URL);
  
  // 挂载组件的测试代码...
});

关键注意事项 #

• 确保运行测试时没有其他环境变量覆盖.env.test中的值（比如CI环境的系统变量）
• 使用方案2时，若用TypeScript，需在vite-env.d.ts中添加类型声明：

  interface ImportMetaEnv {
    readonly VITE_ANALYTICS_URL: string;
  }
  

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