Jest test coverage for VueJS application with Nuxt

Question

I have VueJS application written with NuxtJS. This setup causes that I have many files index.vue in different directories. When I run the testing suite with commend jest --no-cache --watch --coverage only 1 file index.vue has being picked up by coverage results.

my configuration of jest in package.json is:

"jest": {
    "transform": {
      "^.+.vue$": "vue-jest",
      "^.+.js$": "babel-jest"
    },
    "collectCoverage": true,
    "collectCoverageFrom": [
      "**/*.{js,vue}",
      "!**/node_modules/**"
    ],
    "coverageReporters": [
      "text"
    ],
    "setupTestFrameworkScriptFile": "jest-extended"
}

and results show only coverage for 1 index.vue file (even I have multiple of them as well other .vue files).

What configuration option I need to add to run coverage for all .vue files?

Zettazeugma

Could you show coverage table and folder structure? – Unregenerate

Answer 1

At a first sight, I would expect to see Jest's moduleFileExtensions config option in place like:

 "jest": {
    "moduleFileExtensions": ["js", "json", "jsx", "node", "vue"],
    // The rest of your config...
  }

The option tells Jest which file extensions are used by the modules of your application.

Bradford

This unfortunately didn't work for me. Only index.vue is getting coverage and I have the exact same config. – Mahogany

Fixed this by exporting the Vue instance in the script section of the Vue files. – Mahogany