Cypress 测试覆盖率（Create-react-app CRA Typescript）

Question

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

Answer 1

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