如何做好前端单元测试?字节5年测试老司机是这样说的!

近几年,前端发展越来越迅猛,各类框架层出不穷,前端实现的业务逻辑也越来越复杂,前端单元测试也越来越受重视,包括百度在内的一些大厂在面试中也会问到单元测试相关的题目。那么前端应该如何做好单元测试?

什么是单测

单测的定义

来自维基百科的定义:

在计算机编程中, 单元测试(Unit Testing)又称为 模块测试,是针对程序模块(软件设计的最小单位)来进行正确性检验的测试工作。
程序单元是应用的最小可测试部件。在过程化编程中,一个单元就是单个程序、函数、过程等;对于面向对象编程,最小单元就是方法,包括基类(超类)、抽象类、或者派生类(子类)中的方法。

定义里面指出,单元测试针对的是程序的最小单元,因此我们应该针对最小单元来写单测。

单测完善程度的衡量

单测完善程度的衡量用覆盖率来衡量

关于测试覆盖率,我们大致了解下以下几个常见的计算维度:

  • 行覆盖率:可执行语句执行的比例
  • 函数覆盖率:函数被调用的比例
  • 分支覆盖率:判断语句分支被执行的比例

来看下面这个例子:

对于测试用例 foo(4),分支覆盖率只有50%,原因是 foo(4) 只测试了if 为 true 的情况,没有测试到 if 为 false 的情况。

如果想要分支覆盖率达到100%,还应该测试 foo(5)。

为什么需要单测

现状与问题

  • 缺乏意识:没有单测意识,很多代码没有单测
  • 缺乏设计:模块缺乏设计,相互耦合,写单测困难
  • 测试困难:升级公共 API,人工测试验证困难
  • 测试不全面:部分代码分支众多,人工测试没办法覆盖所有分支

单测的价值与意义

  • 能力建设:一个具备开发经验的开发人员,基本上都会编写单元测试。即便不会,可以通过培训来快速达成。从学习曲线上看,单元测试很容易上手。
  • 提升效率:能够通过 mock 数据,及早发现问题,而越早发现Bug,造成的浪费就会越小。
  • 追求卓越:单元测试可以充当一个设计工具,它有助于开发人员去思考代码结构的设计,让代码更加有利于测试。
  • 测试更全面:能够覆盖 QA 测试覆盖不到的情况,比如各种 if 分支、异常处理。
  • 更有信心:升级公共 API 时,如果依赖这个 API 的所有代码单测都能通过,那我们对这次代码升级是更有信心的。
现在我也找了很多测试的朋友,做了一个分享技术的交流群,共享了很多我们收集的技术文档和视频教程。
如果你不想再体验自学时找不到资源,没人解答问题,坚持几天便放弃的感受
可以加入我们一起交流。而且还有很多在自动化,性能,安全,测试开发等等方面有一定建树的技术大牛
分享他们的经验,还会分享很多直播讲座和技术沙龙
可以免费学习!划重点!开源的!!!
qq群号:110685036【暗号:csdn999】

怎样写单测

单测的原则:FIRST

单测需要测什么:RIGHT BICEP

结果正确

这个是最基本的检查,如果单测的运行结果都不正确,那其他的都免谈。

边界条件检查

边界检查尤为重要,很多错误都是发生在边界上。边界检查遵循 CORRECT

  • 有序性:如果一组值是有序的,那么在向其中删除或者添加时,需要校验这组值是否仍然是有序的
  • 引用/耦合性:对于类的状态、其他对象的状态等需要做一些假设,程序员就需要对代码进行测试,保证在假设未满足的情况下运行良好。
  • 存在性:当数据不存在的时候,程序是否运行良好,例如null,空字符串等
  • 基数性:这里的基数主要强调的是计数,考虑以“0-1-N 原则”,当数值分别为0、1、N 时,可能出现的结果,其中N 为最大值。
  • 时间性:要充分考虑与时间相关的问题,涉及到并发、异步、超时等这些情况需要特别注意,所有事情的发生时间是否在预期范围内。

反向关联检查

  • 例:对于加密算法,使用解密算法反向检查其输出,验证解密后明文是否正确。
  • 例:对于写操作API,使用读操作API来反向检查验证

交叉检查

  • 例: 对性能优化的算法,使用性能差但验证过的算法交叉检查


强制错误条件发生

  • 例: Mock依赖系统不可用
 或者 Mock系统时间错误
  • 例:甚至可以直接throw error,来验证程序对错误的处理

满足性能要求

当某个程序升级的时候,是否会对性能造成影响?这需要我们对程序的性能进行测试

写单测的时机

写单测的时机主要有以下三种,大家可以根据自己的实际情况来进行选择。

具体实现代码之前

即测试驱动开发(TDD):编写某个功能的代码之前先编写测试代码,然后编写使测试通过的功能代码,重复这个过程,通过测试来推动整个开发的进行。

