vue-loader mocha-webpack lcov报告在文件路径中有重复的文件夹

Question

我有一个项目，最初使用vue-cli创建，但后来转换为使用摩卡-webpack。我按照这里的指南添加了代码覆盖率：https://github.com/zinserjan/mocha-webpack/blob/master/docs/guides/code-coverage.md

我正在尝试获取.vue文件的代码覆盖率，但在报告中，所有.vue文件的路径都设置为src/components/Component/src/components/Component

到今天为止，所有软件包都是最新的，所有其他配置都与初始的vue-loader相同。如果有人发现了这个问题，或者甚至可以给我指出正确的方向，我将不胜感激。

脚本：

"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"

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

我找到了这个：https://github.com/istanbuljs/nyc/issues/718

将webpack.test.config中的devtool替换为'#eval'而不是'inline-cheap-module-source-map'，可以生成覆盖率报告。但是，行之间的映射仍然关闭。

Answer 2

使用istanbul-instrumenter-loader设置devtool false；https://github.com/k186/vue-cli-plugin-unit-karmajs使用此命令