Jest coverage collection is not working with TypeScript files

[Kocal]

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... 😢

---

Something strange too, code coverage from .vue files is not collected. 🤔
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! 🙂), do not hesitate to ask me for more info/context!

[LinusBorg]

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...

[Kocal]

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. 😕

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

[Kocal]

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

But it's looks like a terrible fix. 😥

---

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.

[Kocal]

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.

[josephrubin]

Better solution than the above:

To anyone reading, I have found a solution that keeps source maps and gives correct coverage (the above solution works but you only get line coverage information for the generated js files).

1. [OPTIONAL]: in jest config, use something like collectCoverageFrom: [ "**/*.{ts,js}", ],
2. In tsconfig, do not use sourceMap
3. Instead, in tsconfig, set "inlineSourceMap": true and "inlineSources": true.

For some reason, when the source map is set inline in this way, jest properly collects coverage on the original ts files.