Vue, Quasar, Cypress Code Coverage via Istanbul

.babelrc

{
  "plugins": ["@babel/plugin-syntax-dynamic-import"],
  "env": {
    "test": {
      "plugins": ["dynamic-import-node"],
      "presets": [
        [
          "@babel/preset-env",
          {
            "modules": "commonjs",
            "targets": {
              "node": "current"
            }
          },
          "@babel/preset-typescript"
        ]
      ]
    },
    "cypress": {
      "presets": ["@babel/typescript"],
      "plugins": ["istanbul"]
    }
  }
}

.nycrc

{
  "extends": "@istanbuljs/nyc-config-typescript",
  "extension": [".js", ".vue", ".ts"],
  "report-dir": "coverage"
}

babel.config.js

const fs = require('fs-extra');

let extend;

/**
 * The .babelrc file has been created to assist Jest for transpiling.
 * You should keep your application's babel rules in this file.
 */

if (fs.existsSync('./.babelrc')) {
  extend = './.babelrc';
}

module.exports = {
  presets: [
    '@quasar/babel-preset-app',
  ],
  extends: extend,
};

cy-ts-preprocessor.js

// Located in cypress/plugins/cy-ts-preprocessor.js

const wp = require('@cypress/webpack-preprocessor');

const webpackOptions = {
  resolve: {
    extensions: ['.ts', '.js'],
  },
  module: {
    rules: [
      {
        test: /\.ts$/,
        exclude: [/node_modules/],
        use: [
          {
            loader: 'ts-loader',
          },
        ],
      },
    ],
  },
};

const options = {
  webpackOptions,
};

module.exports = wp(options);

gistfile1.txt

// e2e/package.json

  "devDependencies": {
    "@babel/plugin-syntax-dynamic-import": "^7.8.3",
    "@babel/plugin-transform-runtime": "^7.11.0",
    "@babel/preset-env": "^7.11.0",
    "@babel/register": "^7.10.5",
    "@cypress/code-coverage": "^3.8.1",
    "@testing-library/cypress": "^6.0.1",
    "chai-shallow-deep-equal": "^1.4.6",
    "cypress": "5.1.0",
    "cypress-localstorage-commands": "^1.2.2",
    "cypress-wait-until": "^1.7.1",
    "eslint-plugin-cypress": "^2.11.1",
    "typescript": "^4.0.2"
  },

index.js

// Located in cypress/plugins/index.js

const cypressTypeScriptPreprocessor = require('./cy-ts-preprocessor');

module.exports = (on, config) => {
  // const webpackPreprocessor = require('@cypress/webpack-preprocessor');
  // const options = webpackPreprocessor.defaultOptions;
  // console.log('options', JSON.stringify(options, null, 2));

  // eslint-disable-next-line global-require
  require('@cypress/code-coverage/task')(on, config);
  on('file:preprocessor', cypressTypeScriptPreprocessor);

  // add other tasks to be registered here

  // IMPORTANT to return the config object
  // with the any changed environment variables
  return config;
};

package.json

// Added these dev dependencies 
"@babel/preset-typescript": "^7.10.4",
"@cypress/webpack-preprocessor": "^5.4.5",
"@firebase/testing": "^0.20.10",
"@istanbuljs/nyc-config-typescript": "^1.0.1",

quasar.confg.js

// Line number 3 - 7 is what's new for code coverage
extendWebpack(cfg) {
  cfg.module.rules.push({
    test: /\.ts?$/,
    use: 'babel-loader',
    exclude: /node_modules/,
  });
  // console.log('-----------Yay!', JSON.stringify(cfg.module.rules, null, 2));
  cfg.module.rules.push({
    enforce: 'pre',
    test: /\.(js|vue)$/,
    loader: 'eslint-loader',
    exclude: /node_modules/,
  });
}