Vuejs2 vue loader mocha网页包lcov报告在文件路径中有重复文件夹

Vuejs2 vue loader mocha网页包lcov报告在文件路径中有重复文件夹,vuejs2,istanbul,vue-loader,nyc,mocha-webpack,Vuejs2,Istanbul,Vue Loader,Nyc,Mocha Webpack,我有一个最初使用vue cli创建的项目,但后来转换为使用mocha webpack。我按照此处的指南添加了代码覆盖率: 我正在尝试获取.vue文件的代码覆盖率,但在报告中,任何.vue文件的路径都设置为src/components/Component/src/components/Component 最新版本上的所有软件包(截至今天),所有其他配置都与初始vue加载程序相同。如果有人发现了这个问题,或者甚至能为我指出正确的方向,我将不胜感激 脚本: "unitOnly": "mocha-web

我有一个最初使用vue cli创建的项目,但后来转换为使用mocha webpack。我按照此处的指南添加了代码覆盖率:

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

最新版本上的所有软件包(截至今天),所有其他配置都与初始vue加载程序相同。如果有人发现了这个问题,或者甚至能为我指出正确的方向,我将不胜感激

脚本:

"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配置:

"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'
  }
}
我发现:

将webpack.test.config中的devtool替换为“eval”而不是“内联廉价模块源映射”,这样就可以生成覆盖率报告。但行之间的映射仍处于关闭状态。

使用伊斯坦布尔instrumenter loader将devtool设置为false; 用这个