vue-loader mocha-webpack lcov report has duplicate folders in filepath

Question

I have a project originally created using vue-cli but then converted to use mocha-webpack. I've followed the guide here to add code coverage: https://github.com/zinserjan/mocha-webpack/blob/master/docs/guides/code-coverage.md

I'm trying to get code coverage for my .vue files but in the report any .vue files have the path set to src/components/Component/src/components/Component

All packages on latest as of today, all other configs are the same as the initial vue-loader. If anyone spots the issue, or could even point me in the right direction it'd be appreciated.

Scripts:

"unitOnly": "mocha-webpack --webpack-config build/webpack.test.conf.js --require ignore-styles --require test/unit/setup.js test/**/*.spec.js",
"unit": "cross-env NODE_ENV=coverage nyc --reporter=lcov --reporter=text-summary npm run unitOnly"

nyc config in package.json:

"nyc": {
  "include": [
    "src/**/*.js",
    "src/**/*.vue"
  ],
    "instrument": false,
    "sourceMap": false,
    "report-dir": "./test/unit/coverage"
  },
}

webpack.test.conf.js:

var utils = require('./utils')
var webpack = require('webpack')
var merge = require('webpack-merge')
var baseConfig = require('./webpack.base.conf')
var path = require('path')
var isCoverage = process.env.NODE_ENV === 'coverage';

const nodeExternals = require('webpack-node-externals')

// See https://github.com/vuejs/vue-loader/issues/885
baseConfig.module.rules.forEach((rule) => {
  if (rule.test.toString() === '/\\.vue$/') {
    rule.options.optimizeSSR = false
  }
})

var webpackConfig = merge(baseConfig, {
  module: {
    rules: [].concat(
      isCoverage ? {
        test: /\.js$/,
        include: path.resolve('src'),
        loader: 'istanbul-instrumenter-loader',
        query: {
          esModules: true
        }
      }: [],
      {
        test: /.js$/,
        exclude: /(node_modules|bower_components)/,
        loader: 'babel-loader',
      },
      { test: /(\.css|\.less|.\scss)$/, loader: 'null-loader' }
    )
  },
  devtool: 'inline-cheap-module-source-map',  
  plugins: [
    new webpack.DefinePlugin({
      'process.env': require('../config/test.env')
    })
  ],
  target: 'node', // See http://zinserjan.github.io/mocha-webpack    /docs/installation/webpack-configuration.html
  externals: [
    nodeExternals()
  ],
  output: {
    // use absolute paths in sourcemaps (important for debugging via IDE)
    devtoolModuleFilenameTemplate: '[absolute-resource-path]',
    devtoolFallbackModuleFilenameTemplate: '[absolute-resource-path]?    [hash]'
  }
})

// no need for app entry during tests
delete webpackConfig.entry

module.exports = webpackConfig

vue-loader.conf.js:

var utils = require('./utils')
var config = require('../config')
var isProduction = process.env.NODE_ENV === 'production'

module.exports = {
  loaders: utils.cssLoaders({
     sourceMap: isProduction
       ? config.build.productionSourceMap
       : config.dev.cssSourceMap,
     extract: isProduction
  }),
  postLoaders: {
    js: 'istanbul-instrumenter-loader?esModules=true'
  }
}

Answer 1

set devtool false with istanbul-instrumenter-loader; https://github.com/k186/vue-cli-plugin-unit-karmajs use this

Answer 2

I have found this: https://github.com/istanbuljs/nyc/issues/718

Replacing devtool in webpack.test.config with '#eval' instead of 'inline-cheap-module-source-map' allows the coverage report to be generated. The mapping between lines is still off though.