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.

[jpierson-at-riis]

Using the solution pointed out by @alamenai didn't allow any build time or runtime server side code to have coverage collected. This impacts coverage collection from SSG and SSR scenarios while using the dev server or exporting to run coverage tests. I'm hoping that maybe I had just missed some configuration but it seems that the experimental https://github.com/kwonoj/swc-plugin-coverage-instrument project may not be a silver bullet just yet from what I can tell.

kwonoj/swc-plugin-coverage-instrument#246