如何在测试时构建NextJS的Cypress环境中实现代码覆盖率

1. 安装必要依赖 #

根据你使用的编译器（Babel/SWC）选择对应依赖：

• 使用Babel：

  npm install --save-dev @cypress/code-coverage babel-plugin-istanbul nyc
  

• 使用SWC（Next.js默认）：

  npm install --save-dev @cypress/code-coverage @swc/plugin-istanbul nyc
  

2. 配置代码插装 #

若使用Babel

在项目根目录创建.babelrc文件，指定测试环境启用istanbul插件：

{
  "env": {
    "test": {
      "plugins": ["istanbul"]
    }
  }
}

或者在next.config.js中集成Babel配置：

module.exports = {
  babel: (config) => {
    if (process.env.NODE_ENV === 'test') {
      config.plugins.push('istanbul');
    }
    return config;
  },
};

若使用SWC

修改next.config.js，添加SWC插件配置：

module.exports = {
  experimental: {
    swcPlugins: [
      ['@swc/plugin-istanbul', {
        include: ['src/**/*'],
        exclude: ['node_modules', 'src/**/*.test.{ts,tsx}'],
        extension: ['.ts', '.tsx']
      }]
    ]
  }
};

3. 修改Cypress配置 #

更新cypress.config.ts中的setupNodeEvents，注册覆盖率任务并确保测试环境变量正确：

async setupNodeEvents(on, config) {
  // 注册Cypress覆盖率任务
  require('@cypress/code-coverage/task')(on, config);

  // 强制设置为测试环境，确保代码插装生效
  process.env.NODE_ENV = 'test';

  const dev = false;
  const hostname = 'localhost';
  const port = 3000;

  const app = next({ dev, hostname, port });
  const handle = app.getRequestHandler();

  await app.prepare().then(() => {
    createServer(async (req, res) => {
      const parsedUrl = parse(req.url!, true);
      await handle(req, res, parsedUrl);
    }).listen(port, () => {
      console.log(`> Ready on http://${hostname}:${port}`);
    });
  });

  return config;
}

4. 添加Cypress支持文件 #

在cypress/support/e2e.ts（或.js）中导入覆盖率支持脚本：

import '@cypress/code-coverage/support';

5. 配置测试脚本 #

修改package.json中的测试命令，确保以测试环境启动Cypress：

{
  "scripts": {
    "test:e2e": "NODE_ENV=test cypress run",
    "test:e2e:open": "NODE_ENV=test cypress open"
  }
}

6. 生成并查看覆盖率报告 #

运行E2E测试后，项目根目录会生成coverage文件夹，打开coverage/lcov-report/index.html即可查看详细的代码覆盖率报告。

注意事项 #

• 可通过根目录.nycrc文件自定义覆盖率统计范围：

  {
    "all": true,
    "include": ["src/**/*.{ts,tsx}"],
    "exclude": ["src/**/*.test.{ts,tsx}", "cypress/**/*"]
  }
  

• 测试环境建议使用Next.js生产构建模式（dev: false），避免热重载影响代码插装效果。

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