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

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

[bennettdams]

This issue came out of nowhere for me, took me way too long to recognize that it’s a cache error.

FIX

All tests work again with adding --no-cache to the test script:

"test:unit": "vue-cli-service test:unit --no-cache"

SETUP

"devDependencies": {
    ....
    "@vue/cli-plugin-babel": "^3.0.5",
    "@vue/cli-plugin-unit-jest": "^3.0.5",
    "@vue/cli-service": "^3.0.5",
    "@vue/test-utils": "^1.0.0-beta.20",
    "babel-core": "7.0.0-bridge.0",
    "babel-jest": "^23.0.1",
    ...
  }

jest.config.js

module.exports = {
  moduleFileExtensions: ["js", "jsx", "json", "vue"],
  verbose: true,
  transform: {
    "^.+\\.vue$": "vue-jest",
    ".+\\.(css|styl|less|sass|scss|svg|png|jpg|ttf|woff|woff2)$":
      "jest-transform-stub",
    "^.+\\.jsx?$": "babel-jest"
  },
  moduleNameMapper: {
    "^@/(.*)$": "<rootDir>/src/$1"
  },
  snapshotSerializers: ["jest-serializer-vue"],
  testMatch: [
    "**/tests/unit/**/*.spec.(js|jsx|ts|tsx)|**/__tests__/*.(js|jsx|ts|tsx)"
  ],
  testURL: "http://localhost/"
};

ERROR

Here is the error from console:

jest-haste-map: @providesModule naming collision:
  Duplicate module name: _my-module_
  Paths: C:\...\frontend\package.json collides with C:\...\frontend\src\package.json

This warning is caused by a @providesModule declaration with the same name across two different files.
 FAIL  tests/unit/App.spec.js
  ● Test suite failed to run

    Cannot find module 'C:\...\frontend\node_modules\@babel\runtime/helpers/builtin/interopRequireDefault' from 'App.spec.js'

      1 | import { shallowMount, createLocalVue } from "@vue/test-utils";
      2 | import VueRouter from "vue-router";
    > 3 | import App from "@/App.vue";
        |                              ^
      4 |
      5 | const localVue = createLocalVue();
      6 | localVue.use(VueRouter);

      at Resolver.resolveModule (node_modules/jest-resolve/build/index.js:221:17)
      at Object.<anonymous> (tests/unit/App.spec.js:3:30)

TEST

@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

Even the most simple isVueInstance test fails:

import { shallowMount, createLocalVue } from "@vue/test-utils";
import VueRouter from "vue-router";
import App from "@/App.vue";

const localVue = createLocalVue();
localVue.use(VueRouter);
const router = new VueRouter();

describe("App", () => {
  test("is a Vue instance", () => {
    const wrapper = shallowMount(App, { localVue, router });
    expect(wrapper.isVueInstance()).toBeTruthy();
  });
});

…but again, other tests fail, too.

[Jack-Barry]

This one is a little frustrating for me. Using --no-cache fixes the test, but if I’m using it in conjunction with --watch then changes aren’t picked up as I make them, so the only way to see if I’ve broken something is to manually run jest. First world problems, but it’d be nice to have my test runner up while building so as to make the flow a bit less tedious.

example.spec.ts

import { shallowMount } from '@vue/test-utils'
import Example from './example.vue'

describe('stuff', () => {
  it('works', () => {
    const wrapper = shallowMount(Example);
    expect(wrapper.text()).toMatch('Hello')
  })
})

example.vue

<template>
  <div class="primary">{{ msg }}</div>
</template>

<script lang="ts" src="./example.ts"></script>
<style lang="scss" src="./example.scss"></style>

example.ts

export default {
  data() {
    return {
      msg: 'Hello Vue'
    }
  }
}

So if I have jest --watch --no-cache running, and change msg in example.ts to 'Hey Vue' the change isn’t picked up and jest still thinks it’s passing. Not sure if there’s a way around that in jest or if it’s the purview of vue-jest but seems relevant to the conversation here.