How to instrument code in Cypress with SWC ( not babel ) in NextJS?

[alamenai]

Verify canary release

• I verified that the issue exists in the latest Next.js canary release

Provide environment information

Operating System:
      Platform: linux
      Arch: x64
      Version: #62-Ubuntu SMP Tue Nov 22 19:54:14 UTC 2022
    Binaries:
      Node: 18.15.0
      npm: 9.8.1
      Yarn: N/A
      pnpm: N/A
    Relevant Packages:
      next: 13.4.8
      eslint-config-next: 13.4.8
      react: 18.2.0
      react-dom: 18.2.0
      typescript: 5.1.6
    Next.js Config:
      output: N/A

warn  - Latest canary version not detected, detected: "13.4.8", newest: "13.4.14-canary.1".
        Please try the latest canary version (`npm install next@canary`) to confirm the issue still exists before creating a new issue.
        Read more - https://nextjs.org/docs/messages/opening-an-issue

Which area(s) of Next.js are affected? (leave empty if unsure)

App Router, Font optimization (next/font), SWC transpilation

Link to the code that reproduces this issue or a replay of the bug

.

To Reproduce

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.

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

Please read this GitHub discussion

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

  "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:

"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:

npm run cypress-run-component

(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.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;

Describe the Bug

.

Expected Behavior

.

Which browser are you using? (if relevant)

Chrome

How are you deploying your application? (if relevant)

No response

[Yaslim2]

did you get any answer ? @MenaiAla

[alamenai]

No, not yet however I resolved the issue programmatically by creating and deleting the Babel file.

[zhllucky]

I have a same question

[jasonmit]

Linking with upstream issue: cypress-io/code-coverage#583

[alamenai]

I used the swc-plugin.

You can find the solution on Stackoverflow.