Jest coverage showing 1/1 statements for .vue file when file has import

[gagrison]

Version

5.0.1

Environment info

System:
  OS: Linux 5.4 Ubuntu 20.04.4 LTS (Focal Fossa)
  CPU: (8) x64 Intel(R) Core(TM) i5-10210U CPU @ 1.60GHz
Binaries:
  Node: 14.19.0 - /usr/local/bin/node
  Yarn: Not Found
  npm: 6.14.16 - /usr/local/bin/npm
Browsers:
  Chrome: 99.0.4844.51
  Firefox: 97.0.2
npmPackages:
  @vue/babel-helper-vue-jsx-merge-props:  1.2.1 
  @vue/babel-helper-vue-transform-on:  1.0.2 
  @vue/babel-plugin-jsx:  1.1.1 
  @vue/babel-plugin-transform-vue-jsx:  1.2.1 
  @vue/babel-preset-app:  5.0.1 
  @vue/babel-preset-jsx:  1.2.4 
  @vue/babel-sugar-composition-api-inject-h:  1.2.1 
  @vue/babel-sugar-composition-api-render-instance:  1.2.4 
  @vue/babel-sugar-functional-vue:  1.2.2 
  @vue/babel-sugar-inject-h:  1.2.2 
  @vue/babel-sugar-v-model:  1.2.3 
  @vue/babel-sugar-v-on:  1.2.3 
  @vue/cli-overlay:  5.0.1 
  @vue/cli-plugin-babel: ~5.0.0 => 5.0.1 
  @vue/cli-plugin-router:  5.0.1 
  @vue/cli-plugin-unit-jest: ~5.0.0 => 5.0.1 
  @vue/cli-plugin-vuex:  5.0.1 
  @vue/cli-service: ~5.0.0 => 5.0.1 
  @vue/cli-shared-utils:  5.0.1 
  @vue/component-compiler-utils:  3.3.0 
  @vue/test-utils: ^1.1.3 => 1.3.0 
  @vue/vue2-jest: ^27.0.0-alpha.2 => 27.0.0-alpha.4 
  @vue/web-component-wrapper:  1.3.0 
  jest-serializer-vue:  2.0.2 
  vue: ^2.6.14 => 2.6.14 
  vue-hot-reload-api:  2.3.4 
  vue-loader:  17.0.0 (15.9.8)
  vue-style-loader:  4.1.3 
  vue-template-compiler: ^2.6.14 => 2.6.14 
  vue-template-es2015-compiler:  1.9.1 
npmGlobalPackages:
  @vue/cli: 5.0.1

Steps to reproduce

Create project using vue create (manually, make sure to select Babel and Unit Testing as options, select Vue 2, select Jest as unit testing solution).
Add collectCoverage: true to jest.config.js/package.json.
Make random component and import it inside HelloWorld.vue, also add random method inside HelloWorld.vue.

What is expected?

After running npm run test:unit coverage should report that HelloWorld.vue has lines that are not covered

What is actually happening?

Coverage reports that HelloWorld.vue has 100% coverage and that it has 1/1 statements

[tyrdavis]

I'm experiencing the same problem.

[josipbrekalo]

Same problem for me

[websmurf]

Same issue here, have checked to see if an upgrade to jest 28.0.0 made a difference, but it didn't.
Also using v8 as coverageProvider didn't make a difference for me.

Using the default coverageProvider:

With v8:

Perhaps related: vuejs/vue-jest/issues/422

[websmurf]

I've tried downgrading to jest/ts-jest/babel-jest 26 and vue-jest 4 and even that didn't make a difference in the behaviour above, which is really weird.. I know I've seen this working correctly before... 😒

[gagrison]

I've tried downgrading to jest/ts-jest/babel-jest 26 and vue-jest 4 and even that didn't make a difference in the behaviour above, which is really weird.. I know I've seen this working correctly before... unamused

I use vue-cli 4.5.17 on another project and this started happening for me couple of weeks ago after I updated package-lock.json. I guess because of some babel packages were updated.

[websmurf]

