ribbon image search rewind fast-forward speech-bubble pie-graph star

使用 babel , Karma, Jasmine, Istanbul 实现 ES6 测试覆盖率

目前我们很多项目都开始使用的是 ES6 进行开发,但是我们在测试的时候都是需要转换到 ES5 才能运行我们的测试,但是我们又需要代码的测试覆盖率。下面将一步步的帮助您完成基于 ES6 源码的代码覆盖率报告的生成。

开始

我们先初始化项目,确保项目支出 ES6的环境,如果没有可以复制下面的依赖,然后 npm install

"devDependencies": {
    "babel-core": "^6.26.0",
    "babel-loader": "^7.1.2",
    "babel-plugin-istanbul": "^4.1.5",
    "babel-preset-es2015": "^6.24.1",
    "babel-preset-stage-1": "^6.24.1",
    "browserify": "^13.1.0",
    "istanbul": "^0.4.5",
    "jasmine-core": "*",
    "jspm": "^0.16.53",
    "karma": "^1.3.0",
    "karma-babel-preprocessor": "^7.0.0",
    "karma-browserify": "^5.1.0",
    "karma-chrome-launcher": "^2.0.0",
    "karma-commonjs": "^1.0.0",
    "karma-coverage": "^1.1.1",
    "karma-firefox-launcher": "^1.0.0",
    "karma-jasmine": "^1.0.2",
    "karma-phantomjs-launcher": "^1.0.2",
    "karma-webpack": "^2.0.6",
    "watchify": "^3.7.0",
    "webpack": "^3.8.1"
  }

如果项目中已经有了的话我们可以安装一些你遗漏的 npm 包。

参考 package.json

关于使用 karma + jasimine 进行 JS 单元测试 你可以点击 链接 了解详情。

我们在项目初始化 karam 的配置文件 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: ['jasmine'],


    // list of files / patterns to load in the browser
    files: [
      //  './node_modules/babel-polyfill/dist/polyfill.min.js',
        //'src/*.js',
        'tests/*.test.js'
    ],
    webpack: {
        module: {

            loaders: [
                {
                    test: /\.js$/,
                    loader: 'babel-loader',
                    exclude: /(node_modules)/,
                },
            ]
        },
        devtool: 'inline-source-map',
    },

    // list of files to exclude
    exclude: [

    ],
    preprocessors: {
        'tests/*.test.js': ['webpack'],
        'src/*.js': ['coverage'],
    },

    reporters: ['progress', 'coverage'],
    port: 9876,
    colors: true,
    logLevel: config.LOG_INFO,
    autoWatch: true,
    browsers: ['PhantomJS'],
    singleRun: false,
    concurrency: Infinity,
    // Configure code coverage reporter
    coverageReporter: {
        reporters: [
            // generates ./coverage/lcov.info
            {type:'lcovonly', subdir: '.'},
            // generates ./coverage/coverage-final.json
            {type:'json', subdir: '.'},
            {type:'html', subdir: 'html'},
        ]
    },
    plugins: [
        'karma-webpack',
        'karma-jasmine',
        'karma-chai',
        //  'karma-chrome-launcher',
        'karma-phantomjs-launcher',
        'karma-sourcemap-loader',
        'karma-coverage',
    ],
  })
}

接下来我们需要安装 babel-plugin-istanbul

npm install babel-plugin-istanbul --save-dev  

istanbul 是前端非常棒的一款代码覆盖率测试工具。由于需要进行 ES6 的 babel 转换,我们需要配置 .babelrc 文件,我们在 package.json 中添加下面一段代码,或者自己使用 .babelrc 等。

{
    "presets": ["es2015"],
    "plugins": [
      [
        "istanbul",
        {
          "exclude": [
            "**/*.spec.js"
          ]
        }
      ]
    ]
}

接下来我们在我们的 src 目录下添加 一段代码 find-max.js 文件。

/**
 * find max value in an array O(n);
 **/
function findMax(arr) {  
    if(arr.length==1) {
        return arr[0];
    }
    let max = arr[0];
    for (let i = 1; i < arr.length; i++) {
        if(max < arr[i]) {
            max = arr[i];
        }
    }
    return max;
}

module.exports = findMax;  

添加测试文件 tests/find-max.test.js:

const findMax = require('../src/find-max.js');  
it('Find the maximum value in an array', function () {  
    const inputArr = [1,111,2,12,180,500,-12,0];
    const max = findMax(inputArr);
    expect(max).toEqual(500);
});

这个时候可以输入: npm run test 就可以看到测试结果了。然后在 coverage 目录下可以看到测试报告了。

添加项目 badge

如果我们希望在自己的 Github 项目里添加 badge 您可以 登录 https://codecov.io 进行项目注册。然后覆盖率的报告上传上去就可以了。

然后添加图片 :

<img src="https://codecov.io/gh/JackPu/JavaScript-Algorithm-Learning/graph/badge.svg" />  

把其中 /JackPu/JavaScript-Algorithm-Learning/ 替换成自己的项目就好。具体使用可以看 这里

参考项目

扩展阅读

https://medium.com/@gunnarlium/es6-code-coverage-with-babel-jspm-karma-jasmine-and-istanbul-2c1918c5bb23

You Can Speak "Hi" to Me in Those Ways