如何使用 cypress 将代码覆盖率添加到 React/NextJs/Typescript (create-next-app)

Question

我使用

create-next-app

和默认选项创建了一个新项目。

npx [email protected]
---
Would you like to use TypeScript with this project? Yes
Would you like to use ESLint with this project? Yes
Would you like to use Tailwind CSS with this project? Yes
Would you like to use `src/` directory with this project? Yes
Use App Router (recommended)? Yes
Would you like to customize the default import alias? No

然后按照

the nextjs doc

添加Cypress。

然后我尝试按照 CC 的 cypress 文档 来添加代码覆盖率。

但是它会导致编译错误，因为项目使用

SWC

，而CC文档使用

babel

。

由于我已经构建了该项目，所以我面临以下错误

Failed to compile

./src/app/layout.tsx:2:1
Syntax error: "next/font" requires SWC although Babel is being used due to a custom babel config being present.
Read more: https://nextjs.org/docs/messages/babel-font-loader-conflict

This error occurred during the build process and can only be dismissed by fixing the error.

我的项目中的关键文件是：

package.json

：

{
  "name": "my-app",
  "version": "0.1.0",
  "private": true,
  "scripts": {
    "dev": "next dev",
    "build": "next build",
    "start": "next start",
    "lint": "next lint",
    "cypress": "cypress open",
    "e2e": "start-server-and-test dev http://localhost:3000 \"cypress open --e2e\"",
    "e2e:headless": "start-server-and-test dev http://localhost:3000 \"cypress run --e2e\"",
    "component": "cypress open --component",
    "component:headless": "cypress run --component"
  },
  "dependencies": {
    "@types/node": "20.3.1",
    "@types/react": "18.2.13",
    "@types/react-dom": "18.2.6",
    "autoprefixer": "10.4.14",
    "eslint": "8.43.0",
    "eslint-config-next": "13.4.7",
    "next": "13.4.7",
    "postcss": "8.4.24",
    "react": "18.2.0",
    "react-dom": "18.2.0",
    "tailwindcss": "3.3.2",
    "typescript": "5.1.3"
  },
  "devDependencies": {
    "@cypress/code-coverage": "^3.10.7",
    "babel-plugin-istanbul": "^6.1.1",
    "cypress": "^12.15.0",
    "start-server-and-test": "^2.0.0"
  }
}

cypress.config.ts

import { defineConfig } from "cypress";

export default defineConfig({
  component: {
    devServer: {
      framework: "next",
      bundler: "webpack",
    },
    setupNodeEvents: (on, config) => {
      require('@cypress/code-coverage/task')(on, config)
      return config
    },
  },

  e2e: {
    baseUrl: 'http://localhost:3000',
    setupNodeEvents: (on, config) => {
      require('@cypress/code-coverage/task')(on, config)
      return config
    },
  },
});

cypress/support/commands.ts

：

/// <reference types="cypress" />
import '@cypress/code-coverage/support'

.babelrc

：评论部分来自这个问题。

{
    "presets": ["@babel/preset-react"],
    "plugins": ["transform-class-properties", "istanbul"]
}
// {
//     "presets": [
//       "next/babel"
//     ],
//     "plugins": [
//       "istanbul"
//     ]
// }

tsconfig.ts

：

{
  "compilerOptions": {
    "target": "es5",
    "lib": ["dom", "dom.iterable", "esnext"],
    "allowJs": true,
    "skipLibCheck": true,
    "strict": true,
    "forceConsistentCasingInFileNames": true,
    "noEmit": true,
    "esModuleInterop": true,
    "module": "esnext",
    "moduleResolution": "node",
    "resolveJsonModule": true,
    "isolatedModules": true,
    "jsx": "preserve",
    "incremental": true,
    "plugins": [
      {
        "name": "next"
      }
    ],
    "paths": {
      "@/*": ["./src/*"]
    }
  },
  "include": ["next-env.d.ts", "**/*.ts", "**/*.tsx", ".next/types/**/*.ts"],
  "exclude": ["node_modules"]
}

您可以在此处克隆存储库。

我也尝试了swc-plugin-coverage-instrument，但是当我测试时，

__coverage__

不存在。

我需要什么

我喜欢的是一个带有

React

和

NextJs

的

Typescript

/

Code Coverage

项目。

Cypress

是首选测试库。

Answer 1

抱歉，我正在发帖，因为我无法发表评论。

你对此有什么进展吗？我有完全相同的问题。

令人难以置信的是，由于从 Babel 迁移到 SWC，Next.js 不再支持覆盖率收集或 Istanbul。

Answer 2

在

experimental

中的

next.config.js

块中配置的 swc 覆盖插件对我不起作用。应用程序会不断崩溃，生成的覆盖范围仅适用于

next.config.js

使用

babel.config.js

，我完全按照您的操作进行操作，但从应用程序中删除了 next/font（它是脚手架应用程序的一部分，用于 Google Inter 字体）。到目前为止，一切正常。

显然这不是一个很好的 hack（大约一年前被 SWC 取代时依赖 Babel，不知道除了 next/font 之外还有什么可能会破坏这条线）。但我没有在生产代码中使用它。所以我会看看我能走多远。

我考虑过搬到Vite。唯一阻止我的是，大约 8-10 个月前，当我查看它时，尽管开发服务器非常快，但它似乎没有生产级捆绑器配置。另一方面，对于 Next.js，保持优化/更新的生产级 Webpack 配置是价值主张的重要组成部分。

希望 Next.js 解决基于 SWC 的构建（自 v13 起默认）不允许覆盖范围收集的问题。