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