Github: https://github.com/railsstudent/vue-2048
1) Assume Vue project is created by vue-cli 3 and unit testing is enabled
2) Add code coverage in jest configuration in package.json
"jest": {
"moduleFileExtensions": [
"js",
"jsx",
"json",
"vue"
]
... // Delete the rest for brevity
}
3) Append the following configurations in jest configuration
"collectCoverage": true,
"collectCoverageFrom": [
"src/**/*.vue",
"!src/App.vue"
],
"coverageDirectory": "coverage/",
"coverageReporters": [
"lcov"
]
Set collectionCoverage to true to enable code coverage.
coverageDirectory indicates code coverage outputs are generated in coverage/ directory.
"collectCoverageFrom": [
"src/**/*.vue",
"!src/App.vue"
]
Collect code coverage data from all Vue components except src/App.vue
"coverageReporters": [
"lcov"
]
Use lcov code coverage reporter. Default value is [“json”, “lcov”, “text”] array and any istanbul reporter is accepted.
4) Run all unit tests and gather code coverage data automatically.
npm run test:unit
5) Install http-server and use local development server to serve code coverage files in browser
with npm
npm install http-server --save-dev o
with yarn
yarn add http-server -D
6) Add npm script command to start http server with base directory coverage/
"scripts": {
"serve:coverage": "http-server coverage/lcov-report -p 8888",
}
Type the following command in the terminal
yarn serve:coverage
and navigate to http://localhost:8888/
Reference:
https://jestjs.io/docs/en/configuration#collectcoverage-boolean