【vitest 单元测试】如何蹭 ant-design-web3 的PR

这篇文章分享单测经验,希望你能收获到有用的单测知识或者pr思路,填补单测的过程可以深刻理解组件内部的每一个流程,相信一定有所收获。

ant-design-web3

  • 前言
  • 查看单测覆盖情况
    • 运行命令,本地会生成一份临时目录
    • 通过live server打开html即可
    • 点开具体文件地址,可以查看文件覆盖的行数
  • 开发场景的经验
    • 只执行某个文件的test
    • 响应式场景
    • 查看dom
    • modal关闭

前言

  • 最近刚好在做一些单测覆盖的工作,在排查执行不到的地方的过程,可以梳理整个组件执行的脉络,甚至发现一些可以优化组件的地方。

  • 正常我们写完一个组件之后应该根据预期的执行来写好单测,这样的话如果后面有其他人动了逻辑,pr的时候ci就会进行单测,然后指出报错的地方。我的第一个单测试从下图中最下面的第一个开始的,当时修了一个issue中的bug,然后需要对应去补充一些单测。

  • 通过render渲染组件,也可以用react的hook 或者vi.mock去模拟一些事件,点击事件的话可以用fireEvent来模拟。

import React, { useEffect } from 'react';
import { fireEvent, render } from '@testing-library/react';
import { describe, expect, it, vi } from 'vitest';

在这里插入图片描述

查看单测覆盖情况

运行命令,本地会生成一份临时目录

pnpm run test:coverage

1

通过live server打开html即可

在这里插入图片描述

点开具体文件地址,可以查看文件覆盖的行数

发现有红的,我们就可以写单测去完善优化它。
在这里插入图片描述

开发场景的经验

只执行某个文件的test

在这里插入图片描述

响应式场景

modal 在尺寸过于小的时候,会触发其他的模式,可能页面显示上会有点不一样

    vi.spyOn(Grid, 'useBreakpoint').mockReturnValue({
      md: true, // ≥ 768px, mock PC
    });

查看dom

通过 console.log(baseElement.outerHTML);直接输出整个dom的结构
在这里插入图片描述

modal关闭

    fireEvent.click(baseElement.querySelector('.ant-modal-close')!);

    await vi.waitFor(() => {
      expect(
        baseElement.querySelector('.ant-web3-connect-button-profile-modal')?.className,
      ).toContain('ant-zoom-leave');
    });

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

如若内容造成侵权/违法违规/事实不符,请联系我们进行投诉反馈qq邮箱809451989@qq.com,一经查实,立即删除!

相关文章

如何用GPT制作PPT和写代码?

详情点击链接:如何用GPT制作PPT和写模型代码? 一OpenAI 1.最新大模型GPT-4 Turbo 2.最新发布的高级数据分析,AI画图,图像识别,文档API 3.GPT Store 4.从0到1创建自己的GPT应用 5. 模型Gemini以及大模型Claude2二定…

《路由与交换技术》---简答题

1、什么是STP?解决什么问题? STP代表生成树协议(Spanning Tree Protocol)。它是用于在计算机网络中解决环路问题的一种协议。 STP的主要目标是消除环路,保持网络的稳定性和可靠性,同时提供冗余路径以实现网…

Python爬虫-新能源汽车对应的“年份月份”销量榜

前言 本文是该专栏的第15篇,后面会持续分享python爬虫干货知识,记得关注。 在本专栏前面,笔者有单独详细介绍采集新能源汽车销量榜,感兴趣的同学,可以往前翻阅查看《Python爬虫-新能源汽车销量榜》。而之后,也有很多同学单独私信,那如果要单独采集某个年份,某个月份的…

【论文综述】一篇关于GAN在计算机视觉邻域的综述

前言 这是一篇关于GAN在计算机视觉领域的综述。 正文 生成对抗网络是一种基于博弈论的生成模型,其中神经网络用于模拟数据分布。应用领域:语言生成、图像生成、图像到图像翻译、图像生成文本描述、视频生成。GAN模型能够复制数据分布并生成合成数据&a…

用React给XXL-JOB开发一个新皮肤(二):目录规划和路由初始化

目录 一. 简述二. 目录规划三. Vite 配置 3.1. 配置路径别名3.2. 配置 less 四. 页面 4.1. 入口文件4.2. 骨架文件4.3. 普通页面 五. 路由配置六. 预览启动 一. 简述 上一篇文章我们介绍了项目初始化,此篇文章我们会先介绍下当前项目的目录规划,接着对…

了解统计分类中的贝叶斯理论误差限

一、介绍 统计分类和机器学习领域正在不断发展,努力提高预测模型的准确性和效率。这些进步的核心在于一个基本基准,即贝叶斯理论误差极限。这个概念深深植根于概率和统计学,是理解分类算法的局限性和潜力的基石。本文深入探讨了贝叶斯错误率的…

实现多级缓存(Redis+Caffeine)

文章目录 多级缓存的概述多级缓存的优势 多级缓存的概述 在高性能的服务架构设计中,缓存是一个不可或缺的环节。在实际的项目中,我们通常会将一些热点数据存储到Redis或MemCache这类缓存中间件中,只有当缓存的访问没有命中时再查询数据库。在…

