title: Generating nyc coverage report for VueJS project with @vue/cli-plugin-unit-mocha, TypeScript and SFC's
body: <p>I am currently working on setting up a testing environment for a Vue project that uses the @vue/cli-plugin-unit-mocha to run unit tests. The project uses TypeScript and .vue Single-File-Components. I have successfully set-up my project to run unit tests and generate code coverage reports for TypeScript files but when I try adding tests for SFC's I get an error. </p>
  
  <p>To generate coverage reports I use nyc + istanbul-instrumenter-loader. I think my configuration is correct for regular Typescript files but when it has to deal with .vue files istanbul-instrumenter-loader throws an error: </p>
  
  <pre><code>error  in ./src/pages/rapportages/components/reports-grid/reports-grid-container.vue?vue&amp;type=script&amp;lang=ts&amp;
  Module build failed (from ./node_modules/istanbul-instrumenter-loader/dist/cjs.js):
  TypeError: Cannot read property 'fileCoverage' of undefined
  </code></pre>
  
  <p>To me it looks like the .vue file hasn't been properly transformed/transpiled.</p>
  
  <p>This is my package.json:</p>
  
  <pre><code>{
   ...
    "scripts": {
      "serve": "vue-cli-service serve",
      "build": "vue-cli-service build",
      "lint": "vue-cli-service lint",
      "test": "vue-cli-service test:unit src/**/__tests__/*.spec.ts --require mocha-setup.js",
      "test:ci": "yarn run test --reporter mocha-teamcity-reporter",
      "test:cover": "cross-env NODE_ENV=coverage nyc vue-cli-service test:unit src/**/__tests__/*.spec.ts --require mocha-setup.js"
    }
  ...
  "nyc": {
      "sourceMap": false,
      "instrument": false,
      "extension": [
        ".ts",
        ".vue"
      ],
      "reporter": [
        "text",
        "lcov"
      ]
    },
  }
  </code></pre>
  
  <p>and my vue.config.js: </p>
  
  <pre><code>...
  const glob = require('glob')
  
  path = require('path');
  var nodeExternals = require('webpack-node-externals');
  const isCoverage = process.env.NODE_ENV === 'coverage';
  
  module.exports = {
    outputDir: "dist",
    assetsDir: "shared",
    pages,
    configureWebpack: {
      resolve: {
        alias: {
          'vue$': 'vue/dist/vue.esm.js',
          'vuex$': "vuex/dist/vuex.esm.js"
        },
        extensions: ['*', '.js', '.vue', '.json']
      },
      stats: {
        warningsFilter: /export .* was not found in/
      },
      devtool: process.env.NODE_ENV === 'development' ? 'source-map' : 'inline-cheap-module-source-map',
      output: {
        // use absolute paths in sourcemaps (important for debugging via IDE)
        devtoolModuleFilenameTemplate: '[absolute-resource-path]',
        devtoolFallbackModuleFilenameTemplate: '[absolute-resource-path]?[hash]'
      },
      module: {
        rules: [].concat(
          isCoverage ? {
            test: /\.(ts|vue)/,
            include: path.resolve('src'), // instrument only testing sources with Istanbul, after ts-loader runs
            loader: 'istanbul-instrumenter-loader',
            enforce: 'post',
            query: {
              esModules: true
            }
          } : []
        )
      },
      target: 'node',  // webpack should compile node compatible code
      externals: [nodeExternals()], // in order to ignore all modules in node_modules folder
    }
  }
  </code></pre>
  
  <p>The file the test coverage fails on look as following:</p>
  
  <p>reports-grid-container.spec.ts</p>
  
  <pre><code>import { expect } from 'chai';
  import { shallowMount, createLocalVue } from '@vue/test-utils';
  import Vuex from 'vuex';
  import { store } from '@/shared/vuex/root-store';
  
  import ReportsGridContainer from '../reports-grid-container.vue';
  import { STORE_KEY } from '../constants';
  
  describe('ReportsGridContainer', () =&gt; {
      it('creates store module with the store key defined in the constants file', () =&gt; {
          const localVue = createLocalVue();
          localVue.use(Vuex);
  
          const wrapper = shallowMount(ReportsGridContainer, {
              localVue,
              store
          });
          expect(wrapper.vm.$store.state[STORE_KEY]).to.not.equal(undefined);
      });
  });
  </code></pre>
  
  <p>Istanbul throws an error because of the .vue file</p>
  
  <p>Any help or directions would be greatly appreciated! </p>