Add code coverage in Jest in Vue project


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": [
    ...  // Delete the rest for brevity

3) Append the following configurations in jest configuration

"collectCoverage": true,
"collectCoverageFrom": [
 "coverageDirectory": "coverage/",
 "coverageReporters": [

Set collectionCoverage to true to enable code coverage.
coverageDirectory indicates code coverage outputs are generated in coverage/ directory.

"collectCoverageFrom": [

Collect code coverage data from all Vue components except src/App.vue

"coverageReporters": [

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/


Import bootstrap-sass in vuejs

1) yarn add bootstrap bootstrap-sass node-sass sass-loader

yarn add boostrap bootstrap-sass node-sass sass-loader

2) Set $icon-font-path to find font files and import variable.scss and _bootstrap.scss

  1. $icon-font-path: "~bootstrap-sass/assets/fonts/bootstrap/";
  2. @import "~bootstrap-sass/assets/stylesheets/bootstrap/variables";
  3. @import "~bootstrap-sass/assets/stylesheets/_bootstrap.scss";

3) In main.js, require(‘./assets/sass/main.scss’);
4) type yarn serve to launch application in development mode. Index page should open at url http://localhost:8080.

yarn serve

// add any variables you want to override here
// ———
// ———
$icon-font-path: ‘~bootstrap-sass/assets/fonts/bootstrap/’;
@import ‘~bootstrap-sass/assets/stylesheets/bootstrap’;