我用create-next-app和默认选项创建了一个新项目。

npx create-next-app@13.4.7
---
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

字符串
然后按照nextjs文档添加了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：注解部分来自此question。

{
    "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"]
}

型
您可以克隆存储库here。
我也试过swc-plugin-coverage-instrument，但在我测试时__coverage__不存在。

我需要什么

我喜欢的是一个React/NextJs项目，其中包含Typescript和Code Coverage。Cypress是首选测试lib。