前端工程师看测试之TDD和BDD

最近报了一个前端进阶班,专注进行前端技能提升,第一课老师就要求预习mocha and should .js

what?一万个懵逼这是啥万一,搜索了一下mocha+should.js就是传说中的BDD测试框架,一直认为前端只要写好前端代码就好了,老师说大厂对前端有会写单元测试代码要求的,好的,老师说啥都对。

首先呢,什么是BDD,什么是TDD呢?

BDD:Behavior Driven Development,行为驱动开发是一种敏捷软件开发的技术,它鼓励软件项目中的开发这,QA和非技术人员之间的协作。

TDD:Test-Driven Development,就是测试驱动开发,它是一种测试先于编写代码的思想用于指导软件开发,测试驱动开发是敏捷开发中的一项核心时间和技术,也是一种设计方法论,TDD的原理是在开发功能代码之前,先编写单元测试用例代码,测试代码确定需要编写什么产品代码

对于测试,我一直认为是用于验证developer的代码是否符合需求,稍微了解TDD,BDD之后才发现,测试不仅仅是对于代码的验证,找出几个bug,更是一种约束一种规范,是与项目需求息息相关的


好了,废话 不多说直接来聊一聊mocha和should.js

啥是mocha呢?

Mocha是在Node.js和浏览器上运行的功能丰富的JavaScript测试框架,使异步测试变得简单有趣。mocha测试串行运行,允许灵活准确的报告,同时将未捕获的异常映射到正确的测试用例

其实mocha就是一个工具,首先我们需要命令行安装它,先创建一个test包

在test包里进行mocha的安装

npm install mocha

这样我们mocha就安装OK了

第二步就是测试脚本的写法

mocha的作用就是运行测试脚本,首先必须学会写测试脚本,所谓‘测试脚本’,就是用来测试源码的脚本

首先我们可以先写一个数字相加的需求,创建一个add.js


现在呢我们源码就写好了, 接下来要做的就是测试这个相加函数是不是正确,这时候就要写测试脚本,通常,测试脚本与所要测试的源码脚本同名,但是后缀名为 .test.js(表示测试)或者.spec.js(表示规格)

好,我们现在创建测试add函数的脚本,我们命名就叫add.test.js

然后里面打入这些验证代码


上面这代码呢,就是测试脚本吗,它可以独立执行,测试脚本里应该包含一个或多个describe块,每个describe块应该包括一个或多个it块

describe块称为‘测试套件“,表示一组相关的测试,它是一个函数,第一个参数是测试套件的名称(‘加法函数的测试”),第二个参数是一个实际执行的函数

it块称为‘测试用例‘,表示一个单独的测试,是测试的最小单位,也是一个函数,第一个参数是测试用例的名称(“1加1应该等于2”),第二个参数是一个实际执行的函数

运行测试

我们测试脚本写好了如何运行呢?

正常的呢,如果我们对于package.json里配置没有做任何修改呢,就按照官方的回到终端,进行命令运行



这样,对应的log就会答应出来

当然也可以配置,在package.json里进行配置。如图



加这么一句话,就OK了,接下来,我们直接在终端里输入mocha 回车,就可以直接运行测试了

断言测试

大家应该看到代码里有一句话是add(1,1).to.be.equal(2)

所谓断言,就是判断源码的实际执行结果与预期结果是否一直,如果不一致就抛出一个错误

所有的测试用例(it块)都应该含有一句或多句的断言,它是编写测试用例的关键,断言功能由断言库来实现,mocha本身不带断言库,所以我们需要引入断言库,上面用的是chai断言库,并且指定了它的expect断言风格,expect断言的优点是很接近自然语言,因为是看的阮一峰的git学写的,但是现在比较流行的应该是node的assert,是杨文坚老师推荐的,如下,有个对比


配置文件mocha.opts

MOcha允许在test目录下面,放置配置文件mocha.opts,把命令行参数写在里面。具体的可以查看官网,比如一个demo里mocha.opts文件里就一行代码



可以查看官网


就不多说啦

异步测试

mocha默认每个测试用例最多执行2000毫秒,如果到时没有得到结果,就报错,对于涉及异步操作的测试用例,这个时间往往是不够的,需要用-t或--timeout参数指定超时门槛

我们可以看一下阮一峰老师的demo


上面的测试用例,需要4000毫秒之后才有运行结果 ,所以需要-t或--timeout参数,改变默认的超时设置


上面命令将测试的超时时限指定为5000毫秒

另外,上面的测试用例里面,有一个done函数,it块执行的时候,传入一个done参数,当测试结束的时候,必须显式调用这个函数,告知macha测试结束了,否则,mocha就无法知道,测试是否结束,会一直等到超时报错。

