前端单元测试之Karma环境搭建

前言

在前端开发中，测试经常是被忽略的一环。所以最近在研究前端自动化测试框架Karma，把我的的学习过程分享出来，但愿对你们有帮助。

什么是Karma？

Karma是由Google团队开发的一套前端测试运行框架。它不一样于测试框架（例如jasmine，mocha等），运行在这些测试框架之上。主要完成一下工做：

1. Karma启动一个web服务器，生成包含js源代码和js测试脚本的页面；

2. 运行浏览器加载页面，并显示测试的结果；

3. 若是开启检测，则当文件有修改时，执行继续执行以上过程。

Karma的安装配置

初始项目结构

karma-example
    ├── src
         ├── index.js
    ├── test
    ├── package.json

index.js的内容以下

function isNum(num) {
  if (typeof num === 'number') {
    return true
  } else {
    return false
  }
}

安装Karma环境

为了方便搭建Karma环境，咱们能够全局安装karma-cli来帮咱们初始化测试环境：

npm i -g karma-cli

而后在项目中安装karma包

npm i --save-dev karma

接下来在工程目录中运行karma init来进行测试环境初始化，并按照指示一步步完成。

上图是选项的示例，这里使用jasmine测试框架，PhantomJS做为代码运行的环境（也能够选择其余浏览器做为运行环境，好比Chrome，IE等）。最后在项目中生成karma.conf.js文件。

至此就搭建好了基本的Karma运行环境。

运行Karma

在test目录里编写一个简单的测试脚本，咱们使用的是jasmine测试框架，具体的api能够参考jasmine api，内容以下

describe('index.js: ', function() {
  it('isNum() should work fine.', function() {
    expect(isNum(1)).toBe(true)
    expect(isNum('1')).toBe(false)
  })
})

而后在项目根目录下运行karma start命令,咱们能够看到运行的结果以下

能够看到，运行的结果显示测试成功。

同时，由于咱们以前设置了监控文件的修改，因此当咱们修改源文件或者测试脚本的时候，Karma会自动帮咱们再次运行，无需咱们手动操做。

Coverage

如何衡量测试脚本的质量呢？其中一个参考指标就是代码覆盖率（coverage）。

什么是代码覆盖率？简而言之就是测试中运行到的代码占全部代码的比率。其中又能够分为行数覆盖率，分支覆盖率等。具体的含义再也不细说，有兴趣的能够自行查阅资料。

虽然并非说代码覆盖率越高，测试的脚本写得越好（能够看看参考文献4），可是代码覆盖率对撰写测试脚本仍是有必定的指导意义的。所以接下来咱们在Karma环境中添加Coverage。

首先安装好Karma覆盖率工具

npm i --save-dev karma-coverage

而后修改配置文件karma.conf.js，

module.exports = function(config) {
  config.set({
    basePath: '',
    frameworks: ['jasmine'],
    files: [
      'src/**/*.js',
      'test/**/*.js'
    ],
    exclude: [],

    // modified
    preprocessors: {
        'src/**/*.js': ['coverage']
    },

    //modified
    reporters: ['progress', 'coverage'],

    // add
    coverageReporter: {
      type : 'html',
      dir : 'coverage/'
    },

    port: 9876,
    colors: true,
    logLevel: config.LOG_INFO,
    autoWatch: true,
    browsers: ['PhantomJS'],
    singleRun: false,
    concurrency: Infinity
  })
}

再运行karma start后，会在目录下生成coverage目录，里面有本次测试的覆盖报告。打开后的结果以下

使用Webpack+Babel

在实际项目中，有事会须要用到Webpack和ES6，因此接下来将Webpack和Babel集成进Karma环境中。

安装karma-webpack

npm i --save-dev karma-webpack

安装babel

npm i --save-dev babel-loader babel-core babel-preset-es2015

而后文件进行改造，src/index.js文件修改成

function isNum(num) {
  if (typeof num === 'number') {
    return true
  } else {
    return false
  }
}

exports.isNum = isNum

text/index.js文件修改成

const Util = require('../src/index')

describe('index.js: ', () => {
  it('isNum() should work fine.', () => {
    expect(Util.isNum(1)).toBe(true)
    expect(Util.isNum('1')).toBe(false)
  })
})

接下来修改配置文件karma.conf.js

module.exports = function(config) {
  config.set({
    basePath: '',
    frameworks: ['jasmine'],
    files: [
      'test/**/*.js'
    ],
    exclude: [],
    preprocessors: {
      'test/**/*.js': ['webpack', 'coverage']
    },
    reporters: ['progress', 'coverage'],
    coverageReporter: {
      type: 'html',
      dir: 'coverage/'
    },
    port: 9876,
    colors: true,
    logLevel: config.LOG_INFO,
    autoWatch: true,
    browsers: ['PhantomJS'],
    singleRun: false,
    concurrency: Infinity,
    webpack: {
      module: {
        loaders: [{
          test: /\.js$/,
          loader: 'babel',
          exclude: /node_modules/,
          query: {
            presets: ['es2015']
          }
        }]
      }
    }
  })
}

注意这里的修改：

1. files只留下test文件。由于webpack会自动把须要的其它文件都打包进来，因此只须要留下入口文件。

2. preprocessors也修改成test文件，并加入webpack域处理器

3. 加入webpack配置选项。能够本身定制配置项，可是不须要entry和output。这里加上babel-loader来编译ES6代码

运行karma start，成功了~

再看看Coverage，卧槽。。竟然不是百分之百了。。。

缘由很简单，webpack会加入一些代码，影响了代码的Coverage。若是咱们引入了一些其它的库，好比jquery之类的，将源代码和库代码打包在一块儿后，覆盖率会更难看。。这样的Coverage就没有了参考的价值。

还好有大神给咱们提供了解决方案，须要安装插件

npm i --save-dev babel-plugin-istanbul

修改webpack中babel-loader的配置

{
  test: /\.js$/,
  loader: 'babel',
  exclude: /node_modules/,
  query: {
    presets: ['es2015'],
    plugins: ['istanbul']
  }
}

由于这里引入了istanbul插件来检测Coverage，因此要把preprocessors里的coverage去掉。

搞定之后，运行karma start。当当当当~一切OK啦，尽情编写测试脚本把~

最后附上示例项目地址:karma-example

References

1. Karma

2. Karma using ES6

3. Jasmine API

4. 测试覆盖（率）到底有什么用？

5. Just Say No to More End-to-End Tests