特点:UT 能够更好的实践我们的代码设计。对于某些复杂度较高的接口(甚至是一些私有方法),建议使用 TDD 进行开发。

与具体实现代码同步进行

先写少量功能代码,紧接着写单元测试(重复这两个过程,直到完成功能代码开发)。

特点:每个单测比较简单易懂,可读性可维护性都比较好(重构时单测的改动不大)。

编写完功能代码后

这种单元测试“粒度”会比较粗。对同样的功能代码,采取前两种方案的结果可能是用10个“小”的单测来覆盖,而这种方案写的单测,往往是用1个“大”的单测来覆盖。

特点:逻辑就比较复杂,因为它要测的东西很多,可读性可维护性可能会比较差。

单测的思路

测试工具的分类

在我们开始选择单测工具之前,需要先了解测试工具的几种分类:

  • Test runner
  • Test framework
  • Assertion library
  • Testing Plugins

通常需要这几种类别的工具组合一起使用来完成测试,也有测试框架集成了这几类工具,如 Jest,做到开箱即用。

Test runner

测试运行器,只负责找出代码中所有的单元测试用例,然后启动运行它们,最终获取测试结果。并不关心那些测试用例到底是用什么语言编写的,以及我们究竟采用的是什么框架,它所做的仅仅是运行这些测试而已。

Karma是 Test runner

Test framework

测试框架,它定义了测试用例的语法和API,以及如何为这些用例编写断言。

Jasmine MochaJest 是 Test framework

Testing Plugins

测试插件如Sinon,使我们能够执行更多不同的测试,如mock、stubs、 fake servers等。

Assertion library

断言指的是一些布尔表达式,在程序中的某个特定点该表达式值为真,判断代码的实际执行结果与预期结果是否一致,而断言库则是讲常用的方法封装起来。

常用断言库主要有:

  • assert (TDD) node自带
assert("mike" == user.name);
  • expect.js(BDD) expect 风格的断言
expect(foo).to.be("aa");
  • should.js(BDD)should 风格的断言
foo.should.be("aa"); 
  • chai(BDD/TDD) - 集成了expect()、assert()和 should 风格的断言

测试框架的选择

以下介绍几种目前流行的测试工具供大家参考,主要有:

  • Jest
  • Mocha
  • Jasmine
  • AVA
  • Tape

Jest

Jest是目前最流行的框架之一,是Facebook团队构建和维护的JavaScript测试框架,基于 Jasmine,至今已经做了大量修改添加了很多特性。

主要有以下优点:

  • 开箱即用配置少,API简单
  • 支持断言和仿真
  • 支持快照测试
  • 在隔离环境下测试
  • 优雅的测试覆盖率报告
  • 良好的官网文档

Mocha

Mocha是目前使用最多的js测试框架,同时支持前端和后端测试。可以在node.js和浏览器中运行,使异步测试变的简单而有趣。Mocha测试按串行运行,将未捕获的异常映射到正确的测试用例上,从而可以灵活、准确地报告。

主要优点包括:

  • 适用于前端和后端
  • 支持NodeJS调试器
  • 支持任何浏览器
  • 支持Object Mock
  • 社区成熟用的人多,测试各种东西社区都有示例

但是mocha不提供断言,需要引入断言库,断言库可以选择 chai sinon

Jasmine

Jasmine可以模仿用户行为,Jasmine可用于测试前端的可见性,单击清晰度以及不同分辨率下的UI响应速度。 Jasmine允许通过延迟和等待时间来自动化用户行为,以模拟实际的用户行为。

主要优点有:

  • 几乎为0的外部依赖,适用于网站、Node.js项目或任何JavaScript可以运行的地方
  • 开箱即用(支持断言和仿真),API简单
  • 支持前端和后端测试

AVA

AVA是一种极简的轻量级测试框架,它利用了Javascript的异步特性,可以并发运行测试。它主要专注于针对基于NodeJS的代码运行测试。

主要优点包括:

  • 体积小,运行速度快
  • 异步并发运行测试
  • 比大多数其他测试框架更快
  • 简单语法
  • 干净的堆栈跟踪,使得可以检测到任何潜在的错误

Tape

Tape 架构上与AVA非常相似,它不支持全局变量,因此需要在每个测试文件中require Tape。

主要优点为:

  • 体积最小,只提供最关键的东西
  • 只提供最底层的 API,为开发人员编写测试用例提供完全的自由
  • 支持ES6,Typescript和coffee脚本标准
  • 支持大多数现代浏览器上的测试执行

选择哪种测试框架不是非黑即白的,每种测试框架都有各自的优缺点,选择哪种框架可以根据项目实际情况及个人习惯来定。

个人更倾向于 Jest,因为它容易上手,开箱即用,功能全面,官方文档很详细,对于新手来说使用成本很低。

