No coverage for .vue files when using Jest

I’m using vue-test-utils with Jest to test single-file Vue components. Everything seems to be working fine, but I’m unable to generate coverage reports from .vue files in the repo. Coverage is reported for plain .js files in the same folders without any trouble.

One thing I should note is that for this project, my Vue components are all written in ES5 (plus module.exports and require statements; I’m relying on a non-standard module tool to deliver this code in browser). There is no webpack/babel setup for this project; I’ve just been relying on the Vue-jest transforms instead. The tests themselves run fine this way.

Here’s my package.json file:

{
  "private": true,
  "scripts": {
    "test": "grunt test && npm run test:unit",
    "test:unit": "jest"
  },
  "devDependencies": {
    "@vue/test-utils": "^1.0.0-beta.31",
    "babel-core": "^6.26.3",
    "eslint-config-wikimedia": "0.15.0",
    "eslint-plugin-vue": "^6.1.2",
    "grunt": "1.0.4",
    "grunt-banana-checker": "0.8.1",
    "grunt-eslint": "22.0.0",
    "grunt-stylelint": "0.13.0",
    "jest": "^25.1.0",
    "stylelint-config-wikimedia": "0.8.0",
    "vue": "^2.6.11",
    "vue-jest": "^3.0.5",
    "vue-template-compiler": "^2.6.11"
  },
  "eslintIgnore": [
    "vendor/**",
    "jest.config.js"
  ]
}

And here are the relevant parts of my Jest config:

module.exports = {
  clearMocks: true,
  collectCoverage: true,
  collectCoverageFrom: [
    "resources/**/*.(js|vue)"
  ],
  coverageDirectory: "coverage",
  coveragePathIgnorePatterns: [,
    "/node_modules/",
    "resources/components/index.js",
    "resources/plugins/index.js",
    "resources/init.js"
  ],
  globals: {
    "vue-jest": {
      babelConfig: false,
      hideStyleWarn: true,
      experimentalCSSCompile: true
    }
  },
  moduleFileExtensions: [
    "js",
    "json",
    "vue"
  ],
  setupFiles: [
    "./jest.setup.js"
  ],
  transform: {
    ".*\\.(vue)$": "<rootDir>/node_modules/vue-jest"
  },
};

The entire repository I’m working with is available here: https://github.com/egardner/mediawiki-extensions-VueTest

Any insight on what’s happening here would be greatly appreciated.

try adding coverageReporters property after collectCoverageFrom, example below. Also verify that the path specified in coverageReportersFrom array is valid

collectCoverageFrom: [“src/components/*.{js,vue}”, “!/node_modules/”],
coverageReporters: [“html”, “text-summary”]

Thanks for the response – I tried your suggestion, but it doesn’t seem to change what gets included in the coverage report, just the format used to display.

All the relevant files here are in a “resources” directory:

resources/
├── components
│   ├── ApiRequestModule.vue
│   ├── App.vue
│   ├── ChildComponent.vue
│   ├── ComputedPropertyModule.vue
│   ├── ParentChildCommunicationModule.vue
│   ├── TwoWayBindingModule.vue
│   └── index.js
├── init.js
└── plugins
    ├── api.js
    ├── i18n.js
    └── index.js

With collectCoverageFrom set to: "resources/**/*.{js,vue}", I’d think that the Vue files would get picked up. But all I have for output is the following:

 PASS  tests/jest/ChildComponent.test.js
 PASS  tests/jest/TwoWayBindingModule.test.js
 PASS  tests/jest/ComputedPropertyModule.test.js
 PASS  tests/jest/App.test.js
 PASS  tests/jest/ApiRequestModule.test.js
 PASS  tests/jest/ParentChildCommunictionModule.test.js
----------|---------|----------|---------|---------|-------------------
File      | % Stmts | % Branch | % Funcs | % Lines | Uncovered Line #s
----------|---------|----------|---------|---------|-------------------
All files |   92.86 |    66.67 |     100 |   92.86 |
 api.js   |     100 |      100 |     100 |     100 |
 i18n.js  |   88.89 |       50 |     100 |   88.89 | 52
----------|---------|----------|---------|---------|-------------------

Test Suites: 6 passed, 6 total
Tests:       13 passed, 13 total
Snapshots:   0 total
Time:        3.981s
Ran all test suites.

Those test files are require()-ing Vue files, so I know the transform from vue-jest is working. It just seems like they are left out of the coverage report for some reason. I wonder if this is an issue with vue-jest?

Same here! I was setting up unit testing in my current project and .vue files are not being included in the code coverage albeit the files are tested.

I went ahead and filed an issue in the Vue-Jest repo. If you are experiencing the same thing and can reproduce, providing an additional perspective on the ticket may be useful:

1 Like
"collectCoverageFrom": [

    "src/**/*.{js,vue}",

    "!src/*.js",

    '!src/**/*.spec.js',

    "!**/node_modules/**",

  ],

My directory structure is:

src /
****app/
********landingpage/
************comp1/comp.vue

That is the part where I’m trying to include .vue file in the coverage. I’m seriously getting pissed off because my current project is a huge mess without a single unit test and I’m trying to set up one. Please let me know if you have any leads.

Thanks,
Sai

Can you actually run your tests? That much I can do at least. But having an automated coverage report is good for ensuring code quality (and motivation for continuing to write tests!)

1 Like

Yes, my files are being tested properly. Just not included in the code coverage.

Ok, latest update – we found a workaround, basically you can add the relevant plugins from the vue-cli-service and run your tests using that. See here for more details: https://github.com/vuejs/vue-jest/issues/217#issuecomment-585996947

I would still love to understand what the relevant config differences are here.