0

我有一个最初使用 vue-cli 创建的项目，但后来转换为使用 mocha-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 配置：

"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'
  }
}
4

2 回答 2

2

我发现了这个：https ://github.com/istanbuljs/nyc/issues/718

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

于 2018-02-09T10:00:32.013 回答
1

用; 设置为devtool假 https://github.com/k186/vue-cli-plugin-unit-karmajs使用这个istanbul-instrumenter-loader

于 2021-06-11T03:27:16.143 回答