I integrated Cypress into my project for testing, and everything went well, however, when I want to make code coverage I could not find a solution for my issue.

我将Cypress集成到我的项目中进行测试，一切都很顺利，然而，当我想要进行代码覆盖时，我找不到解决问题的方法。

In NextJS 13, it does not support .babelrc but SWC, however Istanbul requires .babelrc as configuration!

在NextJS13中，它不支持.Babelrc而是SWC，但是伊斯坦布尔需要.Babelrc作为配置！

Please read this GitHub discussion

请阅读这篇GitHub讨论

If I configure .babelrc and run my cypress and build scripts:

如果我配置.Babelrc并运行我的Cypress和构建脚本：

  "cypress-open-component": "cypress open --component",
   
  "cypress-open-e2e": "npm run instrument && cypress open --e2e",
   
  "cypress-run-component": "npm run instrument && cypress run --component --spec src/components/core/*/*.cy.tsx --headless",
    
  "instrument": "npx nyc instrument --compact=false src  instrumented",
  
  "coverage-report": "npx nyc report --reporter=html"
  
  "build": "mv .babelrc.js .babel_ && next build; mv .babel_ .babelrc.js",
   
  "start": "next start",
   
  "lint": "next lint",

They work well.

它们工作得很好。

However, when I run npm run dev:

但是，当我运行NPM时，运行dev：

"dev": "next dev",

I got an error:

我收到一个错误：

 info Using external babel configuration from /home/alaeddine/Desktop/gersthofen-app/.babelrc.js
- error ./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
<w> [webpack.cache.PackFileCacheStrategy] Restoring pack failed from /home/alaeddine/Desktop/gersthofen-app/.next/cache/webpack/client-development-fallback.pack.gz: Error: incorrect header check
- wait compiling /_error (client and server)...
- error ./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

for the build script I used the solution but I see it as a tricky solution.

对于构建脚本，我使用了解决方案，但我认为它是一个棘手的解决方案。

2 Alternative

If I change the .babelrc.js to .babelrc.build.js, the npm run dev works well because it ignore the babel file but the cypress failed:

如果我将.Babelrc.js更改为.Babelrc.Build.js，则npm run dev运行得很好，因为它忽略了babel文件，但cypress失败了：

npm run cypress-run-component

NPM运行柏树-运行-组件

(Run Starting)

  ┌────────────────────────────────────────────────────────────────────────────────────────────────┐
  │ Cypress:        12.17.3                                                                        │
  │ Browser:        Electron 106 (headless)                                                        │
  │ Node Version:   v18.15.0 (/home/alaeddine/.nvm/versions/node/v18.15.0/bin/node)                │
  │ Specs:          1 found (indexButton.cy.tsx)                                                   │
  │ Searched:       src/components/core/Button/indexButton.cy.tsx                                  │
  └────────────────────────────────────────────────────────────────────────────────────────────────┘


────────────────────────────────────────────────────────────────────────────────────────────────────
                                                                                                    
  Running:  indexButton.cy.tsx                                                              (1 of 1)
17 assets
65 modules

ERROR in ./src/components/core/Button/index.tsx:14:1
Syntax error: Unexpected token, expected ","

  12 |   loading,
  13 |   icon,
> 14 | }: IButtonProps) => {
     |  ^
  15 |   const {
  16 |     button,
  17 |     primary,

client (webpack 5.86.0) compiled with 1 error in 6654 ms


  1) An uncaught error was detected outside of a test

Please, how to make code coverage in NextJS 13 with Cypress?

请问，如何用Cypress在NextJS 13中进行代码覆盖？

cypress.config.ts

import { defineConfig } from "cypress";

export default defineConfig({
  component: {
    devServer: {
      framework: "next",
      bundler: "webpack",
      webpackConfig: {
        mode: "development",
        devtool: false,
        module: {
          rules: [
            // application and Cypress files are bundled like React components
            // and instrumented using the babel-plugin-istanbul
            // (we will filter the code coverage for non-application files later)
            {
              test: /\.tsx$/,
              exclude: /node_modules/,
              use: {
                loader: "babel-loader",
                options: {
                  presets: ["@babel/preset-env", "@babel/preset-react"],
                  plugins: [
                    // we could optionally insert this plugin
                    // only if the code coverage flag is on
                    "istanbul",
                  ],
                },
              },
            },
          ],
        },
      },
    },
    // Instrument the code
    setupNodeEvents(on, config) {
      require("@cypress/code-coverage/task")(on, config);

      return config;
    },
  },

  e2e: {
    setupNodeEvents(on, config) {
      // implement node event listeners here
    },
  },
  video: false,
});

next.config.ts

/** @type {import('next').NextConfig} */
const nextConfig = {
  async rewrites() {
    if (process.env.NODE_ENV === "development") {
      return [
        {
          source: "/components",
          destination: "/page",
        },
      ];
    }

    return [];
  },
};

module.exports = nextConfig;

https://github.com/kwonoj/swc-plugin-coverage-instrument

Https://github.com/kwonoj/swc-plugin-coverage-instrument

You could use SWC's port of Istanbul; however, this issue is pretty important IMO: https://github.com/kwonoj/swc-plugin-coverage-instrument/issues/197

你可以使用SWC的伊斯坦布尔港口；然而，这个问题非常重要，国际海事组织：https://github.com/kwonoj/swc-plugin-coverage-instrument/issues/197

Alternatively, you could use babel, but just for process.env.NODE_ENV === 'test'; (see Can I Get Next.Js to exclude .babelrc during build?)

或者，您也可以使用babel，但仅针对cess.env.NODE_ENV=‘test’；(请参阅Can I Get Next.Js以在构建过程中排除.Babelrc？)