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

gagrison · 2022-03-09T11:42:43Z

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

The text was updated successfully, but these errors were encountered:

tyrdavis · 2022-04-13T23:07:27Z

I'm experiencing the same problem.

josipbrekalo · 2022-05-09T10:50:57Z

Same problem for me

websmurf · 2022-05-23T19:51:11Z

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 · 2022-05-24T06:56:25Z

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 · 2022-05-24T07:23:05Z

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 · 2022-05-24T07:49:16Z

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

websmurf · 2022-05-24T09:36:12Z

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 · 2022-06-14T17:01:24Z

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 · 2022-06-22T17:10:36Z

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 · 2022-07-14T04:27:50Z

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 · 2022-07-14T10:12:33Z

@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 · 2022-08-11T06:57:43Z

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 · 2022-08-11T10:38:23Z

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 · 2022-09-26T18:02:41Z

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')
}

websmurf mentioned this issue Jun 22, 2022

SFC Vue files with tests disappear from test coverage reports vuejs/vue-jest#422

Open

iamface mentioned this issue Sep 27, 2022

Support Jest 28 with @vue/cli-plugin-unit-jest #7129

Open

Provide feedback

Saved searches

Use saved searches to filter your results more quickly

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

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

gagrison commented Mar 9, 2022 •

edited

Loading

tyrdavis commented Apr 13, 2022

josipbrekalo commented May 9, 2022

websmurf commented May 23, 2022 •

edited

Loading

websmurf commented May 24, 2022

gagrison commented May 24, 2022

websmurf commented May 24, 2022

websmurf commented May 24, 2022 •

edited

Loading

johntdowney commented Jun 14, 2022

jrtitus commented Jun 22, 2022

rodhoward commented Jul 14, 2022 •

edited

Loading

johntdowney commented Jul 14, 2022 •

edited

Loading

GrRivero commented Aug 11, 2022

GrRivero commented Aug 11, 2022

iamface commented Sep 26, 2022

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

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

Comments

gagrison commented Mar 9, 2022 • edited Loading

Version

Environment info

Steps to reproduce

What is expected?

What is actually happening?

tyrdavis commented Apr 13, 2022

josipbrekalo commented May 9, 2022

websmurf commented May 23, 2022 • edited Loading

websmurf commented May 24, 2022

gagrison commented May 24, 2022

websmurf commented May 24, 2022

websmurf commented May 24, 2022 • edited Loading

johntdowney commented Jun 14, 2022

jrtitus commented Jun 22, 2022

rodhoward commented Jul 14, 2022 • edited Loading

johntdowney commented Jul 14, 2022 • edited Loading

GrRivero commented Aug 11, 2022

GrRivero commented Aug 11, 2022

iamface commented Sep 26, 2022

gagrison commented Mar 9, 2022 •

edited

Loading

websmurf commented May 23, 2022 •

edited

Loading

websmurf commented May 24, 2022 •

edited

Loading

rodhoward commented Jul 14, 2022 •

edited

Loading

johntdowney commented Jul 14, 2022 •

edited

Loading