浅析前端单元测试

对于前端来说,测试主要是对HTML、CSS、JavaScript进行测试,以确保代码的正常运行。

常见的测试有单元测试、集成测试、端到端(e2e)的测试。

单元测试:对程序中最小可测试单元进行测试。我们可以类比对汽车的测试,在汽车组装之前需要对零件进行测试,这种情况下就和单元测试一致。只有零件正常才会进行下一步的组装

集成测试:对多个可执行单元组成的整体进行测试。类比于汽车的测试,就相当于测试发动机之前,需要把发动机所需的零件组装在一起对组装后的发动机这个整体进行测试。

端到端的测试:从服务端到客户端的测试。这种测试是对服务端和客户端组成的整个系统进行测试,它是能够执行完整流程的测试。

既然知道了有这些测试种类,接下来就说说这些测试应当如何实现。

什么是前端单元测试?

  • 为检测特定的目标是否符合标准而采用专用的工具或者方法进行验证,并最终得出特定的结果。
  • 对于前端开发过程来说,这里的特定目标就是指我们写的代码,通过写的测试用例检查的结果展示测试是否通过或者给出测试报告,这样才能方便问题的排查和后期的修正
  • 对于给定的输入,单元测试检查结果。通过及早发现问题并避免 bug 回归,它可以帮助我们确保代码的各个部分按预期工作。

为什么需要单元测试?

前端的单元测试在很多人看来都是一个可有可无的东西,理由一般有下面几条:

  • 写单测比较费时,有这个时间不如多做几个需求
  • 测试在验收的时候对页面的功能都会操作一遍,写单测相当于做无用功
  • 后端提供给前端的接口需要保证质量,因此需要做单测,但前端很少需要提供接口给其他人

其实,我大体上是同意以上观点的。在大部分的情况下,如果公司的业务不复杂,是完全没必要做单测的。但如果涉及到以下几个方面,就要考虑是否有必要引入单测了:

  • 业务比较复杂,前端参与的人员超过3人
  • 公司非常注重代码质量,想尽一切办法杜绝线上出bug
  • 你是跨项目组件的提供方 你在做一个开源项目

单测的好处:减少bug,提升代码可读性可维护性,为系统重构做铺垫。

单元测试覆盖率

含义:软件测试中的一种度量指标,指在所有功能代码中,完成了单元测试的代码所占的比例。
具体分为行级、分支级、方法级等不同级别。
它可以从一定程度上衡量我们对代码测试的充分性。原则上我们追求的单元测试覆盖率目标是100%,但业务场景多的情况几乎是不可能。
平台类项目,核心复杂功能尽量覆盖率做到最高,业务类的酌情处理。

目标覆盖率
行覆盖率(line coverage):表示是否每一行都执行 80%
函数覆盖率(function coverage):表示是否每个函数都调用 100%
分支覆盖率(branch coverage):表示是否每个if代码块都执行 80%
语句覆盖率(statement coverage):表示是否每个语句都执行 80%

单元测试框架

实现单元测试的库和框架有很多,推荐选择jest

优点:

  • 比较新
  • 基础好
  • 速度快:支持单模块测试,减少测试代码
  • API简单:容易上手
  • 隔离性好:文件之间相互独立
  • IDE整合:vscode插件
  • 多项目运行:提高效率
  • 覆盖率:导出测试覆盖率

使用jest进行单元测试比较简单,因为Jest提供了很多方便的API供开发者使用。

总结

前端可以写单元测试吗?

答案是前端可以写单元测试,但是意义不大。 前端项目中如果有一些基础类、方法,可以编写测试。 但是组件、视图不太需要,性价比太低。 业务代码吗? 鬼才做。 每个月都在改,测试代码每天写到天亮都写不完。

项目里面可以不写单元测试,但是不代表前端可以不懂单元测试,下篇文章讲一下怎么用jest

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

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

相关文章

最新 SpringCloud微服务技术栈实战教程 微服务保护 分布式事务 课后练习等

SpringCloud微服务技术栈实战教程,涵盖springcloud微服务架构Nacos配置中心分布式服务等 SpringCloud及SpringCloudAlibaba是目前最流行的微服务技术栈。但大家学习起来的感受就是组件很多,不知道该如何应用。这套《微服务实战课》从一个单体项目入手&am…

RK3588开发笔记-MIPI-CSI接口视频解码芯片XS9922B调试

目录 前言 一、RK3588 MIPI接口介绍 二、xs9922B视频解码芯片介绍 三、原理图连接

C++项目:仿mudou库one thread one loop式并发服务器实现

目录 1.实现目标 2.HTTP服务器 3.Reactor模型 3.1分类 4.功能模块划分: 4.1SERVER模块: 4.2HTTP协议模块: 5.简单的秒级定时任务实现 5.1Linux提供给我们的定时器 5.2时间轮思想: 6.正则库的简单使用 7.通用类型any类型的实现 8.日志宏的实现 9.缓冲区…

深度学习 图像分割 PSPNet 论文复现(训练 测试 可视化)

Table of Contents 一、PSPNet 介绍1、原理阐述2、论文解释3、网络模型 二、部署实现1、PASCAL VOC 20122、模型训练3、度量指标4、结果分析5、图像测试 一、PSPNet 介绍 PSPNet(Pyramid Scene Parsing Network)来自于CVPR2017的一篇文章,中文翻译为金字塔场景解析…

YOLOv7暴力涨点:Gold-YOLO,遥遥领先,超越所有YOLO | 华为诺亚NeurIPS23

💡💡💡本文独家改进:提出了全新的信息聚集-分发(Gather-and-Distribute Mechanism)GD机制,Gold-YOLO,替换yolov7 head部分 实现暴力涨点 Gold-YOLO | 亲测在多个数据集能够实现大幅涨点,适用各个场景的涨点 收录: YOLOv7高阶自研专栏介绍: http://t.csdnim…

