博客
关于我
强烈建议你试试无所不能的chatGPT,快点击我
Javascript测试之karma + mocha
阅读量:5052 次
发布时间:2019-06-12

本文共 4374 字,大约阅读时间需要 14 分钟。

什么是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权限:

npm install -g mochanpm install -g karma-cli

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

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

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 }

现在解析一下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这两个浏览器里里运行测试:

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 use12     frameworks: ['mocha'],13 14 15     // list of files / patterns to load in the browser16     files: [17       'src/**/*.js',18       'test-lib/**/*.js',19       'test/**/*.js'20     ],21     22     // reporters : ['progress'],23 24     // list of files to exclude25     exclude: [26       27     ],28 29 30     // test results reporter to use31     // possible values: 'dots', 'progress', 'junit', 'growl', 'coverage'32     reporters: ['spec'],33 34 35     // web server port36     port: 9876,37 38 39     // enable / disable colors in the output (reporters and logs)40     colors: true,41 42 43     // level of logging44     // possible values: config.LOG_DISABLE || config.LOG_ERROR || config.LOG_WARN || config.LOG_INFO || config.LOG_DEBUG45     logLevel: config.LOG_INFO,46 47 48     // enable / disable watching file and executing tests whenever any file changes49     autoWatch: true,50 51 52     // Start these browsers, currently available:53     // - Chrome54     // - ChromeCanary55     // - Firefox56     // - 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     // - PhantomJS59     // - 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 it63     captureTimeout: 60000,64 65 66     // Continuous Integration mode67     // if true, it capture browsers, run tests and exit68     singleRun: false69   });70 };
View Code - karma.conf.js

 

运行测试

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

1 //greetings.js2 function sayHi(name){3     return name ? "Hi " + name : "Nobody comes";4 }

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

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 });

直接在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测试就更方便了。

 

 

 

 

 

转载于:https://www.cnblogs.com/inkie/p/3604174.html

你可能感兴趣的文章
Delphi进制转换(二进制/十进制/十六进制)
查看>>
数据结构:冒泡排序及其改进、插入排序和希尔排序
查看>>
HTML基础 --- HTML属性
查看>>
mongodb复制集Replica Set使用简介
查看>>
poi 读取excel row.getCell() 为null
查看>>
bzoj 1646 抓住那头牛
查看>>
SQL面试题
查看>>
JavaScript_Util_04
查看>>
给网站添加选项卡图标
查看>>
android 2个按钮 显示在同一列
查看>>
4.22 IP通信基础
查看>>
Intellij IDEA使用总结(转载)
查看>>
iOS如何隐藏各种bar
查看>>
IIS解决上传文件大小限制
查看>>
Longest Consecutive Sequence hashset
查看>>
JMS-mq-发布/订阅
查看>>
JAVA-I/O(4)-字符流-Reader
查看>>
【转】周杰伦在哪几届金曲奖中分别得的哪些奖?
查看>>
第三阶段:1.数据分析:5.关键数据-转化率
查看>>
crontab是不认识profile的
查看>>