Cypress Test Coverage (Create React App TypeScript)

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]

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