构建基于Karma的ES6测试工作流

Mar 14, 2016

2195

我们清楚,代码质量应该由代码测试来保证。在ES6规范发布后,越来越多的项目开始尝试使用ES6甚至是ES7,那么,本文就以ES6的代码来谈谈如何构建高效的测试工作流。

本文主要会使用到如下工具:

  • karma 自动化测试工具,命令行执行浏览器测试
  • babel 编译ES6/7代码
  • mocha 测试框架
  • chai 断言库

接下来,我们通过一个简单的实例来展示如何构建ES6的测试工作流。

安装

我们通过npm的方式来安装依赖包,以下为依赖包列表:

"devDependencies": {
  "babel-plugin-transform-es2015-modules-umd": "^6.6.5",
  "babel-preset-es2015": "^6.6.0",
  "chai": "^3.5.0",
  "karma": "^0.13.22",
  "karma-babel-preprocessor": "^6.0.1",
  "karma-chai": "^0.1.0",
  "karma-chrome-launcher": "^0.2.2",
  "karma-coverage": "^1.0.0",
  "karma-mocha": "^0.2.2",
  "karma-mocha-reporter": "^2.0.0",
  "mocha": "^2.4.5"
}

执行 npm install 将安装所依赖的包。

这里简单说明一下这份依赖表中的一些包,karma-mocha-reporter用于使karma日志输出保持mocha原来的风格;karma-coverage是用来检验测试的代码覆盖率。

babel 6默认情况下并没有转换ES6代码的功能,需要安装相应的转换器插件,所以安装了babel-preset-es2015和babel-plugin-transform-es2015-modules-umd,通过.babelrc文件来设置,具体的配置在下一节给出。

配置

karma配置karma.conf.js

module.exports = function(config) {
  config.set({
    basePath: '',
    frameworks: ['mocha', 'chai'],
    files: [
      'src/**/*.js',
      'test/**/*.spec.js'
    ],
    exclude: [
      '**/*.swp'
    ],
    preprocessors: {
      'src/**/*.js': ['babel', 'coverage'],
      'test/**/*.spec.js': ['babel']
    },
    reporters: ['mocha', 'coverage'],
    port: 9876,
    colors: true,
    logLevel: config.LOG_INFO,
    autoWatch: true,
    browsers: ['Chrome'],
    singleRun: false,
    concurrency: Infinity,
    coverageReporter: {
      reporters:[
        {type: 'html', dir: 'coverage/'},
        {type: 'text-summary'}
      ],
    }
  });
}

babel配置.babelrc,auxiliaryCommentBefore是用在babel编译时添加istanbul忽略,代码覆盖率能够清晰展示。

{
  "presets": ["es2015"],
  "plugins": ["transform-es2015-modules-umd"],
  "auxiliaryCommentBefore": "istanbul ignore next"
}

测试代码

现在karma可以执行ES6测试代码了,那么现在我们来创建一个ES6类。

class Polygon {
  constructor(height, width) {
    this.height = height;
    this.width = width;
  }

  calcArea() {
    return this.height * this.width;
  }
}

export default Polygon;

对应的测试代码如下:

import Polygon from '../src/polygon';

describe('ES6 Polygon', function() {
  let polygon = new Polygon(5, 4);

  it('should return 20 when calling calcArea', function() {
    assert.equal(20, polygon.calcArea());
  });
});

执行 karma start 便可执行测试。如果没有全局安装karma,可以在package.json中添加相应的test指令,执行 npm test 即可。

下图为我本机的测试:

后记

以上只是一个简单的ES6测试工作流的例子,在实际工作中,测试代码的编写和维护是一个比较繁杂的过程,但是能够保证代码质量,在一些基础的组件还是很有必要的。

代码地址:https://github.com/wengeek/karma-es6-sample

NodeJs 」相关文章

Wen's Blog

文章归档 » 文章标签 » 博主:吴文伟,Web开发爱好者,专注于前端开发,该博客用于记录和分享平时遇到的一些问题以及知识。

订阅

联系方式

链接