Cypress Test Coverage (Create-react-app CRA Typescript)-CodePudding

I've been trying to set up Cypress code covereage based on their documentation, but it doesnt cover CRA (Create-react-app) in 2022 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 crom cypress:

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

Please let me know if I'm doing anything incorrectly! thank you so much.

CodePudding user response：

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 @bahmutov/cypress-code-coverage

cypress.config.js

import { defineConfig } from "cypress";
export default defineConfig({
  e2e: {
    ...
  },
  component: {
    setupNodeEvents(on, config) {
      require('@bahmutov/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