【入门篇】Karma + Jasmine 前端的单元测试与自动化测试

为什么要做单元测试？

1、这块代码比较复杂，还是别人写的，我不敢随便改，万一改出问题就不好了
2、你怎么不小心把我那块代码给改了，虽然该动小，但是改出问题了
3、我很久前做的一个功能，现在要加点新的功能，但是不小心破坏了老的功能

前端怎么做单元测试?

所用的工具需要：测试框架+断言库，常用的测试框架有Karma，mocha，其中Karma是一个以浏览器为引擎的测试，而mocha用的是node.js，淘宝推出了一个类Karma的开源框架叫Totoro

由于Karma是使用真实的浏览器环境，并且可以测试兼容性，所以我们采用 karma.

常用的断言库有Node的assert，Jasmine，expect，Chai，和Karma比较搭配的是Jasmine。

安装Karma+Jasmine

$ npm install karma -g
$ npm install karma jasmine-core karma-jasmine karma-chrome-launcher

执行 karma init 生成 karma.config.js 如下图

一路回车就好，然后新建一个 src 目录写源文件(src/util.js)，如下

var util = {
  reverse(str) {
    return str.split('').reverse().join('')
  }
}

然后为这个util写测试文件 test/util-test.js 如下

describe('reverse', function() {
  it('reverse word', function() {
    expect(util.reverse('abc')).toEqual('cba')
  })
})

接下来把文件添加到karma.config.js里面，如下

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

然后运行 karma start 执行测试，如果遇到报 karma 的模块找不到，则可以把找不到的模块装成全局的

$ karma start

终端会输出测试结果

浏览器也会输出结果

可以看到测试通过，然后再来看一下不通过的情况，如下

describe('reverse', function() {
  it('reverse word', function() {
    expect(util.reverse('abc')).toEqual('abc')
  })
})

终端输出

这就实现了一个最基本的单元测试，现在来看一下测试的覆盖率

测试覆盖率报告

一般测试的覆盖率要越高越好，Karma 支持查看测试代码的覆盖率，安装一个包

$ npm install karma-coverage -g

然后在karma.config.js里添加配置，如下

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

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

// test results reporter to use
// possible values: 'dots', 'progress'
// available reporters: https://npmjs.org/browse/keyword/karma-reporter
reporters: ['progress', 'coverage'],

添加一个预处理，告诉他src下的源文件需要用coverage预处理一下，然后生成的report放在coverage目录下，用HTML的形式，重新运行 karma start 将会生成HTML文件，打开这个HTML文件，就可以看到覆盖率报告。

如上图所示，覆盖率为100%，现在给源代码添加一个逻辑分支

var util = {
  reverse(str) {
    if(str.length <= 1){
      return str
    } else {
      return str.split('').reverse().join('')
    }
  }
}

然后再看覆盖率报告

我们可以看到分支变成了 50% ，当我们点进util.js 也可以看到哪些代码没有覆盖到如下

黑色的 I 表示没覆盖到的if分支，在util.js 中添加测试代码

it('reverse字符串长度为1时返回自己', function() {
  expect(util.reverse('a')).toEqual('a')
})

覆盖率会提高，如下图所示

入门篇到此结束，下一篇应用篇——把单元测试接入到实际工程，感谢阅读！

【入门篇】Karma + Jasmine 前端的单元测试与自动化测试

猜你喜欢