Vue-cli: Jest coverage collection is not working with TypeScript files

Created on 16 Jul 2018  路  4Comments  路  Source: vuejs/vue-cli

Version

3.0.0-rc.3

Reproduction link

https://github.com/Kocal/vue-cli-no-coverage-on-typescript-files/commits/master

Steps to reproduce

Project creation

  • Run vue ui
  • Create a new project
  • Presets: Manual
  • Check Babel, TypeScript, and Unit Testing
  • Pick a linter / formatter config: ESLint Prettier (it's probably unrelated, but this is what I chose)
  • Pick a unit testing solution: Jest
  • Create project
  • Continue without saving

Post-project creation

  • Enable Jest coverage collection from package.json: jest.collectCoverage: true
  • Create a file src/divider.ts containing export const divide = (a: number, b: number) => a / b;
  • Create a spec file tests/unit/divider.spec.ts containg test('divide', () => { expect(divide(5, 2)).toEqual(2.5) });
  • Run yarn test:unit or yarn test:unit --no-cache

And under your eyes, you will see that coverage from src/divider.ts is not collected.

What is expected?

Coverage from TypeScript files should be collected.

What is actually happening?

I investigate and this is what I found.
It really seems to be that when a file is written in TypeScript, its code coverage won't be collected.

| service | written in... | test written in... | coverage collected? |
| ----------- | ------------------ | ------------------------- | -------------------------------- |
| substracter | TypeScript | TypeScript |聽No |
| divider | TypeScript | JavaScript |聽No |
| multiplier | JavaScript |聽TypeScript | Yes |

Here is a Travis build that show Coverage state.

I'm a bit afraid because I'm actually migrating an app which uses vuejs-templates/pwa to @vue/cli 3, but I literally lost all the code coverage... :cry:


Something strange too, code coverage from .vue files is not collected. :thinking:
Here is another Travis build that ran just after:

  • enable code coverage collection
  • use babel-jest for handling .js files, but it's not related I think

Thanks for your help (also you all did a great job on @vue/cli and vue ui! :slightly_smiling_face:), do not hesitate to ask me for more info/context!

typescript unit-jest

Most helpful comment

If someone read this, this issue has been correctly fixed by updating ts-jest to 23.1.3 and removing disableSourceMapSupport in your tsconfig.json.

All 4 comments

Have you tried setting collectCoverageFrom to include .ts files?

The docs are not clear but if the example code provided thee is the default of jest, then typescript files are not included by default...

Hum, actually you're right.

I totally forgot about that because I thought it was implicit, but it's worse after specified it.
On the current travis build, src/App.vue and src/main.ts now appear (but they are not tested nor required in tests or tested files), and src/services/multiplier.js is still the only one services to appears. :confused:

capture d ecran de 2018-07-16 22-48-11

Maybe it's not a vue-cli related issue, I will check Jest and ts-jest if something bad happens.

Well... One of the latest issue on ts-jest is about a failing coverage, and the given _solution_ works:

"jest": {
  "globals": {
    "ts-jest": {
      "disableSourceMapSupport": true
    }
  }
}

capture d ecran de 2018-07-16 22-52-59

But it's looks like a terrible _fix_. :disappointed_relieved:


Also there is still src/components/HelloWorld.vue which is missing for code coverage, but that's probably another issue...

I think this can be closed.

If someone read this, this issue has been correctly fixed by updating ts-jest to 23.1.3 and removing disableSourceMapSupport in your tsconfig.json.

Was this page helpful?
0 / 5 - 0 ratings

Related issues

sanderswang picture sanderswang  路  3Comments

PrimozRome picture PrimozRome  路  3Comments

chasegiunta picture chasegiunta  路  3Comments

JIANGYUJING1995 picture JIANGYUJING1995  路  3Comments

BusyHe picture BusyHe  路  3Comments