java基础之函数

函数 概念 是一段具有特定功能的代码, 特点为可以多次执行.通常情况下一个函数对应一个功能 语法 访问修饰符 static 返回值类型 函数名(形参列表){//操作语句 } public static void 函数名(){} 位置 类以内,其他函数以外,与主函数平级 调用 自定义函数必须经过调用才…

web缓存之nginx缓存

一、nginx缓存知识 网络缓存位于客户端和 "源服务器 "之间,保存着所有可见内容的副本。当客户端请求缓存中存储的内容时,它可以直接从缓存中检索内容,而无需与服务器通信。这样,网络缓存就 "接近 "了客户端&a…

Tomcat-快速使用

关于Tomcat的概念及来由在Tomcat基本知识中进行了介绍,下面我们直接上手快速使用起来。 一、快速使用 (1)tomcat下载 (2)解压缩 (3)启动程序 (4)访问tomcat&#xff1a…

牛刀小试---二分查找(C语言)

题目&#xff1a;在给定的升序数组中查找指定的数字n&#xff0c;并输出其下标 代码举例&#xff1a; #include <stdio.h> int main() {int arr[] { 1,2,3,4,5,6,7,8,9,10 };//给定的升序数组int left 0;//定义左下标int right sizeof(arr) / sizeof(arr[0]) - 1;//…

JS 高频面试题

JS 的数据类型有哪些&#xff0c;有什么区别 基本数据类型&#xff08;Undefined、Null、Boolean、Number、String、Symbol&#xff09; 引用数据类型&#xff08;对象、数组和函数&#xff09; 区别&#xff1a; 原始数据类型直接存储在栈&#xff08;stack&#xff09;中的简…

Oracle 19c OCP 1z0 082考场真题解析第27题

考试科目&#xff1a;1Z0-082 考试题量&#xff1a;90 通过分数&#xff1a;60% 考试时间&#xff1a;150min本文为云贝教育郭一军&#xff08;微信&#xff1a;guoyJoe&#xff09;原创&#xff0c;请尊重知识产权&#xff0c;转发请注明出处&#xff0c;不接受任何抄袭、演绎…

前端开发Docker了解

1&#xff0c;docker简介 docker主要解决了最初软件开发环境配置的困难&#xff0c;完善了虚拟机部署的资源占用多&#xff0c;启动慢等缺点&#xff0c;保证了一致的运行环境&#xff0c;可以更轻松的维护和扩展。docker在linux容器的基础上进行了进一步的封装&#xff0c;提…

模板 BIEE(三)如何直接查看表示层列获取的sql语句

举例 想查看如下数据 SELECT 0 s_0, “Financials - AR Overview”.“Facts - AR Turnover”.“Days Sales Outstanding” s_1 FROM “Financials - AR Overview” web查看结果 日志内容如何查看请见《模板 BIEE&#xff08;二&#xff09;》 如下是不勾选高速缓存的结果&am…

研发日记,Matlab/Simulink避坑指南(一)——Data Store Memory模块执行时序Bug

文章目录 背景 问题 排查 解决 总结 背景 在一个嵌入式软件项目中&#xff0c;客户要求高度可控的时序流&#xff0c;我使用一个全局工步&#xff0c;对整个软件进行控制调度。由于子任务比较多&#xff0c;分门别类放在几个嵌套的子系统中&#xff0c;不能使用Goto模块引…

Python 面向对象之单例模式

【一】单例模式概念 单例模式是一种设计模式&#xff0c;其核心思想是确保一个类只有一个实例&#xff0c;并提供一个全局访问点。单例模式通常用于管理共享的资源&#xff0c;例如配置信息、数据库连接、线程池等。关键点在于如何判断这个类是否已经实例化 通过模块导入&…

机器人制作开源方案 | 乒乓球自动拾取机器人

作者&#xff1a;刘众森、王森、王绘东、崔岳震、宋维鑫 单位&#xff1a;山东农业工程学院 指导老师&#xff1a;潘莹月、廖希杰 1. 场景调研 我们小组选择项目的任务方向乒乓球的捡取与存放&#xff0c;针对此问题我们研发了一款乒乓球自动拾取机器人。众所周知&#xff0…

[算法与数据结构][c++]:Static关键字和全局变量

Static关键字和全局变量 1. 生命周期、作用域和初始化时机2. 全局变量3. Static 关键字3.1 面向过程3.1.1 静态全局变量3.1.2 静态局部变量&#xff08;单例中会使用&#xff09;3.1.3 静态函数 3.2 面向对象3.2.1 类内静态成员变量3.2.2 类内静态成员函数 Reference 写在前面&…

查看Linux磁盘空间

(1)、该命令会列出当前系统所有挂载的文件系统以及它们的使用情况&#xff0c;包括总容量、已用空间、可用空间、使用百分比等信息 df -h如果查看某一个文件夹的,可以 df -h folderName (2)、计算指定目录下所有文件和子目录所占用的磁盘空间大小&#xff0c;并以人类可读的格…