用Karma结合QUnit配置前端自动化单元测试环境，介绍Karma的配置文件简单说明
什么是Karma和QUnit
Karma是一个前端测试运行环境，具有监听文件变化自动执行测试、在不同浏览器环境下执行测试等特点。
QUnit是由JQuery团队创建的一个强大、易用的前端单元测试框架。
安装和配置Karma和QUnit
安装
假设已经进入要测试的项目文件夹根目录
```
//安装Karma,--save-dev作用是把安装插件记录在package.json中
npm install karma --save-dev
//安装Karma插件
npm install karma-qunit --save-dev
npm install karma-phantomjs-launcher --save-dev
//在全局安装karma命令行插件
npm install -g karma-cli
//如果在node_modules文件夹下没有qunitjs,再安装qunit
npm install qunitjs --save-dev
```
配置
继续输入命令karma init,命令行会提示配置步骤,按照提示选择/输入配置项:
```
Which testing framework do you want to use ?
Press tab to list possible options. Enter to move to the next question.
选择需要使用的测试框架，一般可选Jasmine、mocha、qunit等
> qunit
Do you want to use Require.js ?
This will add Require.js plugin.
Press tab to list possible options. Enter to move to the next question.
是否需要使用requirejs
> yes or no
Do you want to capture any browsers automatically ?
Press tab to list possible options. Enter empty string to move to the next question.
选择使用什么环境测试js，可以选各种浏览器/phantomjs等，可以多选，最后输入空字符串跳到下一项。
> PhantomJS
>
What is the location of your source and test files ?
You can use glob patterns, eg. "js/*.js" or "test/**/*Spec.js".
Enter empty string to move to the next question.
定义被测文件和测试文件的路径。
> src/js/**/*.js
> test/js/**/*.js
>
Should any of the files included by the previous patterns be excluded ?
You can use glob patterns, eg. "**/*.swp".
Enter empty string to move to the next question.
添加要排除的文件，
>
Do you want Karma to watch all the files and run the tests on change ?
Press tab to list possible options.
是否需要监听上面定义的文件的变化，一旦变化立即运行测试。
> no
```
经过这个初始化过程，会在根目录生成一个karma.conf.js文件:
```
// Karma configuration// Generated on Sat Oct 10 2015 14:23:08 GMT+0800 (中国标准时间)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-adapterframeworks:['qunit'],// list of files / patterns to load in the browserfiles:['src/被测试的js.js','test/写有测试代码的js.js','test/写有测试代码的js2.js'],// list of files to excludeexclude:[],// preprocess matching files before serving them to the browser// available preprocessors: https://npmjs.org/browse/keyword/karma-preprocessorpreprocessors:{},// test results reporter to use// possible values: 'dots', 'progress'// available reporters: https://npmjs.org/browse/keyword/karma-reporterreporters:['progress'],// web server port// 定义端口,一般不用改port:9876,// enable / disable colors in the output (reporters and logs)colors:true,// level of logging// possible values: config.LOG_DISABLE || config.LOG_ERROR || config.LOG_WARN || config.LOG_INFO || config.LOG_DEBUGlogLevel:config.LOG_INFO,// enable / disable watching file and executing tests whenever any file changes// 是否监听文件变化自动运行测试autoWatch:false,// start these browsers// available browser launchers: https://npmjs.org/browse/keyword/karma-launcherbrowsers:['PhantomJS','Chrome'],// Continuous Integration mode// if true, Karma captures browsers, runs the tests and exits// 是否运行完一次测试之后自动关闭浏览器singleRun:true})}
```
注意，如果singleRun和autoWatch都设为false，则在karma start之后不会运行测试，不知道是本来就如此还是我没配置对，请高手指教 Browsers设置了Chrome或者Phantomjs或者其他的，都要安装相应的插件npm install karma-*-launcher，*号替换成Chrome等，可选插件看这里。
配置成功后在命令行输入karma start，命令行会显示：
弹出来的Chrome界面：
开始测试
在src文件夹下创建test.js，内容如下：
```
// 一个字符串翻转函数functionstringReverse(str){returntypeofstr==="string"&&str.split("").reverse().join("");}
```
在test文件夹下创建string.json，内容如下：
```
(function(){QUnit.module('string-test');test("reverse string",function(assert){assert.equal(stringReverse("abc"),"cba","test success");});}());
```
修改配置文件:
```
files:['src/test.js','test/string.js']
```
在命令行输入karma start，可以看到输出：
在Chrome和PhantomJS下都方法都返回正确。 如果把string.js改成:
```
(function(){QUnit.module('string-test');test("reverse string",function(assert){assert.equal(stringReverse("ccc"),"cba","abc reverse to cba");});}());
```
则函数返回值和我们预期的不一样，会提示错误：
总结:
这里主要说明了一下karma和qunit之间配合搭建前端自动化测试环境，不详细说明qunit的使用。
karma还可以配合很多其他测试框架一起使用，比如Jasmine和mocha等。
karma可以和grunt或者gulp配合使用，再和IDE比如sublime结合，能做到敲完代码立即自动化执行任务触发运行测试，非常便捷。
欢迎大家关注公众号：程序员一凡，获取软件测试技术、大厂面试资料。
