Add code coverage in Jest in Vue project

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