如何在NextJS+Cypress端到端测试中使用测试数据库？

1. 让Next.js加载测试环境变量 #

Next.js不会自动识别.env.test，需要通过指定NODE_ENV触发对应环境文件的加载：

• 先安装依赖：npm install cross-env --save-dev
• 在package.json的scripts中新增测试环境启动命令：

"scripts": {
  "dev:test": "cross-env NODE_ENV=test prisma generate && next dev"
}

执行npm run dev:test时，Next.js会自动加载.env.test（以及.env.test.local，用于存放敏感测试配置）。注意：客户端需要访问的变量必须以NEXT_PUBLIC_为前缀，服务端变量无需前缀。

2. 配置Cypress读取测试环境变量 #

Cypress默认不会加载.env.test，需要手动引入dotenv来读取：

• 安装依赖：npm install dotenv --save-dev
• 修改cypress.config.js：

const { defineConfig } = require('cypress');
const dotenv = require('dotenv');

// 加载测试环境变量
dotenv.config({ path: '.env.test' });

module.exports = defineConfig({
  e2e: {
    setupNodeEvents(on, config) {
      // 将读取到的环境变量注入Cypress配置
      config.env = { ...config.env, ...process.env };
      return config;
    },
    baseUrl: 'http://localhost:3000' // 匹配你的Next.js开发服务地址
  }
});

3. 隔离测试数据库 #

在.env.test中配置独立的测试数据库URL，避免污染生产/开发数据：

DATABASE_URL="postgresql://你的用户名:密码@localhost:5432/项目名-test?schema=public"

执行npm run dev:test时，Prisma会自动使用这个测试数据库。首次运行前可以执行prisma migrate dev --name test-init初始化测试库结构。

4. 一键启动测试流程 #

可以用concurrently同时启动测试环境和Cypress，简化操作：

• 安装依赖：npm install concurrently --save-dev
• 在package.json中新增命令：

"scripts": {
  "test:e2e": "concurrently \"npm run dev:test\" \"cypress open\""
}

之后执行npm run test:e2e就能一键启动测试环境和Cypress窗口。

注意事项 #

• 若有敏感测试配置，可创建.env.test.local并加入.gitignore，Next.js会优先加载这个文件。
• Cypress中要访问的前端环境变量必须带NEXT_PUBLIC_前缀，否则无法读取。

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