mapCoverage:true produces misleading Line in coverage report (wrong sourcemaps)

[gkatsanos]

By the way, vue-jest works fine. So please maybe either drop this plugin or merge it with vue-jest. Pity for devs to lose time trying to debug this.

I'm submitting a ... (check one with "x")

[x] bug report
[ ] feature request
[ ] support request

Current behavior
Report is not 100%

Expected behavior

It should be 100% and I should see two components

Minimal reproduction of the problem with instructions
I removed instabul from my list of plugins as advised in order to try to fix wrong code coverage and 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. 🤔

~/v/bcgdv-voting (master|●2✚3…) $ yarn list vue jest jest-vue-preprocessor babel-jest
yarn list v1.0.2
├─ babel-jest@21.2.0
├─ jest-vue-preprocessor@1.3.1
├─ jest@21.2.1
└─ vue@2.5.2
✨  Done in 0.90s.

  "jest": {
    "moduleNameMapper": {
      "^vue$": "vue/dist/vue.common.js",
      "@(.*)$": "<rootDir>/src/$1"
    },
    "moduleFileExtensions": [
      "js",
      "vue"
    ],
    "mapCoverage": true,
    "transform": {
      "^.+\\.js$": "<rootDir>/node_modules/babel-jest",
      ".*\\.(vue)$": "<rootDir>/node_modules/jest-vue-preprocessor"
    }
}

~/v/bcgdv-voting (master|●2✚3…) $ yarn test
yarn test v1.0.2
$ jest --coverage
 PASS  src/components/Question/Question.spec.js
 PASS  src/components/QuestionsList/QuestionsList.spec.js

Test Suites: 2 passed, 2 total
Tests:       3 passed, 3 total
Snapshots:   2 passed, 2 total
Time:        1.551s
Ran all test suites.
--------------------------|----------|----------|----------|----------|----------------|
File                      |  % Stmts | % Branch |  % Funcs |  % Lines |Uncovered Lines |
--------------------------|----------|----------|----------|----------|----------------|
All files                 |    36.59 |    33.33 |      6.9 |    36.59 |                |
 api                      |    29.41 |        0 |        0 |    29.41 |                |
  index.js                |    29.41 |        0 |        0 |    29.41 |... 25,30,31,33 |
 components/QuestionsList |      100 |       50 |      100 |      100 |                |
  QuestionsList.vue       |      100 |       50 |      100 |      100 |             19 |
 store                    |    34.43 |      100 |     6.25 |    34.43 |                |
  actions.js              |       25 |      100 |        0 |       25 |... 39,40,41,43 |
  getters.js              |      100 |      100 |      100 |      100 |                |
  index.js                |      100 |      100 |      100 |      100 |                |
  mutation-types.js       |      100 |      100 |      100 |      100 |                |
  mutations.js            |        0 |      100 |        0 |        0 |... 35,36,37,40 |
--------------------------|----------|----------|----------|----------|----------------|
✨  Done in 3.83s.

QuestionList.vue:L19

      <v-btn
          large
          color="primary"
          :block="$vuetify.breakpoint.xsOnly"
          v-if="!maxPagesReached"
          @click="$store.dispatch('requestItems')">
        Load More Questions</v-btn>

and it's spec:

store.dispatch = jest.fn();
import Vue from 'vue';
import { mount } from 'vue-test-utils';
import QuestionsList from './QuestionsList';
import store from '@/store';

Vue.prototype.$vuetify = {
  load: (fn) => fn(),
  breakpoint: {}
};

describe('QuestionsList.spec.js', () => {
  let cmp;
  let template;
  
  beforeEach(() => {
    cmp = mount(QuestionsList, {
      store,
    });
    template = cmp.html();
  });
  
  it('has the expected html structure', () => {
    expect(template).toMatchSnapshot()
  });
  
  it('should emit 2 dispatch events', () => {
    expect(store.dispatch.mock.calls.length).toBe(2);
  });
  
});

Why is L19 of QuestionsList reported as uncovered and why's Question.vue disappearing from the report when Is add mapCoverage: true?

Here is the missing Question.vue component:

<style src="./question.scss" lang="scss"></style>

<template>
  <v-flex d-flex xs12 md6 xl4>
    <router-link :to="`${id}`" class="card-link card" tag="div">
      <v-card
          hover
          :class="[question.voted ? 'green darken-2 white--text' : 'blue-grey darken-1']">
        <v-toolbar dark>
          <v-toolbar-title
              :class="[$vuetify.breakpoint.xsOnly ? 'body-1 ml-3' : 'ml-3']"
          >
            {{ question.question }}
          </v-toolbar-title>
          <v-spacer></v-spacer>
          <v-chip v-if="question.voted" small class="hidden-sm-and-down">
            Voted
              <v-icon right>check</v-icon>
          </v-chip>
        </v-toolbar>
        <v-card-text primary-title>
          <div>
            <div class="headline"></div>
            <div>
              created {{ question.published_at | moment("from", "now") }}
            </div>
            <div>
              {{ question.choices.length }} choices
            </div>
            <v-chip v-if="question.voted" small class="hidden-md-and-up">
              Voted
              <v-icon right>check</v-icon>
            </v-chip>
          </div>
        </v-card-text>
      </v-card>
    </router-link>
  </v-flex>
</template>

<script>

  export default {
    name: 'question',
    props: [
      'question',
      'id',
    ],
  };
</script>

• jest-vue-preprocessor: 1.1.X

1.3.1

• Node version : [ OSX | Linux | Windows ]
  8.4.0
• Platform: [ OSX | Linux | Windows ]
  OSX