Source map files disappear from coverage report

[eddyerburgh]

Hi,

I'm getting coverage issues with Jest.
When I set mapCoverage: true, some files disapear from the coverage report.

Example:

# mapCoverage:true
src/api                |      100 |      100 |      100 |      100 |                |
  index.js             |      100 |      100 |      100 |      100 |                |
  linkHeaderParser.js  |      100 |      100 |      100 |      100 |                |
  repositories.js      |      100 |      100 |      100 |      100 |                |
src/components         |     7.84 |     2.94 |     5.88 |    11.76 |                |
  FileExplorer.vue     |        0 |        0 |        0 |        0 |... 51,52,53,54 |
  MenuUserRepoList.vue |        0 |        0 |        0 |        0 |... 32,33,34,35 |
  Profile.vue          |        0 |        0 |        0 |        0 |... 57,58,59,60 |
  Readme.vue           |       80 |       50 |       50 |       80 |             23 |

# mapCoverage:false
src/api                |    92.86 |    84.21 |      100 |    92.86 |                |
  index.js             |    84.62 |    66.67 |      100 |    84.62 |          10,26 |
  linkHeaderParser.js  |      100 |      100 |      100 |      100 |                |
  repositories.js      |      100 |      100 |      100 |      100 |                |
  users.js             |      100 |      100 |      100 |      100 |                |
src/components         |     53.4 |    29.73 |    40.74 |    51.61 |                |
  FileExplorer.vue     |        0 |        0 |        0 |        0 |... 51,52,53,54 |
  FooterBar.vue        |    92.86 |       50 |      100 |      100 |        4,5,6,7 |
  MenuNavBar.vue       |      100 |       50 |      100 |      100 |       20,21,22 |
  MenuUserRepoList.vue |        0 |        0 |        0 |        0 |... 32,33,34,35 |
  Profile.vue          |        0 |        0 |        0 |        0 |... 57,58,59,60 |
  Readme.vue           |    94.74 |    57.14 |       80 |    92.86 |             25 |
  RepoListItem.vue     |      100 |       50 |    66.67 |      100 |       45,46,47 |

