Javascript测试之karma + mocha

什么是Karma?

mocha是一个js的测试框架,之前写过的一篇博客介绍了如何用node.js的环境来运行测试。Karma是一个驱动测试的Runner。也就是说,karma为测试框架准备运行环境,可以让这些测试在真正的浏览器里运行。

而且,karma运行测试的过程是自动化的。自动化并非理所当然的事。想起之前用Jasmine的时候,需要在一个html文件里引入各种js文件,然后用某个浏览器来打开这个html文件,使js在浏览器中运行起来。当测试内容发生变化时,需要刷新页面,并时不时地清空缓存。。。有了karma,就省事多啦~而且不需要额外的配置,karma就会自己找到系统已经装好的浏览器并启动。

karma支持的测试框架还有Jasmine和Qunit。

 

环境搭建

假设已经搭建好了node.js平台。先全局安装mocha和karma的命令行接口karma-cli,有可能需要sudo权限:

Javascript测试之karma + mocha
npm install -g mocha
npm install -g karma-cli
Javascript测试之karma + mocha

要测试的文件目录结构如图:

Javascript测试之karma + mocha

先在demo-karma-mocha目录下运行 npm install 安装package.json里的依赖,package.json内容如下:

Javascript测试之karma + mocha
 1 //package.json
 2 {
 3   "name": "karma-mocha-example",
 4   "version": "0.0.0",
 5   "description": "This is an example to show how to use karma with mocha",
 6   "main": "index.js",
 7   "dependencies": {
 8     "karma": "~0.10.8"
 9   },
10   "devDependencies": {
11     "mocha": "~1.18.0",
12     "karma-mocha": "~0.1.3",
13     "should": "~2.1.1",
14     "karma-chrome-launcher": "~0.1.2",
15     "karma-firefox-launcher": "~0.1.3"
16   }
17 }
Javascript测试之karma + mocha

现在解析一下demo-karma-mocha这个目录的结构。

node_modules是npm依据package.json下载的包,src是源文件目录,test是测试文件目录。

test-lib目录下的should.js是mocha测试要用到的断言库。找到node_modules/should/should.js,将其复制到test-lib目录下。

karma.conf.js描述了karma测试的配置信息,在该目录下运行karma start时,会默认从该文件中读取信息。可以通过在该目录下运行karma init的方式来帮助生成karma.conf.js文件。

 

配置karma.conf.js

运行karma init后,karma会提一些问题,可以通过按tab键来切换选项。如果一些选项需要依赖某些未安装的npm包,karma也会提醒你之后用什么命令来安装这些依赖。

当karma问道:”what is the location of your source and test file"时,依次输入 src/**/*.js , test-lib/**/*.js , test/**/*.js ,表示要运行src、test-lib、test中的所有js文件。

值得注意的是,autoWatch这一属性最好选择true,这样,karma会在指定目录有更新时自动跑测试。

本例中karma.conf.js文件的内容如下,设置了同时在Chrome和Firefox这两个浏览器里里运行测试:

Javascript测试之karma + mocha
 1 // Karma configuration
 2 // Generated on Mon Mar 17 2014 12:46:02 GMT+0800 (CST)
 3 
 4 module.exports = function(config) {
 5   config.set({
 6 
 7     // base path, that will be used to resolve files and exclude
 8     basePath: ‘‘,
 9 
10 
11     // frameworks to use
12     frameworks: [‘mocha‘],
13 
14 
15     // list of files / patterns to load in the browser
16     files: [
17       ‘src/**/*.js‘,
18       ‘test-lib/**/*.js‘,
19       ‘test/**/*.js‘
20     ],
21     
22     // reporters : [‘progress‘],
23 
24     // list of files to exclude
25     exclude: [
26       
27     ],
28 
29 
30     // test results reporter to use
31     // possible values: ‘dots‘, ‘progress‘, ‘junit‘, ‘growl‘, ‘coverage‘
32     reporters: [‘spec‘],
33 
34 
35     // web server port
36     port: 9876,
37 
38 
39     // enable / disable colors in the output (reporters and logs)
40     colors: true,
41 
42 
43     // level of logging
44     // possible values: config.LOG_DISABLE || config.LOG_ERROR || config.LOG_WARN || config.LOG_INFO || config.LOG_DEBUG
45     logLevel: config.LOG_INFO,
46 
47 
48     // enable / disable watching file and executing tests whenever any file changes
49     autoWatch: true,
50 
51 
52     // Start these browsers, currently available:
53     // - Chrome
54     // - ChromeCanary
55     // - Firefox
56     // - Opera (has to be installed with `npm install karma-opera-launcher`)
57     // - Safari (only Mac; has to be installed with `npm install karma-safari-launcher`)
58     // - PhantomJS
59     // - IE (only Windows; has to be installed with `npm install karma-ie-launcher`)
60     browsers: [‘Chrome‘, ‘Firefox‘],
61 
62     // If browser does not capture in given timeout [ms], kill it
63     captureTimeout: 60000,
64 
65 
66     // Continuous Integration mode
67     // if true, it capture browsers, run tests and exit
68     singleRun: false
69   });
70 };
View Code - karma.conf.js

 

运行测试

要测试的内容很简单,就是看sayHi这个函数能不能在有输入时跟人打个招呼:

Javascript测试之karma + mocha
1 //greetings.js
2 function sayHi(name){
3     return name ? "Hi " + name : "Nobody comes";
4 }
Javascript测试之karma + mocha

相应的测试代码写在greeting-spec.js中:

Javascript测试之karma + mocha
 1 //greetings-spec.js
 2 describe("Counter", function() {
 3 
 4     it("should say Hi given a name", function() {
 5         sayHi("Tom").should.equal("Hi Tom");
 6     });
 7 
 8     it("should not say Hi if no input", function() {
 9         sayHi().should.equal("Nobody comes");
10     });
11     
12 });
Javascript测试之karma + mocha

直接在demo-karma-mocha下运行 karma start 就可以启动两个浏览器并运行测试了,测试的结果会在命令行中显示。

由于设置了 autoWatch:true ,当改变src、test-lib、test文件夹中的任意一个文件时,karma都会重新运行所有测试。

如果autoWatch的值为false,则在 karma start 后,还需要 karma run 来手动运行每一次测试。

 

问题

这样还仍然不够方便。

比如,虽然用npm引入了should.js,却还要在node之外手动地将should.js放在test-lib中。而且,为了让其在浏览器里运行,这个程序没有用到node.js模块化的功能。这一点可以用browserify来解决,把运行在后端的js代码转换为浏览器能运行的代码。

另外,grunt也可以集成karma,用它来运行karma测试就更方便了。

Javascript测试之karma + mocha,布布扣,bubuko.com

Javascript测试之karma + mocha

上一篇:Mongo JavaTest


下一篇:小程序和vue的区别