How to Add Code Coverage to a VueJS Project (Updated for 2020)

Because a lot of the guides I read were from 2018 and didn’t work.

It has all been one elaborate cover up!

I enjoy using code coverage tools. It promotes developer accountability and serves as a checklist for test cases that may be unnecessary or overlooked. It has some gamification elements as well, with the colors and percentages, that make my brain’s reward center squeal with delight.

What isn’t fun about code coverage was trying to figure out how to set it up correctly. I read so many articles and Stack Overflows that said the same wrong things. Here is what worked for me, and will hopefully work for you (for at least the next 6 months or so *wink*).

My Setup

• Vue 2
• Vue Test Utils
• MochaJS
• ChaiJS
• BabelJS
• Yarn

Installation

I had to visit the nyc github page to get the latest package names. So if this doesn’t work, just read the instructions on their page.

yarn add -D nyc @istanbuljs/nyc-config-babel babel-plugin-istanbul

Update and Create Config Files

Update .babelrc

{
  "presets": [
    "@babel/env",
    "@vue/app"
  ],
  "plugins": [
    "@babel/plugin-transform-runtime",
    "istanbul"
  ]
}

Create .nycrc. There were a ton of cool options like how to set coverage minimums. Just look at the nyc github page for more details.

{
  "extends": "@istanbuljs/nyc-config-babel",
  "extension": [".js", ".ts", ".vue"]
}

Add Package Target and Run

Optional: Add a target to the scripts section of your package JSON to run code coverage.

To run tests with code coverage, prepend nyc to your test command.

...
"scripts": {
 ...
 "coverage:unit": "nyc vue-cli-service test:unit",
 ...
}
...

Run it!

yarn coverage:unit

Hope that helps!