I have a VueJS app written in Typescript that I am testing with Cypress e2e tests. I wanted to set up coverage reports using Istanbul JS to track how much of my code is covered by the tests. The integration process seemed straightforward based on the documentation from Istanbul JS and Cypress, but it's proving to be more challenging than expected. Below is the output showing coverage data for only 3 files, despite the app consisting of hundreds of files where critical base Vue files like main.ts and router.ts are missing. How can I generate a comprehensive coverage report for my entire Vue app?
To follow the Cypress code coverage guidelines, I have included the following files in my project:
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": { //List of dependencies }
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 |
------------------------------|----------|----------|----------|----------|-------------------|