coverage es6覆盖率解决方法

该文章整理于2017年，当时为解决在GridManager2.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
    });
};

---

查看最近完整实现请访问GridManager

---