coverage es6覆盖率解决方法

coverage,codecov,webapck,es6,es2015

拭目以待 发布于

在GridManager 2.3.0版本开发中, 进行了全面的ES6替换。

替换之后发现,原先的测试覆盖率从72% 下降至 24%。通过 coverage html 在本地测试后发现, 覆盖目标文件使用的为 babel 转化之后的代码。


解决方法

由于GridManager 中使用的是webpack环境下的karma , 所以下面的步骤将基于karma, webpack。


1、安装所需插件:

npm install --save-dev babel-plugin-istanbul
npm install --save-dev karma-babel-preprocessor
npm install --save-dev karma-sourcemap-loader



2、修改 package.json

"scripts": {
    "test": "NODE_ENV=test karma start"
}



3、.babelrc 中增加配置项

"env": {
    "test": {
      "plugins": ["istanbul"]
    }
}



4、修改 karma.conf.js

preprocessors: {
    'src/js/*.js': ['webpack', 'sourcemap', 'coverage'],
    'test/*_test.js': ['webpack', 'sourcemap']
}
// ...
webpack: {
  // ...
  devtool: 'inline-source-map'
}



GirdManager 中使用的完整配置


.babelrc


{
  "presets": [
    [
      "es2015",
      {
        "modules": false
      }
    ],
    "stage-0"
  ],
  "plugins": [
    "transform-decorators-legacy"
  ],
  "env": {
    "test": {
      "plugins": ["istanbul"]
    }
  }
}



karma.conf.js

const path = require('path');
module.exports = function (config) {
	// karma config: http://karma-runner.github.io/1.0/config/configuration-file.html
	// karma-coverage: https://www.npmjs.com/package/karma-coverage
	config.set({
		// 将用于解决所有的模式基本路径(例如,文件,排除)
		basePath: '',

		// 使用框架
		// 可用的框架:https://npmjs.org/browse/keyword/karma-adapter
		frameworks: ['jasmine'],

		// 需要测试的文件列表
		files: [
			'test/*_test.js'
		],

		// 使用端口
		port: 9876,

		// 是否在输出日志中使用颜色
		colors: true,

		// 持续集成模式: 配置为true 将会持续运行测试, 直致完成返回0(成功)或1(失败). 示例: Done. Your build exited with 0.
		singleRun: true,


		// 日志级别
		// possible values: config.LOG_DISABLE || config.LOG_ERROR || config.LOG_WARN || config.LOG_INFO || config.LOG_DEBUG
		logLevel: config.LOG_INFO,

		// 是否监听文件变化
		autoWatch: true,

		// 配置启动单元测试的环境
		browsers: ['PhantomJS'],

		captureTimeout: 60000,

		// test results reporter to use
		// possible values: 'dots', 'progress'
		// available reporters: https://npmjs.org/browse/keyword/karma-reporter
		reporters: ['progress', 'coverage'],

		// 预处理
		preprocessors: {
			// src/js/*.js 在由 test/*_test.js 中调用时就会使用webpack打包, 所以 src/js/*.js 不需要通过 webpack 进行打.
			'src/js/*.js': ['sourcemap', 'coverage'],
			'test/*_test.js': ['webpack']
		},
		// optionally, configure the reporter
		coverageReporter: {
			reporters: [
				// generates ./coverage/chart/*.html
				{ type: 'html', subdir: 'chart' },
				// generates ./coverage/lcov.info
				{type:'lcovonly', subdir: '.'},
				// generates ./coverage/coverage-final.json
				{type:'json', subdir: '.'}
			]
		},

		// webpack config: https://github.com/webpack-contrib/karma-webpack
		webpack: {
			//入口文件配置
			entry: {
				js: './test/index_test.js'
			},
			resolve:{
				extensions: [".js"] //当requrie的模块找不到时,添加这些后缀
			},
			module: {
				rules: [
					{
						test: /.js?$/,
						use: ['babel-loader?{"presets":["es2015"]}'],
						exclude: /(node_modules|bower_components)/,
						include: [path.join(__dirname, 'src'), path.join(__dirname, 'test')]
					},
					{
						test:/.css$/,
						loader:'style-loader!css-loader'
					},
					{
						test: /.(woff|woff2)(?v=d+.d+.d+)?$/,
						use: 'url-loader?limit=15000&mimetype=application/font-woff&prefix=fonts'
					},
					{
						test: /.ttf(?v=d+.d+.d+)?$/,
						use: 'url-loader?limit=15000&mimetype=application/octet-stream&prefix=fonts'
					},
					{
						test: /.eot(?#w+)?$/,
						use: 'url-loader?limit=15000&mimetype=application/vnd.ms-fontobject&prefix=fonts'
					},
					{
						test: /.svg(#w+)?$/,
						use: 'url-loader?limit=15000&mimetype=image/svg+xml&prefix=fonts'
					}
				]
			}
		},

		webpackMiddleware: {noInfo: false}, // no webpack output

		// Karma有多少个浏览器并行启动
		concurrency: Infinity
	});
};



查看完整实现请访问 github GridManager