Next.js的loadEnvConfig在Cypress support文件中加载环境变量失败

@next/env提供的loadEnvConfig是Node.js专属方法，依赖Node内置fs模块的statSync接口。你将调用逻辑写在了Cypress的support文件中，而support文件最终会在浏览器上下文执行，浏览器环境没有Node的fs相关API，因此会触发statSync is not a function报错。

步骤1：将环境变量加载逻辑移到Cypress Node层配置 #

Cypress的配置文件（v10+为cypress.config.js，旧版本为cypress/plugins/index.js）运行在Node.js环境，可以正常调用loadEnvConfig加载环境变量，示例配置如下：

const { defineConfig } = require('cypress')
const { loadEnvConfig } = require('@next/env')

// 第一个参数为Next.js项目根目录，第二个参数为是否为开发环境，控制加载的env文件优先级
const { combinedEnv } = loadEnvConfig(process.cwd(), process.env.NODE_ENV !== 'production')

module.exports = defineConfig({
  e2e: {
    // 将加载到的环境变量注入到Cypress配置中
    env: {
      // 仅按需暴露需要在测试中使用的变量，避免泄露敏感服务端变量
      ...combinedEnv
    },
    setupNodeEvents(on, config) {
      // 也可在此处对环境变量做二次处理后返回
      return config
    }
  }
})

步骤2：在测试中使用环境变量 #

测试代码里直接调用Cypress.env('目标变量名')即可获取对应值：

it('测试用例', () => {
  console.log(Cypress.env('MY_ENV_VAR'))
})

• 不要直接把所有环境变量暴露到浏览器测试上下文，只传递测试需要的变量，敏感的服务端环境变量禁止传递到前端侧
• 如果你的Next.js项目根目录和Cypress运行目录不一致，把loadEnvConfig的第一个参数替换为Next.js项目的绝对路径即可

内容的提问来源于stack exchange，提问作者Stefan Bajić