jest-vue-preprocessor: Code coverage is incorrect
expected 100%
, but only got 93.75%
:

P.S.
- jest:
^19.0.2
- jest-vue-preprocessor:
^0.2.0
, - Node:
7.8
// Hello.spec.js
import Vue from 'vue'
import Hello from '@/components/Hello'
describe('Hello.vue', () => {
it('should render correct contents', () => {
const Constructor = Vue.extend(Hello)
const vm = new Constructor().$mount()
expect(vm.$el.querySelector('.hello h1').textContent)
.toBe('Welcome to Your Vue.js App')
})
})
// package.json
"jest": {
"collectCoverage": true,
"moduleNameMapper": {
"src/components/([^\\.]*)$": "<rootDir>/src/components/$1.vue",
"^vue$": "vue/dist/vue.common.js",
"src/([^\\.]*)$": "<rootDir>/src/$1.vue",
"(.*)/(.*)$": "$1/$2.vue"
},
"moduleFileExtensions": [
"js",
"vue"
],
"transform": {
"^.+\\.js$": "<rootDir>/node_modules/babel-jest",
".*\\.(vue)$": "<rootDir>/node_modules/jest-vue-preprocessor"
}
},
About this issue
- Original URL
- State: closed
- Created 7 years ago
- Reactions: 5
- Comments: 19 (11 by maintainers)
Commits related to this issue
- feat: add sourcemap support in order to have readable coverage reports fix https://github.com/vire/jest-vue-preprocessor/issues/15 — committed to sumcumo/jest-vue-preprocessor by Xiphe 7 years ago
- test: raise coverage of fixtures to 100% this implicitly ensures that souce maps are working ref https://github.com/vire/jest-vue-preprocessor/issues/15 — committed to sumcumo/jest-vue-preprocessor by Xiphe 7 years ago
- docs(readme): add mapCoverage to example installation ref https://github.com/vire/jest-vue-preprocessor/issues/15 — committed to sumcumo/jest-vue-preprocessor by Xiphe 7 years ago
- Support sourcemaps (#35) * feat: add sourcemap support in order to have readable coverage reports fix https://github.com/vire/jest-vue-preprocessor/issues/15 * test: raise coverage of fixtur... — committed to vire/jest-vue-preprocessor by Xiphe 7 years ago
Hi, I’ve spent a lot of time on the wrong coverage values and the spawn of the undefined file on my root folder ; and I’ve finally figured out why.
TL;DR
Remove the plugin
istanbul
from your.babelrc
file.The cause
When you generate a project from the vue-webpack template, the babel configuration automatically includes the istanbul plugin for the test env. This plugin is mandatory when your want the coverage with mocha and chai. However, Jest comes with istanbul and will add hook functions (needed by istanbul) on the transpiled code produced by Babel. Babel is also configured to add hook functions due to the istanbul plugin. That’s why the coverage computed by jest’s istanbul is not your actual code but your code + the babel’s istanbul code! As the istanbul babel plugin is not needed by jest you can remove it from the .babelrc file.
Hope it will save you, hours of search.
I removed babel from my list of plugins to avoid it over-taking jest’s coverage and I added
mapCoverage: true
to my jest config. What happened is : the same line appears as “untested” but also now one of my tests doesn’t show up at all in the coverage report. 🤔QuestionList.vue:L19
and it’s spec:
Why is L19 of QuestionsList reported as uncovered and why’s Question.vue disappearing from the report when Is add
mapCoverage: true
?To pass source maps to Jest you return an object like this from
process
:For the source map to be used by Jest, you need to set
mapCoverage
totrue
- https://facebook.github.io/jest/docs/configuration.html#mapcoverage-booleanYou can generate a sourcemap using the source-map module. As you identified, if there are existing source maps you need to combine these with the new source map you generate.
You can see this done in vueify - https://github.com/vuejs/vueify/blob/master/lib/compiler.js#L187
@Xiphe every PR is welcome here, when you have time you can dig into the approach vueify is using
That would be awesome! Let me know when you need any help or rather would like a PR instead of own digging 😃
in the jest.conf.js work fine
//mapCoverage: true, testURL: ‘http://localhost’
@DarynHolmes try using this option http://facebook.github.io/jest/docs/en/configuration.html#collectcoveragefrom-array (check the webpack vue-cli template config , probably you can just copy paste it: https://github.com/vuejs-templates/webpack/blob/develop/template/test/unit/jest.conf.js )
Disclaimer: typescript sourcemaps are still off when I tested it. Not sure how to fix that I propose someone with more typescript know how looks into that.
I gave this another try. The spike of @johnsardine works quite nice (once
mapCoverage
is enabled 😬 )Another problem is that
generateOutput
is shifting the source mapping so I wrote a babel inline plugin for that.My current state is really dirty but works for my usecase
https://github.com/sumcumo/jest-vue-preprocessor/tree/support-sourcemaps
Following things need to be done before I open a PR
@lyyourc I also have this problem. I was able to get it working, kind of, but then the coverage does not match 100%.
I have created a fork https://github.com/johnsardine/jest-vue-preprocessor that provides a source map to the jest transform
I also created an installation with that package https://github.com/johnsardine/vue-jest
Can you try it and give some feedback?
Perhaps the author of this repo already has an idea of how to fix this