VueJS Component: Code coverage for separate file with vue-class-component

Question

I am trying to generate code coverage for VueJS components that are written in TypeScript using vue-class-component decorators, and with separate .ts files for the actual logic of the component. E.g. for one VueJS component I have effectively two files, one .vue file with the HTML template that calls a .ts file containing the data / properties / methods into a class component.

For running tests I am using vue-test-utils along with mocha-webpack and code coverage is done using istanbul/nyc.

Here is my package.json tests-specific configuration:

And here the rules for coverage in my webpack configuration file:

Finally also one extract of a test for a VueJS ProgressBar component:

The tests on the component are running fine, however the ProgressBar component is not listed in my coverage.

The only workaround I found to get coverage for class components is to actually instantiate them in the tests (e.g. progressBar = new ProgressBarClass()) however this defeats the purpose of vue-test-utils... Any ideas?

Many thanks for your help!

Answer 1

I had the same issue, simply updating ts-jest to a version >= 23.10 solved the coverage reports