webpack+ES6的单元测试覆盖率统计

介绍

单元测试的代码覆盖率统计，是衡量测试用例好坏的一个的方法，有的公司直接把代码测试覆盖率做为一个硬性要求。尤为在多人合做的状况下。颇有可能在后期维护时候牵一发而动全身的代码修改中起到相当重要的检测。不过代码覆盖率也不是惟一标准，测试用例的好坏主要仍是看能不能覆盖尽量多的状况。

打包编译JS代码覆盖率问题

以前代码覆盖率在JS代码不须要编译的状况下。直接可使用KARMA的karma-coverage这个工具就能够直接统计结果。不过因为个人项目用上了WEBPACK的打包和babel的ES6编译。因此单单使用karma-coverage统计的代码覆盖率统计的是，编译打包后的代码，这个覆盖率直接没有了参考价值。通常打包后代码的覆盖率只有可怜的10%-20%由于WEBPACK帮你加入了不少它的代码。而测试要作到这些代码的覆盖是彻底没有意义的。因此就须要找一个能够查看编译前代码覆盖率的一个方法。

须要测试代码navbar.ctrl.js

let navbar = angular.module('navbar', []);
navbar.controller('navbarCtrl', ['$scope', function ($scope) {
    $scope.links = ['home', 'about'];
}]);
module.exports = navbar;
//export default navbar;//ES6单元测试支持有问题。因此改用了module.exports = navbar;写法

测试代码navbar.Spec.js

import navbar from './navbar.ctrl.js';
describe('navbar', function () {
    let scope;
    beforeEach(angular.mock.module('navbar'));
    beforeEach(angular.mock.inject(function ($rootScope, $controller) {
        scope = $rootScope.$new();
        $controller('navbarCtrl', {$scope: scope});
    }));
    it('Controller测试', function () {
        expect(scope).to.have.property('links').with.length(2);
    });
});

万能的GITHUB

而后带着上面的问题去GITHUB找有没有人解决过这样的问题，最后找到了isparta、isparta-instrumenter-loader、istanbul。

修改KARMA配置

karma.conf.js

module.exports = function (config) {
    config.set({

        // base path that will be used to resolve all patterns (eg. files, exclude)
        basePath: '',


        // frameworks to use
        // available frameworks: https://npmjs.org/browse/keyword/karma-adapter
        frameworks: ['mocha', 'chai'],


        // list of files / patterns to load in the browser
        files: ['app/**/*Spec.js'],


        // list of files to exclude
        exclude: [],


        // preprocess matching files before serving them to the browser
        // available preprocessors: https://npmjs.org/browse/keyword/karma-preprocessor
        preprocessors: {
            'app/**/*Spec.js': ['webpack', 'sourcemap'],
            'app/**/*(!Spec).js': ['webpack', 'sourcemap', 'coverage']
        },


        // test results reporter to use
        // possible values: 'dots', 'progress'
        // available reporters: https://npmjs.org/browse/keyword/karma-reporter
        reporters: ['mocha', 'coverage'],
        coverageReporter: {
            reporters: [
                {type: 'text-summary'},
                {type: 'html', dir: 'coverage/'}
            ]
        },


        // web server port
        port: 9876,


        // enable / disable colors in the output (reporters and logs)
        colors: true,


        // level of logging
        // possible values: config.LOG_DISABLE || config.LOG_ERROR || config.LOG_WARN || config.LOG_INFO || config.LOG_DEBUG
        logLevel: config.LOG_INFO,


        // enable / disable watching file and executing tests whenever any file changes
        autoWatch: false,


        // start these browsers
        // available browser launchers: https://npmjs.org/browse/keyword/karma-launcher
        browsers: ['Chrome'],


        // Continuous Integration mode
        // if true, Karma captures browsers, runs the tests and exits
        singleRun: true,

        // Concurrency level
        // how many browser should be started simultaneous
        concurrency: Infinity,

        webpack: {
            devtool: 'inline-source-map',
            module: {
                preLoaders: [{
                    test: /\.js$/,
                    exclude: [/node_modules/,/\.Spec.js$/],
                    loader: 'isparta-instrumenter'
                }],
                loaders: [
                    {test: /\.js$/, exclude: [/node_modules/], loader: 'ng-annotate!babel'},
                    {test: /\.html/, loader: 'raw'},
                    {test: /\.styl$/, loader: 'style!css!stylus'},
                    {test: /\.css$/, loader: 'style!css'}
                ]
            }
        },
        webpackServer: {
            noInfo: true // prevent console spamming when running in Karma!
        },
        plugins: [
            'karma-chrome-launcher',
            'karma-chai',
            'karma-mocha',
            'karma-webpack',
            'karma-sourcemap-loader',
            'karma-coverage',
            'karma-mocha-reporter'
        ]
    })
};

以上完成了编译前代码覆盖率的统计。

详解参数

files: ['app/**/*Spec.js'],

这个主要是导入那些是测试文件。

preprocessors: {
            'app/**/*Spec.js': ['webpack', 'sourcemap'],
            'app/**/*(!Spec).js': ['webpack', 'sourcemap', 'coverage']
        },

这个是导入前的预处理，由于没有必要统计测试代码的覆盖率，因此测试代码只须要['webpack', 'sourcemap'],就能够了。而被测试代码须要统计覆盖率，因此须要['webpack', 'sourcemap', 'coverage']。

webpack: {
            devtool: 'inline-source-map',
            module: {
                preLoaders: [{
                    test: /\.js$/,
                    exclude: [/node_modules/,/\.Spec.js$/],
                    loader: 'isparta-instrumenter'
                }],
                loaders: [
                    {test: /\.js$/, exclude: [/node_modules/], loader: 'ng-annotate!babel'},
                    {test: /\.html/, loader: 'raw'},
                    {test: /\.styl$/, loader: 'style!css!stylus'},
                    {test: /\.css$/, loader: 'style!css'}
                ]
            }
        },

这个KARMA中的webpack配置是最关键的。须要在真是WEBPACK打包前用isparta-instrumenter先load一下，记录编译前文件。这里有一个坑。export default navbar;这句话是ES6支持的可是不知道为何isparta-instrumenter-loader的时候就是编译有问题。因此只能改为module.exports = navbar;这样的写法。