Code coverage in vue-test-utils-mocha-webpack-example only covers JavaScript not vue template file

[dbschwartz]

Hello,

I was able to run code coverage to html by changing the test command in my scripts to be:

//package.json
{...
scripts: {
....
"test": "cross-env NODE_ENV=test nyc --reporter=lcov --reporter=text mocha-webpack --webpack-config webpack.config.js --require test/setup.js test/**/*.spec.js"
...
}

and in webpack.config.js changing module.exports.devtool to 'eval' from 'inline-cheap-module-source-map'.

However, when I look at the html coverage it looks like it only covers the Javascript part of the .vue file and not the template:

I noticed this was the vase in vue-test-utils-karma-example as well. I tried running coverage in vue-test-utils-jest-example but all the coverage results are 0% for some reason. Any help would be greatly appreciated! Thanks!

[eddyerburgh]

Thanks, would you be able to make a PR with the fix you found?

In regards to the sourcemap. vue-loader doesn't create source maps for the template block.

[dbschwartz]

Hey Edd,

Absolutely! I have a question though. Do you know if source maps for the template block are in the works for code coverage in Jest or mocha-webpack? My company is pursuing Vue unit testing but it seems difficult to navigate this space without template code coverage since it is such a major part of the Vue SFC component. I also tried to get coverage going in the vue-test-utils-jest-example but I seemed to get only 0% in despite passing tests.

Any input would so much appreciated!

Thank you so much, Dave

[nothingismagick]

@eddyerburgh - so what is the suggested approach to get the template block covered?

[nothingismagick]

@dbschwartz - did you find out anything regarding this? I would love to know, because at the moment I am building a suite of test-runners into "quasar-cli" (ada, istanbul/nyc, jest, mocha, mocha-webpack, tap, karma, cypress, nightwatch AND lighthouse) and would love to know if any one of them dives into the sourcemaps...

[dbschwartz]

@nothingismagick, this is actually part of a greater problem. Notice in the screenshot below, I am inspecting the sourcemap of the Vue SFC file with Chrome Dev Tools but there is no clickable breakpoint for the template part even though it is classic breakpoint material, a conditional expression. The template compiler in Vue Loader doesn't seem to provide sourcemap information for breakpoints and code coverage and this is what is used in the mocha-webpack set up. This would probably need to go back to the Vue Loader team, if it can in fact be implemented. Vue Jest is what is used in lieu of Vue Loader for testing within Jest, but I can't seem to get coverage to run to output in that environment at all. @eddyerburgh does coverage and specifically coverage for the template portion work with Vue Jest?

[nothingismagick]

This seems like an excellent question to ask at the Vue Contributor Day next week. https://medium.com/@thisdotmedia/introducing-vue-contributor-days-2a281f16042d

[folmert]

Is it even possible to have template block covered in single file components? It seems as if Coverage reporter ignores <template> completely and checks only what's in the <script> tag.