Add code coverage in Jest in Vue project

Reading Time: < 1 minute

Loading

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