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