Cypress Test Coverage (Create React App TypeScript)

Question

I've been trying to set up Cypress code coverage based on their documentation, but it doesn't cover CRA (Create React App) with TypeScript, so I've been having some trouble.

My folder structure is:

root/cypress/support  
root/cypress/plugins  
root/cypress/components  
root/cypress/e2e

Contents of support/index.js:

import "@cypress/code-coverage/support";

contents of plugins/index.js:

module.exports = (on, config) => {
  require("@cypress/code-coverage/task")(on, config);
  return config;
};

Cypress.config.ts:

import { defineConfig } from "cypress";
export default defineConfig({
  e2e: {
    setupNodeEvents(on, config) {},
  },
  component: {
    supportFile: "cypress/support/index.js",
    supportFolder: "cypress/support",
    fixturesFolder: "cypress/fixtures",
    devServer: {
      framework: "create-react-app",
      bundler: "webpack",
    },
  },
});

Spec file:

import * as React from "react";
import App from "../../src/app/App";
import { mount } from "cypress/react";

describe("App", function () {
  it("Should create <App>", () => {
    mount(<App />);
    cy.get("[data-testid=AppContainer]").should("exist");
  });
});

Dev dependencies and scripts:

  "devDependencies": {
    "@cypress/code-coverage": "^3.10.0",
    "@cypress/instrument-cra": "^1.4.0",
    "@cypress/webpack-dev-server": "^2.0.0",
    "@svgr/webpack": "^6.2.1",
    "@types/eslint": "^8.4.5",
    "@types/eslint-config-prettier": "^6.11.0",
    "@types/eslint-plugin-prettier": "^3.1.0",
    "@types/prettier": "^2.6.3",
    "@typescript-eslint/eslint-plugin": "^5.30.5",
    "@typescript-eslint/parser": "^5.30.5",
    "cypress": "^10.3.1",
    "eslint": "^8.19.0",
    "eslint-config-prettier": "^8.5.0",
    "eslint-plugin-prettier": "^4.2.1",
    "gh-pages": "^4.0.0",
    "istanbul-lib-coverage": "^3.2.0",
    "nyc": "^15.1.0",
    "prettier": "^2.7.1",
    "react-scripts": "^5.0.1",
    "start-server-and-test": "^1.14.0",
    "vite": "^2.7.0"
  },
  "scripts": {
    "start": "react-scripts -r @cypress/instrument-cra start",
    "build": "react-scripts build",
    "e2e": "cypress open",
    "cypress:start:app": "SET BROWSER=NONE&& react-scripts -r @cypress/instrument-cra start",
    "cypress:start:wait": "start-server-and-test cypress:start:app http://localhost:3000/mcswf",
    "cypress:open": "npm run cypress:start:wait -- \"cypress open\"",
    "cypress:run": "npm run cypress:start:wait -- \"cypress run\"",
    "eject": "react-scripts eject",
    "predeploy": "npm run build",
    "deploy": "gh-pages -b GitHubPage -d build"
  },

Error from Cypress:

log⚠️ Code coverage tasks were not registered by the plugins file. See support issue for possible workarounds. [@cypress/code-coverage]

Fody · Accepted Answer · 2025-01-06 16:26:48Z

2

Since you are using Cypress v10, the plugin should be set up in cypress.config.js. plugins/index.js is ignored in the latest Cypress version.

Also, there's a separate (new) distribution for component code coverage. Install it like this:

npm i -D @cypress/cypress-code-coverage

cypress.config.js

import { defineConfig } from "cypress";
export default defineConfig({
  e2e: {
    ...
  },
  component: {
    setupNodeEvents(on, config) {
      require('@cypress/cypress-code-coverage/plugin')(on, config)
      return config
    },
    supportFile: "cypress/support/index.js",
    supportFolder: "cypress/support",
    fixturesFolder: "cypress/fixtures",
    devServer: {
      framework: "create-react-app",
      bundler: "webpack",
    },
  },
});

This and other details here Component Code Coverage in Cypress v10

edited Jan 6 at 16:26

user21911861

answered Jul 26, 2022 at 1:45

Fody

21.2k4 gold badges39 silver badges57 bronze badges

Sign up to request clarification or add additional context in comments.

1 Comment

Patrick Over a year ago

Perfect, I also changed anything referencing the @Cypress/code-coverage package to the @bahmutov/cypress-code-coverage, and it's working great! Thanks for your help.

Collectives™ on Stack Overflow

Cypress Test Coverage (Create React App TypeScript)

1 Answer 1

1 Comment

Your Answer

Hot Network Questions

Collectives™ on Stack Overflow

1 Answer 1

1 Comment

Your Answer

Sign up or log in

Post as a guest

Related