(I remove some file for a better readability. See full coverage report (link to travis build):

All sources files are available here: https://github.com/maxpou/gitvub and jest config here

Thank you

[tmy]

I created simple example: https://github.com/tmy/vue-jest-map-coverage-issue-sample

1. Run vue init webpack vue-jest-map-coverage-issue-sample
   (https://circleci.com/gh/tmy/vue-jest-map-coverage-issue-sample/1)

-----------------|----------|----------|----------|----------|----------------|
File             |  % Stmts | % Branch |  % Funcs |  % Lines |Uncovered Lines |
-----------------|----------|----------|----------|----------|----------------|
All files        |     6.25 |        0 |       25 |     9.09 |                |
 src             |        0 |        0 |        0 |        0 |                |
  App.vue        |        0 |        0 |        0 |        0 |... 27,28,29,30 |
 src/components  |      100 |      100 |      100 |      100 |                |
  HelloWorld.vue |      100 |      100 |      100 |      100 |                |
-----------------|----------|----------|----------|----------|----------------|

2. Edit src/components/HelloWorld.vue
   (https://circleci.com/gh/tmy/vue-jest-map-coverage-issue-sample/2)

----------|----------|----------|----------|----------|----------------|
File      |  % Stmts | % Branch |  % Funcs |  % Lines |Uncovered Lines |
----------|----------|----------|----------|----------|----------------|
All files |        0 |        0 |        0 |        0 |                |
 App.vue  |        0 |        0 |        0 |        0 |... 27,28,29,30 |
----------|----------|----------|----------|----------|----------------|

[tsauvajon]

I've had some issues aswell:

1/ Using an older version of vue-jest and the vue-cli webpack template, my colleague and I had different files listed on the code coverage with the same code (maybe some slight changes but definitely the same components, and imports)

2/ We migrated the source code to a more recent vue-cli webpack template that has jest "support" from scratch, and while we now have every single file listed contrary to before, it now displays a bunch of inexisting Uncovered lines, as @tmy 's coverage points out.

[maxpou]

Hi,

I'm the original author of this PR on vue-template/webpack repo

I think the problem come from Jest itself.
I tried to switch to jest-vue-preprocessor (witch is an equivalent)... and I get similars issues. I'm not the only one who get issue with this coverage (example: vire/jest-vue-preprocessor#41)

[tsauvajon]

I've got some updates on this issue: my coverage report is bugged on my Windows 10 machine (even with a fresh install of my repo), but testing inside Docker or on CircleCI provides a coverage report that seem correct.

EDIT: This is maybe a different issue as I have all of my files listed on the coverage, but with some inexisting Uncovered lines for every single .vue file...

[maxpou]

@tsauvajon are you sure about this? Configurations are the same?
I can reproduce the same errored coverages on MacOS / Ubuntu (and also travis).

[nirkki]

Looks like the missing files lack the data property. If the component doesn't have the data segment it is dropped from the coverage report. Adding an empty segment is enough to get it included.

export default {
  name: 'HelloWorld',
  props: {
    msg: { type: String, default: 'Welcome to Your Vue.js App' }
  },
  data () {
    return {}
  }
}

[tsauvajon]

@maxpou 100% sure ! Yes the configs are the same.

@nirkki Ok, that seems very counter intuitive ! I'll try that, but no matter what I had different results on different machines with the same configuration...

I'll try to spend some time on this on the following weeks and will update this Issue.

[gudatcomputers]

@nirkki: I can confirm this fixed the exact same issue I had. Just added the data property back and coverage came in properly.

[ycmjason]

I have a problem with mapCoverage too. I have some components with no logic at all in it, only html. Something like the following:

GameInstruction.vue:

<template>
  <p>This game ... blah blah blah</p>
</template>

<script>
export default { }
</script>

<style></style>

And looks like Jest is picking up the coverage with this config:

module.exports = {
  'moduleFileExtensions': [
    'js',
    'json',
    'vue',
  ],
  'transform': {
    '.*\\.(vue)$': '<rootDir>/node_modules/vue-jest',
    '^.+\\.js$': '<rootDir>/node_modules/babel-jest',
  },
  'collectCoverage': true,
  'collectCoverageFrom': [
    'src/**/*.{js,vue}',
    '!**/node_modules/**',
  ],
  'coverageReporters': ['text', 'html', 'lcov'],
  'mapCoverage': true,
  'moduleDirectories': ['node_modules'],
  'moduleNameMapper': {
    '^@/(.*)$': '<rootDir>/src/$1',
  },
};

And the resulting coverage is 0%. 😢

I saw the comment mentioning about the absence of data() in component. So I tried adding the data() attribute and the coverage become 100%.

Is this the expected behaviour? Are we not suppose to have empty components that only have template?

[nirkki]

Definately not expected behaviour.
I just happened to notice it when comparing files that were present in coverage and those which were not. As a temporary workaround I added the empty data segment and now the coverage works well! Well, I had to cleanup some scss files as well, but that is another story.
Hope this gets fixed in some point, but I'm happy with the workaround until that.

[ycmjason]

Ok, coz I am new to testing in vue. I was just following the steps on the documentation on here and thought I was doing something wrong.

Alright, now at lease I now I am not the only one. I will just add data() as a work around then.

[maxpou]

Hi,
Good spot @ycmjason !
As you mention, I added data() and it increase my coverage!

• Initial coverage:

File                      |  % Stmts | % Branch |  % Funcs |  % Lines |Uncovered Lines |
--------------------------|----------|----------|----------|----------|----------------|
All files                 |    11.34 |     6.38 |     6.25 |    15.94 |                |
 src                      |        0 |        0 |        0 |        0 |                |
  App.vue                 |        0 |        0 |        0 |        0 |... 60,61,62,63 |
 src/api                  |      100 |      100 |      100 |      100 |                |
  index.js                |      100 |      100 |      100 |      100 |                |
  linkHeaderParser.js     |      100 |      100 |      100 |      100 |                |
  repositories.js         |      100 |      100 |      100 |      100 |                |
 src/components           |     4.42 |     1.47 |     5.71 |     7.69 |                |
  FileExplorer.vue        |        0 |        0 |        0 |        0 |... 59,60,61,62 |
  MenuLateral.vue         |        0 |        0 |        0 |        0 |      1,4,5,6,7 |
  MenuNavBar.vue          |       20 |        0 |    33.33 |       20 |    42,47,48,49 |
  MenuUserRepoList.vue    |        0 |        0 |        0 |        0 |... 32,33,34,35 |
  NotFound.vue            |        0 |        0 |        0 |        0 |... 33,34,35,36 |
  OfflineNotification.vue |        0 |        0 |        0 |        0 |    21,22,24,25 |
  Profile.vue             |        0 |        0 |        0 |        0 |... 58,59,60,61 |
  Readme.vue              |       80 |       50 |       50 |       80 |             27 |
  RepoList.vue            |        0 |      100 |        0 |        0 |             57 |
  RepositoryHeader.vue    |        0 |        0 |        0 |        0 |... 48,49,50,51 |

• After adding data() (on OfflineNotification.vue, Readme.vue and RepoList.vue). You can see the PR here: https://github.com/maxpou/gitvub/pull/34/files

All files                 |    12.24 |     6.38 |     9.64 |    17.14 |                |
 src                      |        0 |        0 |        0 |        0 |                |
  App.vue                 |        0 |        0 |        0 |        0 |... 60,61,62,63 |
 src/api                  |      100 |      100 |      100 |      100 |                |
  index.js                |      100 |      100 |      100 |      100 |                |
  linkHeaderParser.js     |      100 |      100 |      100 |      100 |                |
  repositories.js         |      100 |      100 |      100 |      100 |                |
 src/components           |      6.9 |     1.47 |    13.16 |    11.76 |                |
  FileExplorer.vue        |        0 |        0 |        0 |        0 |... 59,60,61,62 |
  MenuLateral.vue         |        0 |        0 |        0 |        0 |      1,4,5,6,7 |
  MenuNavBar.vue          |       20 |        0 |    33.33 |       20 |    42,47,48,49 |
  MenuUserRepoList.vue    |        0 |        0 |        0 |        0 |... 32,33,34,35 |
  NotFound.vue            |        0 |        0 |        0 |        0 |... 33,34,35,36 |
  OfflineNotification.vue |       20 |        0 |       50 |       20 |    25,26,28,29 |
  Profile.vue             |        0 |        0 |        0 |        0 |... 58,59,60,61 |
  Readme.vue              |    83.33 |       50 |    66.67 |    83.33 |             31 |
  RepoList.vue            |       50 |      100 |       50 |       50 |             57 |
  RepositoryHeader.vue    |        0 |        0 |        0 |        0 |... 48,49,50,51 |
// ...

Now this 3 component got better coverage. That's cool. But there is still some missing files 😢

• After adding data() + removing jest's mapCoverage option:

--------------------------|----------|----------|----------|----------|----------------|
File                      |  % Stmts | % Branch |  % Funcs |  % Lines |Uncovered Lines |
--------------------------|----------|----------|----------|----------|----------------|
All files                 |    30.85 |    20.75 |    25.93 |    35.06 |                |
 src                      |        0 |        0 |        0 |        0 |                |
  App.vue                 |        0 |        0 |        0 |        0 |... 60,61,62,63 |
 src/api                  |    92.31 |    84.21 |      100 |    92.31 |                |
  index.js                |    81.82 |    66.67 |      100 |    81.82 |          10,26 |
  linkHeaderParser.js     |      100 |      100 |      100 |      100 |                |
  repositories.js         |      100 |      100 |      100 |      100 |                |
  users.js                |      100 |      100 |      100 |      100 |                |
 src/components           |    33.68 |    20.63 |    26.92 |    36.84 |                |
  FileExplorer.vue        |        0 |        0 |        0 |        0 |... 59,60,61,62 |
  MenuLateral.vue         |        0 |        0 |        0 |        0 |      1,4,5,6,7 |
  MenuNavBar.vue          |    62.96 |    33.33 |       50 |    66.67 |    49,54,55,56 |
  MenuUserRepoList.vue    |        0 |        0 |        0 |        0 |... 32,33,34,35 |
  NotFound.vue            |        0 |        0 |        0 |        0 |... 33,34,35,36 |
  OfflineNotification.vue |       80 |       40 |       75 |    63.64 |    27,28,30,31 |
  Profile.vue             |        0 |        0 |        0 |        0 |... 58,59,60,61 |
  Readme.vue              |    94.74 |    57.14 |       80 |    92.86 |             25 |
  RepoList.vue            |       50 |    36.36 |    42.86 |     87.5 |             64 |
  RepositoryHeader.vue    |        0 |        0 |        0 |        0 |... 48,49,50,51 |

Now the file src/api/users.js appear (with 100% cc). But if I check in detail the HTML report created by Jest, everything is wrong in the .vue files (I mean the highlighted lines).

Ps: I also tried to put data() in every .vue files (even if there are no tests on these files) but it didn't change anything.