coverage es6覆蓋率解決方法

該文章整理於2017年，當時爲解決在GridManager2.3.0版本中ES6替換時遇到的問題。

原文以下

替換以後發現，原先的測試覆蓋率從72% 降低至 24%。經過 coverage html 在本地測試後發現， 覆蓋目標文件使用的爲 babel 轉化以後的代碼。

解決方法

因爲GridManager 中使用的是webpack環境下的karma ， 因此下面的步驟將基於karma, webpack。

一、安裝所需插件:

npm install --save-dev babel-plugin-istanbul
npm install --save-dev karma-babel-preprocessor
npm install --save-dev karma-sourcemap-loader
複製代碼

二、修改 package.json

"scripts": {
    "test": "NODE_ENV=test karma start"
}
複製代碼

三、.babelrc 中增長配置項

"env": {
    "test": {
      "plugins": ["istanbul"]
    }
}
複製代碼

四、修改 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