Search code examples
javascripttypescriptvue.jscypressistanbul

Coverage Reports with Instanbul JS, Vue JS, Vue CLI, Cypress e2e tests, and Typescript only showing a few files

I'm running a VueJS app written in Typescript and am testing it with Cypress e2e tests. I'd like to get coverage reports setup to see how much of my code I've covered with the tests so I attempted to integrate Istanbul JS. The documentation from Istanbul JS and Cypress makes this look totally doable, but nothing is ever as easy as it seems. Note the output below which only has 3 files reported on despite the fact that this app has hundreds of files and base Vue files like main.ts and router.ts are not even included. Where are the rest of the files and how do I get a full coverage report of my Vue app?

I have my project setup per the Cypress code coverage documentation with the following files:

babel.config.js

module.exports = {
    presets: [
        [
            '@vue/app',
            {
                useBuiltIns: 'entry',
            },
        ],
    ],
    plugins: [ 'istanbul' ],
}

nyc.config.js

module.exports = {
    extends: '@istanbuljs/nyc-config-typescript',
    all: true,
    extension: [
        '.vue',
        '.ts',
    ],
    include: [
        'src/**/*.{vue,ts}',
    ],
}

package.json

"scripts": {
    "e2e": "NODE_ENV=production vue-cli-service test:e2e --mode 'e2e'",
    "coverage": "npm run e2e -- --headless --spec tests/e2e/specs/example.test.js && npx nyc report --reporter=text"
},
"devDependencies": {
    "@cypress/code-coverage": "1.10.1",
    "@istanbuljs/nyc-config-typescript": "0.1.3",
    "@types/chai": "4.2.4",
    "@types/chart.js": "2.8.10",
    "@types/gtag.js": "0.0.3",
    "@types/mocha": "5.2.7",
    "@types/parse": "2.2.15",
    "@types/ramda": "0.26.33",
    "@types/stripe-v3": "3.1.9",
    "@vue/cli-plugin-babel": "4.0.5",
    "@vue/cli-plugin-e2e-cypress": "4.0.5",
    "@vue/cli-plugin-eslint": "4.0.5",
    "@vue/cli-plugin-typescript": "4.0.5",
    "@vue/cli-plugin-unit-mocha": "4.0.5",
    "@vue/cli-service": "4.0.5",
    "@vue/eslint-config-typescript": "4.0.0",
    "@vue/test-utils": "1.0.0-beta.29",
    "babel-eslint": "10.0.3",
    "babel-plugin-istanbul": "5.2.0",
    "chai": "4.2.0",
    "cypress": "3.6.0",
    "eslint": "6.6.0",
    "eslint-plugin-vue": "5.2.3",
    "node-sass": "4.13.0",
    "nyc": "14.1.1",
    "sass-loader": "8.0.0",
    "source-map-support": "0.5.16",
    "stylelint": "11.1.1",
    "stylelint-config-standard": "19.0.0",
    "ts-node": "8.4.1",
    "typescript": "3.6.4",
    "vue-template-compiler": "2.6.10",
    "webpack-bundle-analyzer": "3.6.0"
}

Cypress plugins/index.js

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

    return Object.assign({}, config, {
        integrationFolder: 'tests/e2e/specs',
        screenshotsFolder: 'tests/e2e/screenshots',
        videosFolder: 'tests/e2e/videos',
        supportFile: 'tests/e2e/support/index.js',
    })
}

Cypress support/index.js

import '@cypress/code-coverage/support'
import './commands'

Cypress.Screenshot.defaults({
    screenshotOnRunFailure: false,
})

------------------------------|----------|----------|----------|----------|-------------------|
File                          |  % Stmts | % Branch |  % Funcs |  % Lines | Uncovered Line #s |
------------------------------|----------|----------|----------|----------|-------------------|
All files                     |    20.24 |        0 |     4.44 |    19.87 |                   |
 Charts                       |    54.55 |        0 |        0 |       50 |                   |
  ScoreSummaryChart.vue       |    54.55 |        0 |        0 |       50 |    40,48,54,62,79 |
 Quizzes                      |    15.93 |        0 |        0 |    16.19 |                   |
  QuizView.vue                |    15.93 |        0 |        0 |    16.19 |... 13,416,417,418 |
 Tiles                        |    22.73 |        0 |    15.38 |    21.95 |                   |
  QuizOverviewTile.vue        |    22.73 |        0 |    15.38 |    21.95 |... 71,175,185,188 |
------------------------------|----------|----------|----------|----------|-------------------|
Solution

    1. add @istanbuljs/nyc-config-typescript to your devDependencies

    2. babel.config.js

    module.exports = {
  presets: ['@vue/cli-plugin-babel/preset'],
  plugins: [
    ['babel-plugin-istanbul', {
      extends: '@istanbuljs/nyc-config-typescript',
      extension: ['.ts', '.tsx', '.js', '.vue']
    }]
  ]
}

    1. delete the nyc.config.js file

    2. delete node_modules/.cache

    3. restart your server