Yeah.. i'm currently running old pipelines to see if I can pin-point which upgrade caused this exactly

[websmurf]

I've narrowed it down to the period where we switched from Node 14 to 16 and vue-jest to newer versions.
The node 16 upgrade itself didn't break coverage, but this change did:

Difference in coverage:

[johntdowney]

I dealt with this problem a while back, trying to get tests working. I boiled it down to a single line in my package.json, it was when I tried to update @vue/cli-plugin-unit-jest from 4.5.17 to 5.0.4. Make sure that is at 4.5.17, if you can, and things will work, at least they did for me, after a LOT of banging my head on the wall.

I'm trying to get it to work with 5.0.4, but nothing I do seems to have any effect. I need to update to this version now, though, so I'm just going to deal with it, I suppose.

If it's not clear to everyone what's going on here, your export and import statements are causing the code you're importing/exporting to be ignored. You can get coverage on much of your code simply by changing code like this:

export default {
   data() {
   }
}

Into code like this:

const Component = {
   data() {
   }
}
export default Component

Yes, I recognize that's a hassle. I didn't make the bug I'm just dealing with it, lol.

[jrtitus]

If it's not clear to everyone what's going on here, your export and import statements are causing the code you're importing/exporting to be ignored. You can get coverage on much of your code simply by changing code like this:

export default {
   data() {
   }
}

Into code like this:

const Component = {
   data() {
   }
}
export default Component

Unfortunately that doesn't help. I still see coverage being reported only on the lines that are outside of the Component using either @vue/cli-plugin-unit-jest@4.5.17 or @vue/cli-plugin-unit-jest@4.5.18

<script>
/** COVERED **/
import xyz from 'some-package'
import { somethingElse } from 'another-package'

const Component = {
/** -- **/
/** NOT COVERED **/
  data() { return { ... } },
  methods: { ... },
}
/** -- **/
/** COVERED **/
export default Component
/** -- **/
</script>

[rodhoward]

Hi,

We are seeing the same issue. Upgraded to node16 and lost our coverage (widget only). I've tried locking @vue/cli-plugin-unit-jest@4.5.17 to that version and that didn't help. Manually breaking up our single file components into javascript component object and .vue files does work around the issue but its super ugly.

This is quite a big issue for us as we like to have 100% coverage which is imposible if you can't test for it. We can't migrate to vue3 yet as we just have too much code.

Package versions:
"@vue/cli-plugin-babel": "^3.12.1",
"@vue/cli-plugin-eslint": "^3.12.1",
"@vue/cli-plugin-unit-jest": "4.5.17",
"@vue/cli-service": "^4.5.17",
"@vue/compiler-sfc": "^3.2.20",
"babel-core": "7.0.0-bridge.0",
"vue": "^2.6.14",
"vue-hot-reload-api": "^2.3.4",
"vue-template-compiler": "^2.6.14",
"vue-template-es2015-compiler": "^1.9.1",
"vuex": "^3.6.2"

Any help would be greatly appreciated.

Cheers
Rod

[johntdowney]

@rodhoward,

Try making sure all of the vue-cli stuff you can is version 4.5.17. I found that ultimately that was my problem and I was able to fix the issue by making sure my versions matched across those particular packages.

[GrRivero]

I have the same issue. Exists Workaround?

I tried a lot of combinations but not work I have 100% of coverage allways in typescript code in .vue files.

This is my last test:

"vue": "^2.6.11",

