nextjs-with-cypress-coverage: A JavaScript repository from inspiraller

Create Next project and re-arrange routes

npx create-next-app lines --use-npm
Repostion javascript file page.tsx into typescript file into src/ folder: /src/pages/index.tsx
Clear .next folder rm -rf .next
Fix global css problem:
- mv globals.css global.css
- rm app/Layout.tsx
- Create page to import global.css:

pages/_app.tsx

import type { ReactElement, ReactNode } from 'react'
import type { NextPage } from 'next'
import type { AppProps } from 'next/app'

import '@/app/global.css';

export type NextPageWithLayout<P = {}, IP = P> = NextPage<P, IP> & {
  getLayout?: (page: ReactElement) => ReactNode
}
 
type AppPropsWithLayout = AppProps & {
  Component: NextPageWithLayout
}
 
export default function MyApp({ Component, pageProps }: AppPropsWithLayout) {
  return <Component {...pageProps} />
}

run dev to test

npm run dev

Install Cypress

useful links to try:

install deps

npm install cypress -D

open cypress - to configure e2e

npx cypress open
window modal - accept
select e2e testing > continue > start E2E testing in Chrome > Scaffold example specs > okay got it > Close browser

fix tsconfig baseUrl

Missing baseUrl in compilerOptions. tsconfig-paths will be skipped

update tsconfig.json baseUrl to .

open cypress - to configure components

- create component/Button/Button.tsx

interface Props {
  children: React.ReactNode;
}
export const Button = ({children}: Props) => <button>{children}</button>

npx cypress open
select component testing > choose nextjs > next step > continue > start component testing in Chrome > Scaffold example specs > okay got it >
Create your first spec - create from component (new) > Select Button > ok run spec > passes and works
Close browser

Setup Cypress coverage

follow guidelines

https://menaiala.medium.com/a-comprehensive-guide-to-cypress-integration-and-code-coverage-generation-in-nextjs-application-828838ba6cf3

npm install dependencies

npm install @testing-library/cypress @cypress/code-coverage @istanbuljs/nyc-config-typescript babel-plugin-istanbul babel-plugin-transform-import-meta nyc -D

npm install non security risk babel deps:

npm i babel-plugin-transform-class-properties@6.10.2 -D

add import to cypress/support/component.ts 3. import '@/app/global.css';

Cypress Coverage config

add import to: cypress/support/e2e.ts:

import '@cypress/code-coverage/support'

add import to: cypress/support/component.ts:

import '@cypress/code-coverage/support'

update cypress.config.ts

import { defineConfig } from "cypress";
import codeCover from "@cypress/code-coverage/task"; // if require doesn't work, just import it
export default defineConfig({
  env: {
    codeCoverage: {
        exclude: ["cypress/**/*.*", "*/**/*.cy.tsx"],
    },
  },
  e2e: {
    baseUrl: "http://localhost:3000",
    setupNodeEvents(on, config) {
      codeCover(on, config);
      return config;
    },
  },
  component: {
    devServer: {
      framework: "next",
      bundler: "webpack",
    },
    setupNodeEvents(on, config) {
      codeCover(on, config);
      return config;
    },
  },
});

Create file: .babel_

.babel_

module.exports = function (api) {
  api.cache(true);
  return {
    presets: ["next/babel"],
    env: {
      test: {
        plugins: ["babel-plugin-transform-import-meta", "transform-class-properties", "istanbul"],
      },
    },
  };
};

Create .nyrcrc

.nycrc

{
  "extends": "@istanbuljs/nyc-config-typescript",
  "all": true,
  "extension": [".ts", ".tsx", ".css"],
  "exclude": [
    "cypress/**",
    "**/__fixtures__/**",
    "**/__mocks__/**",
    "**/__tests__/**",
    "coverage/**"
  ],
  "reporter": ["text-summary", "json", "html"],
  "instrumenter": "nyc",
  "sourceMap": false
}

Create files /scripts/babel/backup.js and /scripts/babel/restore.js from :

https://github.com/alamenai/nextjs-cypress-code-coverage/blob/main/scripts/babel/restore.js

Add to package.json > scripts: {}

    "predev": "node scripts/babel/backup.js",
    "prebuild": "node scripts/babel/backup.js",
    "precypress-run-component": "node scripts/babel/restore.js",
    "precypress-open-component": "node scripts/babel/restore.js",
    "precypress-run-e2e": "node scripts/babel/restore.js",
    "precypress-open-e2e": "node scripts/babel/restore.js",
    "dev": "next dev",
    "build": "next build",
    "start": "next start",
    "lint": "next lint",
    "cypress-open-component": "cypress open --component",
    "cypress-open-e2e": "cypress open --e2e",
    "cypress-run-component": "cypress run --component --headless"
}

try running in two terminals

npm run dev
npm run cypress-open-component

error cypress/support/component.ts Module build failed (from ./node_modules/next/dist/build/babel/loader/index.js): SyntaxError: C:\baps\reactjs-projects\next-24-q3-with-cypress-coverage\cypress\support\component.ts: Missing semicolon. (10:7)

8 | 9 |

10 | declare global { | ^ 11 | namespace Cypress { 12 | interface Chainable {

add - '@babel/preset-typescript', to babelrc

module.exports = {
  presets: [["next/babel"],  '@babel/preset-typescript'],
};

Try

npx cypress cache clear
npx cypress install
npx cypress open
re add into cypress/support/component.ts

import '@cypress/code-coverage/support'

Try - creating cypress.d.ts

/// <reference types="cypress" />

declare global {
  namespace Cypress {
    interface Chainable {
      mount: typeof mount
    }
  }
}

declare namespace Cypress {
  interface Chainable {
    /**
     * Custom command to select DOM element by data-cy attribute.
     * @example cy.dataCy('greeting')
     */
    dataCy(value: string): Chainable<Element>;
  }
}

tsconfig.json

{"compilerOptions": {
    "types": ["cypress", "node"], // cypress.d.ts here Causes error at top of { of tsonfig.json - Cannot find
  },
  "include": ["next-env.d.ts", "**/*.ts", "**/*.tsx", ".next/types/**/*.ts", "cypress.d.ts"],
}

Try install `npm i ts-node source-map-support @types/cypress__code-coverage @types/cypres -D

inspiraller/nextjs-with-cypress-coverage