cypress coverage doesn't work with vue-property-decorator

Question

I wanna have code coverage on frontend with cypress. Currently cypress recommends istanbul for coverage. Unfortunately I can't use it in pair of the stack below:

• vue-property-decorator
• cypress
• istanbul code coverage.
• typescript.

Because of: - I didn't find a way to make istanbul work with ts-loader, because istanbul-intementer-loader uses babel under the hood - babel-loader doesn't support decorators in the same way that typescript does, that breaks vue-property-decorator. Using vue in typescript w/o vue-property-decorator is not that neat...

Here're some useful link:

• example for repo with babel coverage
• official guide
• official github repo for typescript users
• cypress issue

Here's the repo and quick overview:

• git clone https://github.com/akoidan/vue-webpack-typescript && cd vue-webpack-typescript
• yarn install
• yarn run build
• yarn run e2e

You can also check out the babel branch on the repo above, to see example with babel instead of ts-loader

Here's the example of setup with ts-loader:

package.json:

{
  "nyc": {
    "extends": "@istanbuljs/nyc-config-typescript",
    "all": true
  }
}

cypress/iintegration/sample_spec.ts:

describe('My first Test', function() {
    it('Does not much', function() {
        cy.visit('/');
        cy.contains('Filtered Users');
    })
});

cypress/plugins/index.js:

module.exports = (on) => {
    on('task', require('@cypress/code-coverage/task'));
    on('file:preprocessor', require('@cypress/code-coverage/use-browserify-istanbul'));
};

cypress/support/index.js:

import './commands'
import '@cypress/code-coverage/support';

test chrome devtool:

window.__coverage__ // undefined

stdout:

----------|----------|----------|----------|----------|-------------------|
File      |  % Stmts | % Branch |  % Funcs |  % Lines | Uncovered Line #s |
----------|----------|----------|----------|----------|-------------------|
All files |        0 |        0 |        0 |        0 |                   |
----------|----------|----------|----------|----------|-------------------|

Answer 1

• there's seem to be no way to make coverage work with ts-loader
• babel 7 + babel-preset-typescript-vue are required to make it work with vue-property-decorator

Here's the example of github repo with working codecov