"devDependencies": {
    "@4tw/cypress-drag-drop": "^2.2.1",
    "@babel/core": "^7.18.10",
    "@babel/preset-env": "^7.18.10",
    "@mdi/font": "^7.0.96",
    "@playwright/test": "^1.24.2",
    "@types/concat-stream": "^2.0.0",
    "@types/jest": "^28.1.6",
    "@types/js-beautify": "^1.13.3",
    "@types/jsdom": "^20.0.0",
    "@types/lodash.clonedeep": "^4.5.7",
    "@types/mssql": "^8.0.3",
    "@types/node": "^18.6.5",
    "@types/sanitize-html": "^2.6.2",
    "@types/uuid": "^8.3.4",
    "@typescript-eslint/eslint-plugin": "^5.33.0",
    "@typescript-eslint/parser": "^5.33.0",
    "@vue/cli-overlay": "4.5.17",
    "@vue/cli-plugin-babel": "4.5.17",
    "@vue/cli-plugin-eslint": "4.5.17",
    "@vue/cli-plugin-router": "4.5.17",
    "@vue/cli-plugin-typescript": "4.5.17",
    "@vue/cli-plugin-unit-jest": "4.5.17",
    "@vue/cli-plugin-vuex": "4.5.17",
    "@vue/cli-service": "4.5.17",
    "@vue/cli-shared-utils": "4.5.17",
    "@vue/eslint-config-prettier": "^6.0.0",
    "@vue/eslint-config-typescript": "^11.0.0",
    "@vue/test-utils": "^1.3.0",
    "babel-jest": "^24.9.0",
    "concat-stream": "^2.0.0",
    "cypress": "^10.4.0",
    "eslint": "^6.8.0",
    "eslint-plugin-prettier": "^3.4.1",
    "eslint-plugin-tsdoc": "^0.2.16",
    "eslint-plugin-vue": "^9.3.0",
    "jest": "26.6.3",
    "jest-junit": "^14.0.0",
    "jest-sonar-reporter": "^2.0.0",
    "jsdom": "^20.0.0",
    "mssql": "^8.1.3",
    "playwright-chromium": "^1.24.2",
    "prettier": "^2.7.1",
    "sass": "^1.54.0",
    "sass-loader": "^10.2.1",
    "ts-jest": "^26",
    "typescript": "^4",
    "vue-cli-plugin-vuetify": "^2.5.1",
    "vue-jest": "3.0.7",
    "vue-template-compiler": "^2.6.11",
    "vuetify-loader": "^1.7.3"
},

and my jest.config.js:

module.exports = {
  moduleFileExtensions: ["js", "jsx", "json", "vue", "ts", "tsx"],
  transform: {
      "^.+\\.vue$": "vue-jest",
      ".+\\.(css|styl|less|sass|scss|svg|png|jpg|ttf|woff|woff2)$": "jest-transform-stub",
      "^.+\\.tsx?$": "ts-jest",
      ".*\\.(js)$": "babel-jest"
  },
  transformIgnorePatterns: ["/node_modules/"],
  moduleNameMapper: {
      "^@/(.*)$": "<rootDir>/src/$1"
  },
  snapshotSerializers: ["jest-serializer-vue"],
  testMatch: ["**/__tests__/*spec.(js|jsx|ts|tsx)", "!cypress/**/*spec.(js|jsx|ts|tsx)"],
  testPathIgnorePatterns: ["/cypress/"],
  testURL: "http://localhost/",
  watchPlugins: ["jest-watch-typeahead/filename", "jest-watch-typeahead/testname"],
  globals: {
      "ts-jest": {
          babelConfig: true
      }
  },
  coverageProvider: 'v8',
  collectCoverageFrom: ["src/**/*.{ts,vue}", ...ignoreCoverageFrom],
  coverageReporters: ["text", "lcov", "cobertura"],
  reporters: ["default", ["jest-junit", { suiteName: "Unit Tests", outputDirectory: "./junit", outputName: "jest-junit-ut.xml" }]]
}

Thanks!

[GrRivero]

I triyed with a new project and the code coverage doesn´t work

New project: https://github.com/GrRivero/vue2-jest-ts-coverage

New Issue: #7270

Do you have thoughts on why that is happening this?

Thanks!

[iamface]

Try making sure all of the vue-cli stuff you can is version 4.5.17. I found that ultimately that was my problem and I was able to fix the issue by making sure my versions matched across those particular packages.

I have one project using ~4.5.0 and everything works fine. A newer project with ~5.0.0 is where I have this problem but am unable to downgrade.

One workaround I have found is to asynchronously load imported components (does not work with other imports such as mixins or common js)

// bad
import Component from '@/Component`
components: { Component }

// good
components: {
  Component: () => import('@/Component')
}