浅谈一下前端单元测试

article/2025/10/9 3:17:03

关于单元测试这个概念,我想很多前端的小伙伴都知道,但是却并不一定能描述清楚。由于我开始接触单元测试还是在四个月前,当时也只是做了一些纯函数的单元测试。所以在这里只能说浅谈一下前端单元测试。

什么是单元测试?

我理解的单元测试就是用于测试一个模块能否到达预期效果。通过代码来定义一个可用的衡量标准,并且可以快速检验。

为什么要做单元测试?

随着前端的快速发展,各类框架层出不穷,前端实现的业务逻辑也越来越复杂,这时单元测试的作用就凸显出来了。其实目前为止还是有很多代码是缺少单测的,只是现在单测的重视程度越来越高了而已。单测的好处不言而喻,首先可以提高代码的正确性,在上线前做到心里有底。其次当代码需要重构时,有测试用例做后盾,就可以大胆进行重构。然后从学习曲线来看,单元测试比较容易上手,覆盖的范围比较全面。

测试框架

目前的测试框架很多,今天咱们单拎出来Jest来说一下。

Jest是Facebook出品的通用测试框架                      一个好用的JavaScript测试框架,开箱即用,无需配置 。                                                                          适用但不局限于使用以下技术的项目: Babel,Typescript,Node,React,Angular,Vue                  整个工具放在一个地方,好书写好维护,非常方便

开始使用

  • 安装Jest                                                                     yarn add --dev jest 或npn install --save-dev jest
  • 配置package.json                                                        watermark,type_d3F5LXplbmhlaQ,shadow_50,text_Q1NETiBA5YmN56uv5Y235b-D6I-c,size_20,color_FFFFFF,t_70,g_se,x_16
  • 测试用例           watermark,type_d3F5LXplbmhlaQ,shadow_50,text_Q1NETiBA5YmN56uv5Y235b-D6I-c,size_20,color_FFFFFF,t_70,g_se,x_16
  • 运行结果                                                                     npm run test 开始运行,得到测试结果

当然这并不是上面例子的测试结果,只是找了张图片来给大家看一下测试结果是什么样子的。watermark,type_d3F5LXplbmhlaQ,shadow_50,text_Q1NETiBA5YmN56uv5Y235b-D6I-c,size_17,color_FFFFFF,t_70,g_se,x_16

单测的质量很重要,覆盖率一定程度上客观反应了单测的质量。watermark,type_d3F5LXplbmhlaQ,shadow_50,text_Q1NETiBA5YmN56uv5Y235b-D6I-c,size_18,color_FFFFFF,t_70,g_se,x_16

拓展

这一期我们只是浅谈了一下前端的单元测试和Jeat,而且我们是在node里做测试,如果要在浏览器里做单测应该怎么办,这里就需要去更加深入了解关于Ui Jest的知识了。

 

 

 


http://chatgpt.dhexx.cn/article/dW88kfcb.shtml

相关文章

web前端测试要点

【说明】 JS压缩: 目的: 1、减少JS代码容量,增加下载速度和执行速度; 2、压缩后的JS代码不具备可识性,在一定程度上达到加密效果,防止被人轻易使用。 常规Javascript压缩的原理: 1、压缩多余的…

为什么必须执行前端测试?

对于网站的真实前端测试,必须在不同的设备和浏览器(具有多个版本)上检查功能和性能。在不同浏览器、浏览器版本和操作系统上评估网站的过程称为跨浏览器测试,它被认为是每个前端网站测试计划的重要组成部分,用于评估你能够通过无缝UI和UX取悦…

前端接口测试

背景 由于需求不断更改,项目前后端分离后,后端开发人员经常需要改字段加字段,也有可能删掉接口,这时候前端如果没有相对应的调整,就容易造成bug。为了解决这个问题,我们需要对接口进行测试。 测试被调用接…

前端测试方法

最近在学校的《系统分析与设计》一课的大作业上,由于我担任的是测试工程师的角色,因此小小的研究了一些前端和后端的测试到底要怎么做。本文着重于前端测试方法。 1. 什么是测试? 我把测试定义成:是一段检测你的应用代码&#xf…

前端测试都要测什么

单元测试,Unit Testing,简称 UT,是指对软件中的最小可测试单元进行检查和验证,这是最低级别的测试活动,前端开发中单元可以是一个 function 也可以是一个 class,也可以是一个组件。对他们的输出做断言检查&…

前端测试开发工具--mock 的使用

目录 1. 背景 2. Mock是什么 3. Mock能做什么 4. Mock实现方式 5. Mock市面上常见的解决方案 6. Python下unittest.mock使用 1. 背景 在实际产品开发过程中,某个服务或前端依赖一个服务接口,该接口可能依赖多个底层服务或模块,或第三方…

