search

vuejs / vue-cli

🛠️ webpack-based tooling for Vue.js Development
https://cli.vuejs.org/
MIT License
29.76k stars 6.33k forks source link

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

Open gagrison opened 2 years ago

gagrison commented 2 years ago

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 commented 2 years ago

I'm experiencing the same problem.

josipbrekalo commented 2 years ago

Same problem for me

websmurf commented 2 years ago

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:

image

With v8:

image

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

websmurf commented 2 years ago

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 commented 2 years ago

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 commented 2 years ago

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

websmurf commented 2 years ago

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:

image

Difference in coverage:

image
johntdowney commented 2 years ago

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 commented 2 years ago

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 commented 2 years ago

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 commented 2 years ago

@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 commented 2 years ago

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 commented 2 years ago

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: https://github.com/vuejs/vue-cli/issues/7270

Do you have thoughts on why that is happening this?

Thanks!

iamface commented 2 years ago

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