前端单元测试初识

最近部门开始做单元测试,我作为探路者先行摸索,经过一段时间的摸索,感觉还是颇有收获,下面整理一波!

1. 什么是单元测试?

单元测试(unit testing),软件中的最小可测试单元进行检查和验证。代码以单元为单位进行测试。它可以是一个函数、一个模块、一个包或者一个类,甚至是一个对象。在 JavaScript 中,通常是以类或者模块作为一个单元。

2. 为什么要接入单元测试,单元测试有什么魔力?

  • 开发质量的提升。将测试前置,从而可以越早发现问题,提高效率,降低成本。
    确实可以在写单元测试发现一些代码问题,同时为了更好的通过单元测试,会去优化一下代码。
  • 优化设计。编写单元测试将使用户从调用者的角度观察、思考,特别是使用TDD驱动开发的开发方式,会让使用者把程序设计成易于调用和可测试,并且解除软件中的耦合。
    TDD可不是一件容易的事,刚入门比较难,大佬忽略不计。
  • 便于后期重构。单元测试可以为代码的重构提供保障,在完整、有效的单元测试覆盖率的基础上,只要重构代码之后单元测试全部运行通过,那么在很大程度上表示这次重构没有引入新的BUG。
    没有尝试,应该是可以吧!
  • 文档记录。单元测试就是一种无价的文档,它是展示函数或类如何使用的最佳文档,这份文档是可编译、可运行的、并且它保持最新,永远与代码同步。
    也是待考证,渣渣单元测试可能没这个功能吧!
  • 具有回归性。自动化的单元测试避免了代码出现回归,编写完成之后,可以随时随地地快速运行测试,而不是将代码部署到设备之后,然后再手动地覆盖各种执行路径,这样的行为效率低下,浪费时间。
    这个倒是真的。

3. 单元测试可以带来的问题。

  • 会占用一定的开发成本,增加开发工作量。
    不得不说,单元测试真是比代码难写很多,什么叫一天写代码,三天写单元测试,真的是有可能的。
  • 旧项目加入单元测试改动很大,会有一定的风险。
    旧项目如果涉及不合理,结构不单元,想写好单元测试太难,这就需要改动,但是改动又可能造成新的问题,想好方案再加入单元测试吧!
  • 会有一定的学习成本,对开发者要求比较高。
    是有学习成本,我能说我学了好几个月吗,了解底层才能写出好的单元测试。

4. 单元测试有哪些模型?

  • TDD(Test Driven Development):测试驱动开发,先写测试代码,之后编写能通过测试的业务代码,可以不断的在能通过测试的情况下重构。
    TDD试了一下,还是不容易,网上视频课的例子看起来很容易,但是实操项目里的还真不易。
  • BDD(Behivior Driven Development):行为驱动开发,与 TDD 很相似,测试代码的风格是预期结果,更关注功能,看起来像需求文档。
    BDD没试过,这个不好说了。

5. 单元测试框架

框架:提供整个测试环境,包括except,assert语法,mock模块,代码覆盖率。

框架名称 Jest Mocha Jasmine
star 35.3K 20.5K 15.1K
Fork 5.1K 2.8K 2.2K
特点 零配置,开箱即用 灵活,可扩展 零配置,开箱即用
支持断言(assert) 支持 可配置(引入chai) 支持
支持仿真(mock) 支持 可配置 支持
模拟函数(spies) 支持 可配置 支持
支持快照(Snapshot) 支持 可配置 可配置
测试进程 隔离并行测试 全局 全局
测试覆盖率报告 无需配置 需配置 无需配置
运行环境 node环境 node以及浏览器环境 node环境

注:star 数据来源于2021-04-07

  • Jest facebook坐庄,基于Jasmine,开箱即用,对react 项目友好,适合大型项-目并行测试,效率高。
  • Mocha 使用人最多,高扩展性, 但需要较多的配置。
  • Jasmine 开箱即用,测试兼容你选择的所有框架或库,但对异步测试兼容弱,全局。

没有尝试,难以体会Jest的开箱即用,以上三种框架我都试了一下,果然还是Jest最便捷,基本不需要怎么配置,就能顺利进行基本单元测试,体验特别丝滑。


好啦,以上就是关于单元测试的一些基本东西啦,下一节将会说说Jest的一些东西。

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

推荐阅读更多精彩内容