【产品经理】国内企业服务SAAS平台的生存与发展

SaaS在国外发展的比较成熟,甚至已经成为了主流,但在国内这几年才掀起热潮;企业服务SaaS平台在少部分行业发展较快,大部分行业在国内还处于起步、探索阶段;SaaS将如何再国内生存和发展? 在企业服务行业做了五…

钡铼BL124EC实现EtherCAT转Ethernet/IP的优势

钡铼技术的BL124EC是一款用于将EtherCAT从站转换为Ethernet/IP从站的网关设备。它是钡铼技术开发的高性能、可靠的工业自动化通信解决方案之一。 添加图片注释,不超过 140 字(可选) BL124EC网关可以应用于多种工业自动化场景,以下…

OSPF的7大状态和5大报文详讲

- Down OSPF的初始状态 - Init 初始化——我刚刚给别人发Hello报文 我们可以将OSPF邻居建立的过程理解为:我和你打招呼,你和我打招呼,然后咱俩成了邻居 比如: R1和R2要建立OSPF邻居 R1给R2发送了Hello报文,但是R1此时…

很烦的Node报错积累

目录 1. 卡在sill idealTree buildDeps2、Node Sass老是安装不上的问题3、unable to resolve dependency tree4、nvm相关命令5、设置淘宝镜像等基操5.1 镜像 5.2 npm清理缓存6、Browserslist: caniuse-lite is outdated loader 1. 卡在sill idealTree buildDeps 参考&#xf…

Python 中的数字

整数 对整数可以执行加减乘除和乘方. 程序示例: >>> 5 2 7 >>> 5 - 2 3 >>> 5 * 2 10 >>> 5 / 2 2.5 >>> 5 ** 2 25浮点数 浮点数的计算结果可能不完全准确, 程序示例: >>> 2 * 0.1 0.2 >>> 3 * 0.1 0.3…

想要精通算法和SQL的成长之路 - 恢复二叉搜索树和有序链表转换二叉搜索树

想要精通算法和SQL的成长之路 - 恢复二叉搜索树和有序链表转换二叉搜索树 前言一. 恢复二叉搜索树二. 有序链表转换二叉搜索树 前言 想要精通算法和SQL的成长之路 - 系列导航 一. 恢复二叉搜索树 原题链接 首先,一个正常地二叉搜索树在中序遍历下,遍历…

由于导线材质不同绕组直流电阻不平衡率超标

实测证明, 有的变压器绕组的直流电阻偏大, 有的偏差较大, 其主要原因是某些导线的铜和银的含量低于国家标准规定限额。 有时即使采用合格的导线, 但由于导线截面尺寸偏差不同, 也可以导致绕组直流电阻不平衡率超标。  …

antd的upload上传组件,上传成功后清除表单校验——基础积累

今天在写后台管理系统时&#xff0c;发现之前的一个bug&#xff0c;就是antd的upload上传组件&#xff0c;需要进行表单校验。 直接上代码&#xff1a; 1.html部分 <a-form-modelref"ruleForm":model"form":label-col"labelCol":wrapper-col…

通道剪枝channel pruning

1、相关定义 过参数化&#xff1a;主要是指在训练阶段&#xff0c;在数学上需要进行大量的微分求解&#xff0c;去捕捉数据中微小的变化信息&#xff0c;一旦完成迭代式的训练之后&#xff0c;网络模型在推理的时候就不需要这么多参数。剪枝算法&#xff1a;核心思想就是减少网…

基于DBC Signal Group生成Autosar SR接口(1)

文章目录 前言实现方法结构体在Simulink中的定义SignalGroup提取 总结 前言 在开发Autosar CAN通信模块时&#xff0c;对于Signal Group需要建立对应的Interface,其中的数据类型实际是一个结构体&#xff0c;包含Group中的Signal的数据类型定义。手动建立比较费时间&#xff0…

系统架构设计:8 论软件架构风格

目录 一 软件架构风格 1 数据流风格 (1)批处理风格 (2)管道-过滤器风格

C++中使用引用避免内存复制

C中使用引用避免内存复制 引用让您能够访问相应变量所在的内存单元&#xff0c;这使得编写函数时引用很有用。典型的函数声明类似于下面这样&#xff1a; ReturnType DoSomething(Type parameter);调用函数 DoSomething() 的代码类似于下面这样&#xff1a; ReturnType Resu…

基于OpenCV设计的流媒体播放器(RTSP、RTMP)

一、前言 随着互联网的普及和发展,流媒体技术已成为日常生活中不可或缺的一部分。流媒体播放器作为流媒体技术的重要组成部分,其性能和功能直接影响到用户的观影体验。本文介绍使用OpenCV和Qt设计一款流媒体播放器,专门用于播放直播视频流,例如RTSP、RTMP。该播放器只播放…

项目进展(十)-解决ADS1285在调试时出现的问题

一、解决大坑 在项目进展&#xff08;九&#xff09;-完善ADS1285代码这边博客中&#xff0c;看似解决了问题&#xff0c;可以去读数据&#xff0c;但是其实是给自己挖大坑&#xff0c;这边博客就是来填坑的。   首先呢&#xff0c;上篇博客说的是用0x12指令来读取数据&#…

Transformer模型 | Python实现TransformerCPI模型(pytorch)

文章目录 效果一览文章概述程序设计参考资料效果一览 文章概述 Python实现TransformerCPI模型(tensorflow) Dependencies: python 3.6 pytorch >= 1.2.0 numpy RDkit = 2019.03.3.0 pandas Gensim >=3.4.0 程序设计 import torch import numpy as np import random …