ERROR: Coverage for lines (0%) does not meet global threshold (90%) Cypress

Question

I have a problem with my coverage of my cypress tests E2E. I think I have a problem of configuration or i'm missing a small thing because my coverage is 0% and I have a lot of good tests that cover a lot of files (18 tests) so it is impossible to have a 0% score. My project is in React, with Typescript and I used Yarn instead of NPM for all my installations.

The conf of my package.json script:

"cypress": "nyc --all cypress run", "cypress:open": "nyc cypress open", "coverage": "nyc report --reporter=html && nyc report --reporter=text-summary --report-dir=coverage_e2e",

The conf of my .nycrc :

``` `{ "include": ["src/**/**/**/*.{ts,tsx,js,jsx}", "instrumented/**"], "exclude": ["src/tests/**/*.ts"], "reporter": ["lcov", "text-summary"], "extends": "@istanbuljs/nyc-config-typescript", "all": true, "check-coverage": true, "excludeAfterRemap": false }` ```

The conf of my cypress.config.ts :

</code>

`
import registerCodeCoverageTasks from '@cypress/code-coverage/task';
import {defineConfig} from 'cypress';

export default defineConfig({
    e2e: {
        setupNodeEvents(on, config) {
            // implement node event listeners here

            registerCodeCoverageTasks(on, config);
        },
    },
    viewportHeight: 720,
    viewportWidth: 1080,
    defaultCommandTimeout: 10000,
    video: false,
});`
</code>

The conf cypress/plugins/index.ts :

<code>
`const codeCoverageTask = require('@cypress/code-coverage/task');

module.exports = (on, config) => {
    // Ajoutez le task de code coverage à l'événement "on"
    codeCoverageTask(on, config);

    // Retournez l'objet de configuration modifié
    return config;
};`
</code>

The conf of my cypress/support/index.ts :

<code>
`// cypress/support/index.js
import '@cypress/code-coverage/support';

// cypress/plugins/index.js
module.exports = (on, config) => {
    on('task', require('@cypress/code-coverage/task'));
};`

</code>

<code>
`The result: 
ERROR: Coverage for lines (0%) does not meet global threshold (90%)

=============================== Coverage summary ===============================
Statements   : 0% ( 0/443 )
Branches     : 0% ( 0/34 )
Functions    : 0% ( 0/135 )
Lines        : 0% ( 0/364 )`
</code>

I followed this guide : https://github.com/cypress-io/code-coverage I choose to not to use babel but istanbul (nyc)

I use:

Node ^18.10.0 "@types/node": "^20.3.2", "@cypress/code-coverage": "^3.10.7", "cypress": "^12.16.0", @istanbuljs/nyc-config-typescript": "^1.0.2",

Answer 1

Okay I finally found a solution with a new configuration: I used only 2 modules:

• @cypress/code-coverage
• @cypress/instrument-cra.

//cypress/plugins/index.js
module.exports = (on, config) => {
    on('task', require('@cypress/code-coverage/task'))
} 

//support/index.tsx (very important step) 
import '@cypress/code-coverage/support';

after(() => {
    cy.task('coverageReport');
}); 

//cypress/support/e2e.ts (add this import)
import '@cypress/code-coverage/support'; 

//create a .nycrc file :
{
    "include": ["src/**/**/**/*.{ts,tsx,js,jsx}"],
    "exclude": ["src/tests/**/*.ts"],
    "extension": [".ts", ".js", ".tsx"],
    "reporter": ["html", "text-summary"],
    "all": true,
    "check-coverage": true,
    "excludeAfterRemap": false,
    "report-dir": "./cypress/coverage"
}

//cypress.config.ts:
import {defineConfig} from 'cypress';

// votre autre configuration Cypress ici

export default defineConfig({
    e2e: {
        setupNodeEvents(on, config) {
            // implement node event listeners here
            require('@cypress/code-coverage/task')(on, config);
            return config;
        },
    },
    env: {
        codeCoverageTasksRegistered: true,
    },
    viewportHeight: 720,
    viewportWidth: 1080,
    defaultCommandTimeout: 10000,
    video: false,
});

//package.json
"scripts": {
    "dev": "react-scripts -r @cypress/instrument-cra start",
    ...
    "cypress": "nyc cypress run",
    ...ActiveXObject
    "cypress:open": "nyc -all cypress open",

},

launch your tests with istanbul :
nyc cypress run

and it's create a file coverage on your cypress folder !! :)

(You can also don't use instrument-cra for instrument and instrument with nyc

// an example:
yarn nyc instrument --compact=false ./src ./instrumented
cp ./src/components/styles/animations.css ./instrumented/components /styles/animations.css && cp ./src/tests/mock.ts ./instrumented/tests   /mock.ts
rm -rf ./src
mv ./instrumented ./src
yarn lint --fix
yarn build