而且呢,mocha内置对promise的支持,允许直接返回promise,等到它的状态改变,再执行断言,而不用显示调用done方法


。。。

。。。

测试用例也有一些对应的钩子

我上面好多举例的都是阮一峰老师的demo,我把他的git地址给大家

https://github.com/ruanyf/mocha-demos.git

只要把里面demo都跑一遍其实就差不多,当然老师用的是chai断言库和expect断言风格,可以尝试尝试node 的assert和should.js,都差不多

好啦,今天就结束啦!下面是我的git地址,大家可以一起互粉哦

https://github.com/Aimi-Ding

©著作权归作者所有,转载或内容合作请联系作者
  • 序言:七十年代末,一起剥皮案震惊了整个滨河市,随后出现的几起案子,更是在滨河造成了极大的恐慌,老刑警刘岩,带你破解...
    沈念sama阅读 203,362评论 5 477
  • 序言:滨河连续发生了三起死亡事件,死亡现场离奇诡异,居然都是意外死亡,警方通过查阅死者的电脑和手机,发现死者居然都...
    沈念sama阅读 85,330评论 2 381
  • 文/潘晓璐 我一进店门,熙熙楼的掌柜王于贵愁眉苦脸地迎上来,“玉大人,你说我怎么就摊上这事。” “怎么了?”我有些...
    开封第一讲书人阅读 150,247评论 0 337
  • 文/不坏的土叔 我叫张陵,是天一观的道长。 经常有香客问我,道长,这世上最难降的妖魔是什么? 我笑而不...
    开封第一讲书人阅读 54,560评论 1 273
  • 正文 为了忘掉前任,我火速办了婚礼,结果婚礼上,老公的妹妹穿的比我还像新娘。我一直安慰自己,他们只是感情好,可当我...
    茶点故事阅读 63,580评论 5 365
  • 文/花漫 我一把揭开白布。 她就那样静静地躺着,像睡着了一般。 火红的嫁衣衬着肌肤如雪。 梳的纹丝不乱的头发上,一...
    开封第一讲书人阅读 48,569评论 1 281
  • 那天,我揣着相机与录音,去河边找鬼。 笑死,一个胖子当着我的面吹牛,可吹牛的内容都是我干的。 我是一名探鬼主播,决...
    沈念sama阅读 37,929评论 3 395
  • 文/苍兰香墨 我猛地睁开眼,长吁一口气:“原来是场噩梦啊……” “哼!你这毒妇竟也来了?” 一声冷哼从身侧响起,我...
    开封第一讲书人阅读 36,587评论 0 258
  • 序言:老挝万荣一对情侣失踪,失踪者是张志新(化名)和其女友刘颖,没想到半个月后,有当地人在树林里发现了一具尸体,经...
    沈念sama阅读 40,840评论 1 297
  • 正文 独居荒郊野岭守林人离奇死亡,尸身上长有42处带血的脓包…… 初始之章·张勋 以下内容为张勋视角 年9月15日...
    茶点故事阅读 35,596评论 2 321
  • 正文 我和宋清朗相恋三年,在试婚纱的时候发现自己被绿了。 大学时的朋友给我发了我未婚夫和他白月光在一起吃饭的照片。...
    茶点故事阅读 37,678评论 1 329
  • 序言:一个原本活蹦乱跳的男人离奇死亡,死状恐怖,灵堂内的尸体忽然破棺而出,到底是诈尸还是另有隐情,我是刑警宁泽,带...
    沈念sama阅读 33,366评论 4 318
  • 正文 年R本政府宣布,位于F岛的核电站,受9级特大地震影响,放射性物质发生泄漏。R本人自食恶果不足惜,却给世界环境...
    茶点故事阅读 38,945评论 3 307
  • 文/蒙蒙 一、第九天 我趴在偏房一处隐蔽的房顶上张望。 院中可真热闹,春花似锦、人声如沸。这庄子的主人今日做“春日...
    开封第一讲书人阅读 29,929评论 0 19
  • 文/苍兰香墨 我抬头看了看天上的太阳。三九已至,却和暖如春,着一层夹袄步出监牢的瞬间,已是汗流浃背。 一阵脚步声响...
    开封第一讲书人阅读 31,165评论 1 259
  • 我被黑心中介骗来泰国打工, 没想到刚下飞机就差点儿被人妖公主榨干…… 1. 我叫王不留,地道东北人。 一个月前我还...
    沈念sama阅读 43,271评论 2 349
  • 正文 我出身青楼,却偏偏与公主长得像,于是被迫代替她去往敌国和亲。 传闻我的和亲对象是个残疾皇子,可洞房花烛夜当晚...
    茶点故事阅读 42,403评论 2 342

推荐阅读更多精彩内容