前端新手使用karma+mocha+chai+sinon 进行angularjs 单元测试
这里只谈如何搭建环境。
选型:在jasmine 和 mocha+chai中间比较了一下,根据项目需要选择了后者。
安装依赖包和环境
直接执行下列命令安装或在项目目录下 运行npm install(package.json已经配置好了)、
npm install chai mocha sinon angular-mocks@1.5.5 --save-dev
npm install karma-mocha karma-chai karma-sinon --save-dev
npm install karma-chrome-launcher --save-dev
npm install karma-coverage --save-dev
npm rebuild //build packages for current platform
注意:angular-mocks版本号尽量跟angularjs版本号一致。
生成karma.config.js
在项目目录下,确认karma.config.js存在,如果不存在则使用运行karma init 根据提示填写对应选项生成配置文件。
根据项目情况修改karma.config.js文件
要注意的参数:
1)自动生成的配置文件可能没有plugins,可以手动注册plugins,如下
plugins:[
'karma-mocha',
'karma-chai',
'karma-coverage',
'karma-sinon',
'karma-chrome-launcher',
'karma-jasmine'
],
2)files,添加测试所需的所有js文件(运行时js和test js),可以使用glob pattern来匹配路径,但推荐不要使用过于宽泛的pattern来匹配js,因为顺序会导致测试时js加载出错。将被依赖的js放在最上方,确保文件顺序符合依赖关系要求,以myApp为例,顺序如下:
files:['lib/angular.min.js','lib/angular-mock.js','lib/angular-md5.js','lib/jquery-2.2.4.min.js','lib/jquery.page.js','lib/es5-sham.min.js','lib/bootstrap.min.js','lib/angular-multi-step-form.js','lib/angular-scroll-glue.js','lib/angular-ui-router.min.js','lib/angular-translate.js','lib/angular-translate-loader-partial.js','lib/ng-tree-dnd.js','lib/angular-cron-jobs.min.js','lib/ngDialog.js','js/app.js','js/service/constant.js','js/service/**/*.js','js/directive/**/*.js','js/filter/*.js','js/controller/**/*.js','test/**/*.test.js'
],
3)singleRun
开发环境进行测试时,建议置为false,但是在jenkins集成环境中,该配置项必须置为true。当为false且autoWatch置为true时,karma自动监控文件变化并运行所有测试用例。
4)browsers
在windows或其他有GUI的OS中运行测试时,可以设置为 chrome或其他浏览器,具体关键字参考karma配置文件说明;
对于没有GUI或者不需要打开GUI的情况,可以设置
browsers:[‘ChromeHeadless’],
或
browsers: [‘PhantomJS’]
前者要求安装chrome且版本号高于59,后者要求在第一步中安装下列两个组件:
npm i -D phantomjs-prebuilt –phantomjs_cdnurl=https://bitbucket.org/ariya/phantomjs/downloads
npm i -Dkarma-phantomjs-launcher
目前phantomjs版本维护面临困境,建议选择chrome59后的版本。
5)frameworks
由于步骤一选择mocha+chai+sinon,此处填写 frameworks:[‘mocha’,’chai’]
如果选择使用jasmine,此处填写jasmine即可。
添加UT
在根目录的测试指定目录添加xx.test.js,路径需要包含在上述files配置项中。
运行测试用例
配置package.json文件
“scripts”:{
“unittest”:”karma start karma.config.js –single-run”
},
这样以后就可以用npm run unittest来运行测试用例了
在项目根目录下的命令行中运行
karma start karma.config.js
或者
karma runkarma.config.js (singleRun = true情况下)
或者:
npm run unittest
可能遇到的问题:
1)Can not load”coverage”, it is not registered!
若检查项目目录node_modules下面确实存在karma-coverage,则 使用-g 选项再次安装karma和karma-coverage
2)can’t initiate module xxxx(angularjs),说明可能files的js顺序有问题或者少注册了js文件。
前端新手使用karma+mocha+chai+sinon 进行angularjs 单元测试相关推荐
- 大前端的自动化工厂(5)—— 基于Karma+Mocha+Chai的单元测试和接口测试
一. 前端自动化测试 大多数前端开发者对测试相关的知识是比较缺乏的,一来是开发节奏很快,来不及写,另一方面团队里也配备了"人肉测试机",完全没必要自己来.但随着项目体量的增大,许多 ...
- 前端单元测试-karma+mocha+chai
一.概念普及 1.单元测试运行环境: 运行环境是集成一系列功能的工具,我们可以通过它来选择"测试框架".自动打开浏览器.查看测试结果等功能.我们可以把它近似的理解为vue的vue- ...
- vue-cli自动化测试karma + mocha + chai
最近再为团队团队选择可行的测试方案.前端目前是vue-cli技术栈.试着在vue项目添加测试.把测试完整的方案记录下来. vue官网给的例子用的是karma + mocha + chai. karma ...
- 使用karma+mocha+chai为vue组件库做单元测试
前言 单元测试,这一环节对我们的应用的重要性不言而喻,它能很大程度确保我们项目运行的健壮性.因此,前一段时间,笔者公司要求现有的vue搭建的npm组件库做单元测试.之前,笔者对单元测试做过了解,一直想 ...
- 前端自动化测试(webdriverio+mocha+chai)
介绍 webdriverio是什么? 首先我们需要了解一款强大的基于浏览器的开源自动化测试工具,Selenium,Selenium可以模拟真实用户的行为,就像真正的用户在操作一样,同时Selenium ...
- karma+phantomjs+mocha+chai使用心得
前言 作为一名被逼着开发转测试,后台转前台的苦逼来说,分享一下前端js单元测试的一些使用心得.按照网上的教程来走虽然大部分能够运行,但是部分教程不适用于实际测试环境,所以我来发布一个简单的教程,方便后 ...
- 使用karma + mocha + sinon 测试 Ajax 请求
使用karma + mocha + sinon 测试 Ajax 请求 在用 karma + mocha 进行 JS 代码测试的时候,难免会遇到要测试 Ajax 发请求的情况.然后查找一下网上的资料,发 ...
- 前端测试 karma mocha should 都是什么鬼?
测试TDD和BDD的区别 TDD是测试驱动开发,通过用测试用例来规范约束开发者,编写出质量更高的代码 BDD是行为驱动开发,描述行为路径,就像描述故事,产品和前线业务人员可参与到开发流程中,减轻测试和 ...
- 【前端测试与集成】使用mocha和sinon进行单元测试
目录 简介 编写测试 Spy Mock Stub Test a Promise xhr Hooks Coverage 简介 Mocha是流行的JavaScript测试框架之一,通过它添加和运行测试,从 ...
最新文章
- 跟踪workflow instance 状态
- 香港深水埗一街道新春气氛浓厚
- 使用JustDecompile修改程序集
- 实现页面打开后滚动到最底端的效果(转)
- DataGrid单击行时改变颜色
- annotationdriven
- 如何编辑ttf字体文件
- React 项目开发问题积累
- 五个很厉害的 CNN 架构
- matlab求解lmi,Matlab的LMI工具箱中最优化问题
- 情迁QQ机器人新增的茉莉词库功能调教
- 第五节、Vim编辑器与Shell入门
- 运放实现方波三角波发生器-总结报告
- 用命令启动java我的世界_我的世界Minecraft Mod开发学习笔记 - 实现一个简单的命令Mod...
- python验证码识别cnn_用CNN识别验证码的实用教程
- 解决: void SendDelegateMessage(NSInvocation *): delegate (webView:decidePolicyForNavigationAction:requ
- 代码报错 Uncaught TypeError: Converting circular structure to JSON
- 四十种 智能合约 支持平台
- python新浪股票接口 2019_用python爬虫进行新浪腾讯股票数据采集
- c语言课程教学的建议,C语言程序设计课程教学思考.doc