END今天的分享就到此结束了!点赞关注不迷路~

本文来自互联网用户投稿,该文观点仅代表作者本人,不代表本站立场。本站仅提供信息存储空间服务,不拥有所有权,不承担相关法律责任。如若转载,请注明出处:http://www.hqwc.cn/news/234399.html

如若内容造成侵权/违法违规/事实不符,请联系编程知识网进行投诉反馈email:809451989@qq.com,一经查实,立即删除!

相关文章

Oracle SQL优化

1、书写顺序和执行顺序 在Oracle SQL中,查询的书写顺序和执行顺序是不同的。 1.1SQL书写顺序如下: SELECTFROMWHEREGROUP BYHAVINGORDER BY 1.2 SQL执行顺序 FROM:数据源被确定,表连接操作也在此步骤完成。 WHERE:对…

kafka中的常见问题处理

文章目录 1. 如何防⽌消息丢失2. 如何防⽌重复消费3. 如何做到消息的顺序消费4. 如何解决消息积压问题4.1 消息积压问题的出现4.2 消息积压的解决⽅案 5. 实现延时队列的效果5.1 应用场景5.2 具体方案 1. 如何防⽌消息丢失 ⽣产者:1)使⽤同步发送 2&…

关于 SLO,我们需要了解什么?

什么是 SLO? SLO(Service Level Objective)是服务质量目标的短语缩写。它通常指的是维护系统的最高级别的目标,或服务等级协议(SLA)中的服务质量目标。它能够定义客户和用户在使用软件系统时所期望的服务质…

无公网IP环境如何远程访问本地内网搭建的Emby影音库服务器

文章目录 1.前言2. Emby网站搭建2.1. Emby下载和安装2.2 Emby网页测试 3. 本地网页发布3.1 注册并安装cpolar内网穿透3.2 Cpolar云端设置3.3 Cpolar内网穿透本地设置 4.公网访问测试5.结语 1.前言 在现代五花八门的网络应用场景中,观看视频绝对是主力应用场景之一&…

2024年软考高级信息系统项目管理师备考攻略

软考高级信息系统项目管理师是一项合格性考试,考试内容相对有限,因此真题的重复率较高。下一次考试与上一次相比,重复率不高,但与之前所有年份的真题相比,重复率较高。在这几次考试中,我认为最重要的是务必…

5. 文件属性和目录

5. 文件属性和目录 1. Linux 系统的文件类型1.1 普通文件1.2 目录文件1.3 字符设备文件和块设备文件1.4 符号链接文件1.5 管道文件1.6 套接字文件 2. stat 系统调用2.1 struct stat 结构体2.2 st_mode 变量2.3 struct timespec 结构体 3. fstat 和 lstat 函数3.1 fstat 函数3.2…

黑马微信小程序学习笔记

小程序和普通网页的区别 1、运行环境不同 网页运行在浏览器环境中 小程序运行在微信环境中 2、API不同 由于运行环境的不同,在小程序中无法调用DOM和BOM 的API(因为这两个API是浏览器暴露出来的,微信环境没有) 但是可以调用微信提…

ELK+filebeat+kafka

无需创建logstash的端口,直接创建topic 远程收集mysql和httpd的日志 (一)安装nginx和mysql服务 1、打开mysql的日志功能 2、创建日志(创库、创表、添加数据) (1)mysql服务器上安装http system…

Linux 命令pwd

命令作用 pwd是Linux中一个非常有用而又十分简单的命令,pwd是词组print working directory的首字母缩写,即打印工作目录;工作目录就是你当前所处于的那个目录。 pwd始终以绝对路径的方式打印工作目录,即从根目录(/&am…

初始Redis(入门篇)

目录 什么是Redis Redis特性 速度快 丰富的功能 客户端语言多 持久化 主从复制 Redis可以做什么 缓存 排行榜系统 计数器应用 消息队列系统 Redis安装 centos7安装 Redis重要文件 Redis的使用 Redis通用命令 set get keys exists del expire 什么是Redi…

深度学习实战61-基于知识图谱与BiLSTM网络实现疾病相关智能问答系统,并支持数据扩展

大家好,我是微学AI,今天给大家介绍一下深度学习实战61-深度学习在医疗领域的应用:疾病相关智能问答系统,并支持数据扩展。本文将详细介绍如何使用Py2neo这个Python库来构建一个医疗领域知识图谱,并将数据导入Neo4j图数据库。我们将提供一些医疗领域的数据样例,并展示如何…

Aurora8B10B(一) 从IP配置界面学习Aurora

一. 简介 哈喽,大家好,好久没有给大家写FPGA技术的文章,是不是已经忘记我是做FPGA的啦,O(∩_∩)O哈哈~。 这里将会给大家分享我学习到的第一个高速接口Aurora8B10B,有点复杂,但不是特别复杂,对…