How to use Cypress code coverage with Next.js using Babel only for tests and Turbopack for development?

[kevinAlexanderG30]

Summary

I’m trying to configure Cypress code coverage in a Next.js project that uses Turbopack for development, but I want to use Babel only during testing — without affecting the dev or production builds.
I’ve been using this example as a reference:

👉 bahmutov/next-and-cypress-example

• Run Next.js normally with Turbopack during next dev
• Collect Cypress (E2E or component) coverage using @cypress/code-coverage
• Apply Babel instrumentation only for tests, not for the development environment

cypress.config.ts

import { defineConfig } from "cypress";

export default defineConfig({
  component: {
    devServer: {
      framework: "next",
      bundler: "webpack",
    },
  },
  e2e: {
    baseUrl: "http://localhost:3000",
    setupNodeEvents(on, config) {
      require("@cypress/code-coverage/task")(on, config);
      return config;
    },
  },
  env: {
    JWT_SECRET: process.env.JWT_SECRET,
    codeCoverage: {
      url: "/api/__coverage__",
      exclude: [
        "cypress/**/*.*",
        "**/*.cy.{js,jsx,ts,tsx}",
        "**/*.spec.{js,jsx,ts,tsx}",
        "node_modules/**/*",
        ".next/**/*",
      ],
    },
  },
});

What I need help with

1. What’s the best way to enable Babel only when running Cypress tests, without interfering with Turbopack?
2. Is it possible to have a .babelrc or babel.config.js that only loads in test mode?
3. How can I correctly generate a coverage report in a Next.js (Page Router) project?
4. Has anyone successfully combined Turbopack + Babel + Cypress + Code Coverage?

Additional Info

• Next.js v15.3.4 (Page Router)
• Cypress v15.4
• @cypress/code-coverage latest version
• Node.js 24
• Turbopack enabled by default

[manimovassagh]

This is a tricky setup since Turbopack and Babel are fundamentally different transpilers, and Next.js disables Babel entirely when Turbopack is active.

The key insight: you need to run Next.js without Turbopack during Cypress tests so Babel instrumentation can kick in. Here's how to set it up cleanly:

1. Separate dev vs. test scripts

{
  "scripts": {
    "dev": "next dev --turbopack",
    "dev:test": "next dev",
    "cy:open": "cypress open",
    "cy:run": "cypress run",
    "test:e2e": "start-server-and-test dev:test http://localhost:3000 cy:run"
  }
}

The dev:test script runs Next.js without --turbopack, which allows Babel to process your code.

2. Conditional Babel config

Create a babel.config.js (not .babelrc) so you can use logic:

module.exports = function (api) {
  // Only instrument when running in Cypress test mode
  const isTest = process.env.CYPRESS_COVERAGE === "true" || process.env.NODE_ENV === "test"

  const plugins = []
  if (isTest) {
    plugins.push("istanbul")
  }

  return {
    presets: ["next/babel"],
    plugins,
  }
}

Then set the env variable in your test script:

{
  "test:e2e": "CYPRESS_COVERAGE=true start-server-and-test dev:test http://localhost:3000 cy:run"
}

3. Install dependencies

npm install --save-dev babel-plugin-istanbul @cypress/code-coverage start-server-and-test

4. Cypress support file

In cypress/support/e2e.js:

import "@cypress/code-coverage/support"

5. Coverage API route

For the Page Router, create pages/api/__coverage__.js:

export default function handler(req, res) {
  res.status(200).json({
    coverage: global.__coverage__ || null,
  })
}

Why this works

• Your daily development still uses Turbopack (fast)
• Test runs use the standard Webpack-based Next.js dev server, which respects babel.config.js
• The istanbul plugin only instruments code when CYPRESS_COVERAGE=true
• Your production builds (next build) are unaffected since they don't use the Babel config unless you explicitly set it up

The trade-off is that your test server will be slower than Turbopack, but that's unavoidable — code coverage instrumentation requires a Babel transform, and Turbopack doesn't support Babel plugins.