Next.js应用Cypress E2E测试覆盖率提示代码未插桩问题求助

核心问题 #

Next.js 13+的App Router默认使用SWC编译器，而非Babel，因此你之前配置的babel-plugin-istanbul不会生效，导致代码未被插桩。下面提供两种可行方案：

方案一：改用SWC插桩插件（推荐，更贴合Next.js默认配置） #

SWC是Next.js默认编译器，速度更快，无需切换到Babel：

1. 安装SWC的Istanbul插桩插件

yarn add -D @swc/plugin-istanbul

2. 修改next.config.js，仅在测试环境启用插桩

/** @type {import('next').NextConfig} */
const nextConfig = {
  experimental: {
    appDir: true,
    // 仅在测试环境加载插桩插件
    swcPlugins: process.env.NODE_ENV === 'test' 
      ? [['@swc/plugin-istanbul', {}]] 
      : [],
  },
}

module.exports = nextConfig

3. 更新package.json的Cypress启动脚本，指定测试环境

{
  "scripts": {
    "cypress:e2e": "NODE_ENV=test cypress open --e2e"
  }
}

方案二：强制使用Babel进行插桩 #

如果你更倾向于使用Babel生态，可以强制Next.js切换到Babel编译：

1. 修改next.config.js，禁用SWC并配置Babel

/** @type {import('next').NextConfig} */
const nextConfig = {
  experimental: {
    appDir: true,
  },
  // 禁用SWC，强制使用Babel
  swcMinify: false,
  babel: {
    presets: ['next/babel'],
    // 仅在测试环境启用istanbul插件
    plugins: process.env.NODE_ENV === 'test' ? ['istanbul'] : [],
  },
}

module.exports = nextConfig

2. 调整.babelrc（可选，可合并到上面的next.config.js中）

{
  "presets": ["next/babel"],
  "env": {
    "test": {
      "plugins": ["istanbul"]
    }
  }
}

3. 同样更新package.json的启动脚本

{
  "scripts": {
    "cypress:e2e": "NODE_ENV=test cypress open --e2e"
  }
}

额外检查步骤 #

• 删除.next文件夹和node_modules/.cache，清除编译缓存后重新启动
• 确认cypress/support/e2e.ts已正确导入@cypress/code-coverage/support
• 运行测试前，确保Next.js开发服务器已启动（或在Cypress配置中设置baseUrl指向你的应用）

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