nyc coverage shows incorrect line numbers

Question

My group is building an application with the following front-end stack:

• VueJS
• Webpack 2.2
• AvaJS (for unit testing)
• nyc (Istanbul) for test coverage

We started off with vue-cli to create a Webpack template for our project. For the most part everything has gone smoothly. We are able to use Ava for unit testing separate .vue component files using vue-node However there is a problem with the test coverage report generated through nyc. Below is a snippet of our package.json file with the relevant nyc and ava sections defined:

"nyc": {
    "exclude": [
        "build",
        "config",
        "static",
        "tests"
    ],
    "extension": [
        ".js",
        ".vue"
    ]
},
"ava": {
    "require": [
        "./tests/unit/helpers/setup.js",
        "ignore-styles"
    ]
},

All the tests pass successfully. The nyc report shows the following:

The problem is that the line #s listed under Uncovered Lines don't exist. The .vue file is only 402 lines long so I can't figure out where these line #s in the nyc report are coming from.

Any help would be appreciated and thank you in advance.

Answer 1

I had the same issue, you need to install babel-plugin-istanbul that instruments your code with Istanbul coverage. This plugin is in charge to get the right sourceMap for your code. So you need to disable instrument and sourceMap from nyc.

npm install --save-dev babel-plugin-istanbul

In the .babelrc file (generally found in the root folder of your project,) add the following so it only gets used by your test environment:

{
  "env": {
    "test": {
      "plugins": [ "istanbul" ]
    }
  }
}

Then disable instrument and sourceMap from nyc. babel-plugin-istanbul will take care of it. And replace your "require": "nyc" with "require": "babel-register".

"nyc": {
  "exclude": [
    "build",
    "config",
    "static",
    "tests"
  ],
  "extension": [
    ".js",
    ".vue"
  ],
  "require": [
    "./tests/unit/helpers/setup.js",
    "ignore-styles",
    "babel-register"
  ],
  "sourceMap": false,
  "instrument": false
},

Now you should be able to get coverage with nyc.

NODE_ENV=test nyc ava

Sources:

1. https://www.npmjs.com/package/babel-plugin-istanbul
2. https://github.com/istanbuljs/nyc#use-with-babel-plugin-istanbul-for-babel-support