前端单元测试学习小结

测试开发应用方法
测试驱动开发(英语:Test-driven development,缩写为 TDD)是一种软件开发过程中的应用方法,由极限编程中倡导,以其倡导先写测试程序,然后编码实现其功能得名。
BDD行为驱动开发,即Behaviour Driven Development,是一种新的敏捷开发方法。它更趋向于需求,需要共同利益者的参与,强调用户故事(User Story)和行为。

关于前端测试:

https://zhuanlan.zhihu.com/p/19590189
https://zhuanlan.zhihu.com/p/26050231

知乎:如何进行前端自动化测试?https://www.zhihu.com/question/29922082
  • 前端是一种特殊的GUI软件
  • API unit测试方法论在测试GUI时并不能解决所有问题。
  • 在前端很大部分代码中,前端测试应该向传统GUI测试方法论需求解决方案。百度百科:https://baike.baidu.com/item/GUI%E8%BD%AF%E4%BB%B6%E6%B5%8B%E8%AF%95
  • GUI测试的成本非常高,前端这种特殊的GUI软件,具有天生的快速迭代特征,这使得case维护成本也变得非常高,经常跟不上迭代速度。
  • 一个标准的互联网应用产品的前端部分,粗略估计大概有20%的业务基础代码比较稳定,比如通用组件、通用算法和数据模块等,可以针对这些建立复杂一些的API和GUI测试用例来保证质量。

所以一般情况下,前端测试分为单元测试和ui测试。

关于测试的一些知识点梳理:

单元测试:一段代码(通常一个方法)调用另一段代码,随后检验一些假设的正确性,如果假设的结果错了,单元测试注定会失败,一个”单元“指的的一个方法或函数。

测试用例: 测试用例(Test Case)是为某个特殊目标而编制的一组测试输入、执行条件以及预期结果,以便测试某个程序路径或核实是否满足某个特定需求。

测试套件: 通常把一组相关的测试称为一个测试套件(test suite)。通过测试套件,将服务于同一个测试目的或同一运行环境下的一系列测试用例有机的组合起来。测试套件是按照测试计划所定义的各个阶段的测试目标决定的,即先有测试计划,后面才有测试套件。

单元测试知识点参考:
https://zhuanlan.zhihu.com/p/27144800
https://zhuanlan.zhihu.com/p/27159015

Mocha

Mocha is a feature-rich JavaScript test framework running on Node.js and in the browser, making asynchronous testing simple and fun. Mocha tests run serially, allowing for flexible and accurate reporting, while mapping uncaught exceptions to the correct test cases. Hosted on GitHub.

教程
* 官方文档 https://mochajs.org/
* 阮一峰mocha教程 http://www.ruanyifeng.com/blog/2015/12/a-mocha-tutorial-of-examples.html
* CNode https://cnodejs.org/topic/59e3873520a1a3647d72ac39
* 个人翻译中文文档 https://segmentfault.com/a/1190000011362879

命名: 测试脚本与所要测试的源码脚本同名,但是后缀名为.test.js(表示测试)或者.spec.js(表示规格)。比如,add.js的测试脚本名字就是add.test.js

本身mocha是不包含断言库的,所以必须引入第三方断言库,目前比较受欢迎的断言库 有 should.js、expect.js 、chai,具体的语法规则需要大家去查阅相关文档。

chai

断言库可以理解为比较函数,也就是断言函数是否和预期一致,如果一致则表示测试通过,如果不一致表示测试黑失败,一个unit test里面可以包含多个断言语句。

教程
* 官方文档 http://www.chaijs.com/
* 中文api http://www.jianshu.com/p/f200a75a15d2

karma

The main purpose of Karma is to make your test-driven development easy, fast, and fun.

* github https://github.com/karma-runner/karma
* karma介绍 http://taobaofed.org/blog/2016/01/08/karma-origin/

单元测试

结合我们目前的技术栈,本文主要介绍React和vue的单元测试。

React 单元测试

React的测试方法主要为将其中的计算逻辑抽离出来形成单元,再进行测试。
测试模块应该尽量使你的应用逻辑上保持独立——模块不依赖于 I/O 和 UI。

对于 Web 应用来讲,I/O 是什么?没有文件和数据库的操作?其实不仅仅是这样,还有 Ajax 调用,本地存储,DOM 操作等,对我而言,任何和浏览器 API 有关的都是 I/O 操作。
参考: https://zhuanlan.zhihu.com/p/26266010

重要的是模块的设计,它暴露出来的函数非常简单——给一个 state,得到下一个 state。

在Redux中 每一个reducer都相当于一个模块,而且以Redux为状态管理的React应用当中,reducer几乎包括了我们所有前端业务的核心,它们全都是(State, Action) => nextState形式的纯函数。所以测好它就测了大半。

而在View层应用当中,我们一般只进行stateless component的测试。

详细请见: http://insights.thoughtworks.cn/react-and-unit-testing/

Vue 单元测试

在vue-cli生成项目之时选择需要unit测试,并选择karma mocha,项目�中就已经有了test文件夹,其中基于的unit有了一定配置文件以及一个Hello World例子。

具体使用以及例子详情参考:

官方用例:
https://cn.vuejs.org/v2/guide/unit-testing.html
https://github.com/vuejs/vue-test-utils-mocha-webpack-example

论坛文章:
https://zhuanlan.zhihu.com/p/26752090
https://www.zhihu.com/question/50566681/answer/267276949
https://zhuanlan.zhihu.com/p/27962486

使用建议:
https://engineering.doximity.com/articles/five-traps-to-avoid-while-unit-testing-vue-js

nodejs 测试

https://zhuanlan.zhihu.com/p/27986118
https://my.oschina.net/wangshijun/blog/871947

总结

任何测试都是针对项目减少错误率,从而保证项目的效率以及可用性,所以在写测试用例的时候更应该结合项目现有需求而进行。

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

推荐阅读更多精彩内容