Jest requires `--no-cache` for proper coverage

[awolden]

I have been digging into why many of our well tested components/views are not showing up on coverage reports, and I noticed that if I applied the --no-cache flag to jest I started getting appropriate coverage numbers. There seems to be an issue with the vue-jest caching mechanism that may be preventing some from getting appropriate coverage numbers.

We copied our settings from https://github.com/eddyerburgh/vue-test-utils-jest-example

[chrisvfritz]

I can confirm this issue on vue-enterprise-boilerplate. I've also noticed tests that should pass sometimes failing unless I clear the cache. If there's some information I can collect the next time it happens, I'm happy to post it here.

[eddyerburgh]

Any info is usefu:

• Jest version
• Node version
• OS version

Also, you could delete this line and see if it solves the issue—https://github.com/vuejs/vue-jest/blob/master/vue-jest.js#L6.

[chrisvfritz]

• Jest: v22.3.0
• Node: v9.5.0
• OS: macOS 10.13.3

I also just confirmed that deleting that line fixes the issue, so it does seem to be cache-related.

[eddyerburgh]

Does anyone have an example of a test that fails currently if the cache isn't cleared? I'd like to add a test case to the library when I fix the issue

[eddyerburgh]

The best solution right now might be to remove the getCacheKey function.

The getCacheKey function is returning a different hash when the file data changes, so the issue could be with how Jest uses the cache key.

[chrisvfritz]

I don't have an example of a test that fails, as it's not a persistent problem. At some point, a test will start failing when it shouldn't and I'm not sure what the trigger is. Then I clear the cache and it's all good.

The coverage problem is very reproducible though. On vue-enterprise-boilerplate, running yarn jest --coverage will consistently report 0% for every .vue file unless you also add --no-cache.

[eddyerburgh]

I'm unable to reproduce.

I cloned the vue-enterprise-boilerplate (which is great by the way 😀), ran yarn install, and yarn jest --coverage.

• node 9.5.0
• OS: macOS 10.12.6

Results:

---------------------|----------|----------|----------|----------|-------------------|
File                 |  % Stmts | % Branch |  % Funcs |  % Lines | Uncovered Line #s |
---------------------|----------|----------|----------|----------|-------------------|
All files            |      100 |       75 |      100 |      100 |                   |
 components          |      100 |       75 |      100 |      100 |                   |
  _base-icon.vue     |      100 |      100 |      100 |      100 |                   |
  _base-input.vue    |      100 |      100 |      100 |      100 |                   |
  nav-bar-routes.vue |      100 |       75 |      100 |      100 |                19 |
  nav-bar.vue        |      100 |      100 |      100 |      100 |                   |
 router/layouts      |      100 |      100 |      100 |      100 |                   |
  main.vue           |      100 |      100 |      100 |      100 |                   |
 router/views        |      100 |      100 |      100 |      100 |                   |
  home.vue           |      100 |      100 |      100 |      100 |                   |
  login.vue          |      100 |      100 |      100 |      100 |                   |
  profile.vue        |      100 |      100 |      100 |      100 |                   |
---------------------|----------|----------|----------|----------|-------------------|

I think the solution is to remove the getCacheKey method temporarily.

[chrisvfritz]

So weird! I'm not sure if this is another option, but it looks like Facebook offers a createCacheKeyFunction utility that may be useful to us. I apologize if you already know about it and it's not appropriate for our use case - I'm just starting to dig my head into this stuff. 😅

(And as an aside about the boilerplate, please don't hesitate to let me know if you have any suggestions/questions about how I'm managing unit tests there, including the global helpers in tests/unit/setup.js. I'd be honored to get feedback from the test master himself!)

[eddyerburgh]

Thanks @chrisvfritz , I wasn't aware of that method. Would you be able to use it on this line—https://github.com/vuejs/vue-jest/blob/master/vue-jest.js#L6- and see if it fixes the issue. I'm still unable to reproduce the bug locally

[chrisvfritz]

Definitely! It looks like we need a list of files whose content can be used as a key. What do you recommend we use in our case?

[eddyerburgh]

Sorry, I didn't see this message! I've removed cacheing as a temporary fix in 2.1.1.

I believe we just use the filename, and then set getCacheKey to createCacheKeyFunction. It should be called with the correct arguments

[robcresswell]

I've been running --no-cache for some time to get around this issue, if a second confirmation helps. Just stumbled across this bug as I was looking for the reason for the cache removal in 2.1.1.

[websmurf]

Same issue here, --no-cache avoids the issue as well

[Eitz]

After creating a project using vue init webpack my-project I was getting 0% coverage for some Vue components. Just reporting in that --no-cache fixed the issue as well. Hope this can help anyone who searches for this in Google.