Get code coverage from Cypress with babel, nyc and istanbul plugin?

Question

For a React/Redux project I use Cypress to test the UI. I need to get code coverage from thoses tests to have the details in Sonar (but that's another story).

So I began reading the docs from Cypress: https://docs.cypress.io/guides/tooling/code-coverage.html

I followed the instructions and found the differents plugins but nothing work. After running Cypress tests I have no coverage results and when I try to run the server with instrumented code on transpilation and try to get window.__coverage__ it's undefined.

So here is my configuration.

My devDep and NYC conf in package.json:

"devDependencies": {
    "@cypress/code-coverage": "^1.8.0",
    "babel-cli": "^6.26.0",
    "babel-plugin-istanbul": "^5.2.0",
    "babel-plugin-react-intl": "^2.4.0",
    "babel-plugin-transform-class-properties": "^6.24.1",
    "babel-preset-react-app": "^3.1.2",
    "cross-env": "^5.2.0",
    "cypress": "3.1.0",
    "istanbul-lib-coverage": "^2.0.5",
    "jest-junit-reporter": "^1.1.0",
    "junit": "^1.4.9",
    "nyc": "^14.1.1",
    "react-test-renderer": "^16.3.0"
     [...]
},
"scripts": {
    "start": "react-scripts start",
    [...]
    "test:unit:local": "react-scripts test --env=jsdom .*_test.js",
    "test:unit": "npm run test:unit:local -- --ci --coverage --testResultsProcessor ./node_modules/jest-junit-reporter",
    "test:integ:local": "cypress run --reporter junit",
    "test:integ": "start-server-and-test start http://localhost:3000 test:integ:local",
    "test": "cross-env NODE_ENV=test && npm run test:unit && npm run test:integ"
},
"nyc": {
    "sourceMap": false,
    "instrument": false
}

My .babelrc file:

{
"presets": ["@babel/preset-react"],
"plugins": [
    [ "react-intl", {
        "messagesDir": "./src/messages",
        "extractSourceLocation": true
    }],
    "transform-class-properties",
    "istanbul"
],
"env": {
    "test": {
      "plugins": [ "transform-class-properties", "istanbul" ]
    }
  }
}

My \cypress\support\index.js contains this line :

import '@cypress/code-coverage/support'

And here is my \cypress\plugins\index.js:

module.exports = (on, config) => {
    on('task', require('@cypress/code-coverage/task'))
    on('file:preprocessor', require('@cypress/code-coverage/use-babelrc'))
    return config
}

So I expect to have a result like you can see on the Cypress docs. The website is generated but the files containing coverage reports are empty.

And I don't understand what's wrong in my configuration.

Hyphenate

Hey, Corentin, do you use unejected react-scripts? In that case your .babelrc file is not going to be used. Luckily you can use github.com/cypress-io/instrument-cra to instrument your app even for react-scripts start case – Spadiceous

Hey Gleb! I think it's unejected but that's wierd because the .babelrc file seems to be used when I extract messages from the JSX for React-Intl. But thanks for the idea to instrument with CRA. :) – Hyphenate

@CorentinDaillie Did you get any solution? I am facing the same issue. The coverage report is empty. github.com/cypress-io/instrument-cra also giving error. – Cutoff

@LAXITKUMAR No same as you but I'm still searching a solution for this. The coverage report is allways empty and nothing is detected under window.__coverage__. – Hyphenate

Answer 1

Try the following line:

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

Rangy

Answer 2

I faced this issue too. Wasn't able to get code coverage. Downgrading nyc version from 14.x.x to 13.x.x fixed the problem, as mentioned here.

Redmer