Home/ Questions/Q 4631
Answered
Anonymous
Asked: 2023-02-03T06:59:45+00:00

Add cypress code coverage to react project created without cra

I have React project created without cra. I need to add code coverage for cypress e2e tests.

In app created with cra I do the following instructions for add code coverage. And add this line of code in package.json

"start": "react-scripts -r @cypress/instrument-cra start",

This work’s well with cra.
But in app without cra I can’t add react-scripts or @cypress/instrument-cra for get code coverage information.

How to realize this?

My current configuration ->

babel.config.json

{
  "presets": [
    "@babel/preset-env",
    [
      "@babel/preset-react", 
      {
        "runtime": "automatic"
      }
    ],
    "@babel/preset-typescript"
  ],
  "plugins": [
    "istanbul",
    "transform-class-properties",
    [
      "@babel/plugin-transform-runtime",
      {
        "useESModules": true,
        "regenerator": false
      }
    ]
  ],
  "env": {
    "development": {
      "plugins": ["istanbul", "transform-class-properties"]
    },
    "test": {
      "presets": [
        ["@babel/preset-env", {
          "targets": "current node"
        }]
      ]
    }
  }
}

e2e.ts

// Import commands.js using ES2015 syntax:
import "@cypress/code-coverage/support";
import './commands'

// Alternatively you can use CommonJS syntax:
// require('./commands')

Cypress.on('uncaught:exception', () => {
  /** 
   * Returning false here prevents Cypress from 
   * failing the test when one of requests fails
   */ 
  return false
});

package.json

  "scripts": {
    "start": "webpack-cli serve --port 9007 --env currentEnv=local",
    "build": "webpack --mode production",
    "serve": "serve dist -p xxxx",
    "clean": "rm -rf dist",
    "test": "cross-env BABEL_ENV=test jest",
    "cy:open": "cypress open",
    "cy:run": "cypress run",
    "pretest:e2e:run": "npm run build",
    "test:e2e:run": "start-server-and-test start http://localhost:9000 cy:run",
    "test:e2e:dev": "start-server-and-test start http://localhost:9000 cy:open",
    "watch-tests": "cross-env BABEL_ENV=test jest --watch",
    "check:coverage": "nyc report --reporter=text-summary --check-coverage",
    "prepare": "husky install"
  },
  // ...
  "nyc": {
    "all": true,
    "excludeAfterRemap": true,
    "check-coverage": true,
    "extension": [
      ".tsx"
    ],
    "include": [
      "src/views/**/*.tsx"
    ]
  }

cypress.config.ts

export default defineConfig({
  e2e: {
      setupNodeEvents(on, config) {
        // implement node event listeners here,
        require("@cypress/code-coverage/task")(on, config);

        // include any other plugin code...

        // It's IMPORTANT to return the config object
        // with any changed environment variables
        return config;
      },
    video: false,
    baseUrl: "http://localhost:3000/",
  },
});

Currently, in browser after each test does finished I get the following error

Could not find any coverage information in your application by looking at the window coverage object. Did you forget to instrument your application? See code-coverage#instrument-your-application [@cypress/code-coverage]

add cypress code coverage to react project created without cra
Share

1 Answer

  1. Best Answer

    To add code coverage to a React project created without Create React App (CRA), you need to instrument the source code by running it through the Babel plugin “istanbul”. Here are the steps:

    1. Install required packages:

    npm install istanbul babel-core babel-loader --save-dev

    1. Add a new webpack rule to your webpack config file, which is usually located at webpack.config.js or webpack.config.babel.js, for processing files through the istanbul plugin:

    module: {
    rules: [
    {
    test: /\.(js|jsx|ts|tsx)$/,
    use: {
    loader: 'babel-loader',
    options: {
    plugins: ['istanbul'],
    },
    },
    exclude: /node_modules/,
    },
    // ...
    ],
    }

    1. Add the start-server-and-test package to your project:

    npm install start-server-and-test --save-dev

    1. In your cypress.config.ts, add the following code to include the @cypress/code-coverage/task:

    import { defineConfig } from "cypress/types/index";

    export default defineConfig({
    e2e: {
    setupNodeEvents(on, config) {
    require("@cypress/code-coverage/task")(on, config);
    return config;
    },
    video: false,
    baseUrl: "http://localhost:3000/",
    },
    });

    1. In your e2e.ts, include the following code to use the @cypress/code-coverage/support:

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

    1. Add the following script to your package.json:

    "test:e2e:run": "start-server-and-test start http://localhost:9000 cy:run",

    1. Run your e2e tests with the following command:

    npm run test:e2e:run

    After these steps, you should be able to see the code coverage information in the cypress test runner.

    • 0

Leave an answer

You must login to add an answer.

Need An Account,