大前端的自动化工厂(5)—— 基于Karma+Mocha+Chai的单元测试和接口测试

 

一. 前端自动化测试

大多数前端开发者对测试相关的知识是比较缺乏的,一来是开发节奏很快,来不及写,另一方面团队里也配备了“人肉测试机”,完全没必要自己来。但随着项目体量的增大,许多人维护同一份代码,经常会出现有些函数莫名其妙地结果不对了,或者某个接口的入参变了,又或者哪位大哥把后端返回的数据结构给改了。每天工作的时间里被拉来拉去帮人定位问题,结果花了很多时间却发现大部分都是别人的锅。每当遇到项目上线,那就更热闹了,跟着其他“人肉测试机”大家一起点点点......

很多团队都有个通病,凡是出了问题,先往前端身上推,然后前端各种检测排查,到最后是谁的锅,谁呵呵一笑然后领走就完了,如果你也曾因此心里印下了不计其数的草泥马的马蹄印,那我强烈建议你学习【前端自动化测试】相关的知识,或许你不会经常用到它,但在组内互怼和甩锅的环节绝对能助你一臂之力。当然总有一天,你会发现测试的价值远不止这样。它对大型项目提供的可靠性保障是人力无法比拟的

前端很流行这样一句话:如果你觉得单元测试没什么用,只能说明你做的项目不够大。

二. 工具简介

2.1 Karma

官方网址:https://karma-runner.github.io/2.0/index.html

Karma为前端自动化测试提供了跨浏览器测试的能力,可以自动在Chrome,Firefox,IE等主流浏览器依次跑完测试用例,同时也支持headless浏览器(入phantomJs)中运行测试用例。webpack+babel可以主动为想要适配的浏览器提供转码和垫片补丁引入能力,而Karma可以为最终的结果提供验证能力。Karma的配置方式可以阅读《webpack4.0各个击破(9)——Karma篇》进行了解。

2.2 Mocha

Mocha是前端自动化测试框架,测试框架需要解决兼容不同风格断言库测试用例分组同步异步测试架构生命周期钩子等框架级的能力。

  • Mocha的基本语法
describe('我现在要测某一个页面的几个功能',function(){     describe('现在要测XX功能',function(){         it('某个变量的值应该是数字',function(){             //写断言         })     });      describe('现在要测YY功能',function(){         it('某个数组长度应该不小于10',function(){             //写断言         })     }); })
  • 异步测试语法
describe('现在要测XX功能',function(){     it('某个变量的值应该是数字',function(done){         //写断言         //手动调用done()表示异步结束,类似于Promise中的resolve     }) });
  • 不同风格的断言库

    支持should.js,expect.js及node核心断言模块assert等。

  • 生命周期钩子

    生命周期钩子一般用来建立和清理环境或全局变量。

                        
关键字:
50000+
5万行代码练就真实本领
17年
创办于2008年老牌培训机构
1000+
合作企业
98%
就业率

联系我们

电话咨询

0532-85025005

扫码添加微信