浅谈前端测试

浅谈前端测试 浅谈 TDD 和 BDD TDD Test Driven Development (测试驱动开发) 一种使用自动化单元测试来推动软件设计并强制依赖关系解耦的技术。使用这种做法的结果是一套全面的单元测试,可随时运行,以提供软件可以正常工作的反馈。大概的流程是先针对…

前端测试介绍

测试,作为软件工程的一项重要环节,用来保证项目的正确性,完整性,安全性和可靠性。 前端测试是前端工程化的重要环节,根据测试的粒度可以分为单元测试,功能测试(E2E测试),集成测试。 前端测试框架 单元测试 - Mocha - Jasmine - Jest 断言库 - chai - Jest - …

前端测试接口,POSTMAN一键调试

前端测试接口,POSTMAN一键调试 当我们在开发中,遇到接口有问题时,一般都会找后端battle一下,在这之前我们需要先确认问题,当我们浏览器不方便调试时,我们一般会借助postman,因为比较方便也比较…

【测试数据准备-绕过后端,前端测试】

提示:文章写完后,目录可以自动生成,如何生成可参考右边的帮助文档 文章目录 前言一、 Charles 简单介绍二、本文使用场景三、Charles 通过修改后端返回值,在前端展示。1.工具安装和注册2.使用端点功能修改接口返参数 总结 前言 测…

前端测试一共有哪几种?

前言 哈喽,大家好,我是海怪。 最近有不少朋友找到我聊了聊测试相关的内容,发现他们对测试的分类有些迷茫。实际上测试一共就 3 种:E2E,集成,单测,其它的功能测试、UI 测试、界面测试只是它们中…

聊聊前端测试那点事儿

虽然如今前端测试这个事已经被大家所认可了,但我见过做前端测试的团队并不多,能把前端测试做好的团队,就更加凤毛麟角了。 这个现象背后的逻辑是:编写前端测试其实非常困难。 在编写测试代码时,我们有很多事情要考虑…

前端测试如何做?

前端测试大家天天做。但是你知道前端测试是怎么做的吗? 什么是前端测试? 前端测试是测试图形用户界面(GUI)、web应用程序或软件的功能和可用性的一种测试技术。前端测试的目标是测试整体功能,以确保web应用程序或软件的表示层在连续更新中没有缺陷。 …

前端测试

1.什么是测试 测试是一种验证我们的代码是否可以按预期工作的方法。 换句话说就是写一些代码来验证一段代码是否能得到预期设计代码时所期望的结果。 被测试对象可以是样式,功能,流程,组件等。 2.前端测试的意义(这里主要指单元…

Oracle一次插入多条数据(批量插入)

语法: INSERT ALLINTO tableName (column1, column2, column_n) VALUES (expr1, expr2, expr_n)INTO tableName (column1, column2, column_n) VALUES (expr1, expr2, expr_n)INTO tableName (column1, column2, column_n) VALUES (expr1, expr2, expr_n) SELECT c…

oracle建表和插入数据

1.建表 File-->New-->Table 2.建表字段,如果写int的话,会报错 3.建立主键 4.点击应用 5.查看自己建好的表格 6.插入数据(日期这样子) INSERT INTO T_USER(USER_ID,USER_ACCOUNT,REAL_NAME,SEX,BIRTHDAY) VALUES(2,LiSi,李四,1,to_date(2020-2-2,…

Oracle数据库建表与插入数据

Oracle数据库建表和数据插入 本机环境表的建立插入数据 本机环境 windows10-64位 oracle12c 时间:2020-05-26 使用SQL Developer 表的建立 create table tableName ( 属性名 类型 约束, 属性名 类型 约束, . . . 属性名 类型 约束);如&…

oracle一次插入多条数据(insert all)

分享一个零基础,通俗易懂,而且非常风趣幽默的人工智能教程(如不能直接点击访问,请以“右键”->“在新标签页中打开链接”方式打开)网站,网址:https://www.cbedai.net/gnailoug/ 问题 公司的项目,有个功…

oracle数据库创建表并插入数据

这里以创建一个学生表student为例子,表里面字段有id,name,sex,age,math,english,其中id是主键,其他的不为空,语法如下所示: create table student(id number…

Oracle数据库----表中数据的操作(插入、更新、删除数据)

文章目录 一、插入数据插入多行数据的简单方法:1、将表一的全部数据添加到表二中创建副本Courses1,只复制Courses的结构将Courses表中的数据拷贝到Courses1中创建副本的同时复制结构和数据 2、一次性向单个或多个表中插入不同的数据 二、更新数据使用UPD…