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

前言

在前端开发中，测试常常是被忽略的一环。因此最近在研究前端自动化测试框架Karma，把个人的学习过程分享出来，希望对大家有帮助。

什么是Karma?

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

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

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

如果开启检测，则当文件有修改时，执行继续执行以上过程。

Karma的安装配置

初始项目结构

1. karma-example 
2.     ├── src 
3.          ├── index.js 
4.     ├── test 
5.     ├── package.json  

index.js的内容如下

1. function isNum(num) { 
2.   if (typeof num === 'number') { 
3.     return true 
4.   } else { 
5.     return false 
6.   } 
7. }  

安装Karma环境

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

1. npm i -g karma-cli 

然后在项目中安装karma包

1. npm i --save-dev karma 

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

上图是选项的示例，这里使用jasmine测试框架，PhantomJS作为代码运行的环境(也可以选择其他浏览器作为运行环境，比如Chrome，IE等)。最后在项目中生成karma.conf.js文件。

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

运行Karma

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

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

然后在项目根目录下运行karma start命令,我们可以看到运行的结果如下

可以看到，运行的结果显示测试成功。

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

Coverage

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

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

虽然并不是说代码覆盖率越高，测试的脚本写得越好(可以看看参考文献4)，但是代码覆盖率对撰写测试脚本还是有一定的指导意义的。因此接下来我们在Karma环境中添加Coverage。

首先安装好Karma覆盖率工具

1. npm i --save-dev karma-coverage 

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

1. module.exports = function(config) { 
2.   config.set({ 
3.     basePath: '', 
4.     frameworks: ['jasmine'], 
5.     files: [ 
6.       'src/**/*.js', 
7.       'test/**/*.js' 
8.     ], 
9.     exclude: [], 
10.  
11.     // modified 
12.     preprocessors: { 
13.         'src/**/*.js': ['coverage'] 
14.     }, 
15.  
16.     //modified 
17.     reporters: ['progress', 'coverage'], 
18.  
19.     // add 
20.     coverageReporter: { 
21.       type : 'html', 
22.       dir : 'coverage/' 
23.     }, 
24.  
25.     port: 9876, 
26.     colors: true, 
27.     logLevel: config.LOG_INFO, 
28.     autoWatch: true, 
29.     browsers: ['PhantomJS'], 
30.     singleRun: false, 
31.     concurrency: Infinity 
32.   }) 
33. }  

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

使用Webpack+Babel

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

安装karma-webpack

1. npm i --save-dev karma-webpack 

安装babel

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

然后文件进行改造，src/index.js文件修改为

1. function isNum(num) { 
2.   if (typeof num === 'number') { 
3.     return true 
4.   } else { 
5.     return false 
6.   } 
7. } 
8.  
9. exports.isNum = isNum  

text/index.js文件修改为

1. const Util = require('../src/index') 
2.  
3. describe('index.js: ', () => { 
4.   it('isNum() should work fine.', () => { 
5.     expect(Util.isNum(1)).toBe(true) 
6.     expect(Util.isNum('1')).toBe(false) 
7.   }) 
8. }) 

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

1. module.exports = function(config) { 
2.   config.set({ 
3.     basePath: '', 
4.     frameworks: ['jasmine'], 
5.     files: [ 
6.       'test/**/*.js' 
7.     ], 
8.     exclude: [], 
9.     preprocessors: { 
10.       'test/**/*.js': ['webpack', 'coverage'] 
11.     }, 
12.     reporters: ['progress', 'coverage'], 
13.     coverageReporter: { 
14.       type: 'html', 
15.       dir: 'coverage/' 
16.     }, 
17.     port: 9876, 
18.     colors: true, 
19.     logLevel: config.LOG_INFO, 
20.     autoWatch: true, 
21.     browsers: ['PhantomJS'], 
22.     singleRun: false, 
23.     concurrency: Infinity, 
24.     webpack: { 
25.       module: { 
26.         loaders: [{ 
27.           test: /\.js$/, 
28.           loader: 'babel', 
29.           exclude: /node_modules/, 
30.           query: { 
31.             presets: ['es2015'] 
32.           } 
33.         }] 
34.       } 
35.     } 
36.   }) 
37. }  

注意这里的修改：

1. files只留下test文件。因为webpack会自动把需要的其它文件都打包进来，所以只需要留下入口文件。
2. preprocessors也修改为test文件，并加入webpack域处理器
3. 加入webpack配置选项。可以自己定制配置项，但是不需要entry和output。这里加上babel-loader来编译ES6代码

运行karma start，成功了~

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

原因很简单，webpack会加入一些代码，影响了代码的Coverage。如果我们引入了一些其它的库，比如jquery之类的，将源代码和库代码打包在一起后，覆盖率会更难看。。这样的Coverage就没有了参考的价值。

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

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

修改webpack中babel-loader的配置

1. { 
2.   test: /\.js$/, 
3.   loader: 'babel', 
4.   exclude: /node_modules/, 
5.   query: { 
6.     presets: ['es2015'], 
7.     plugins: ['istanbul'] 
8.   } 
9. }  

因为这里引入了istanbul插件来检测Coverage，所以要把preprocessors里的coverage去掉。

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

作者：没有角的牛

来源：51CTO