当前位置: 首页 > news >正文

【vue组件库搭建07】Vitest单元测试

vitest官网

vue-test-utils

我们的测试框架选择的是 Vitest 和 vue-test-utils。两者的关系为:

  • Vitest 提供测试方法:断言、Mock 、SpyOn 等方法。
  • vue-test-utils:
    • 挂载和渲染组件: Vue Test Utils 允许您在隔离中挂载组件,这意味着您可以测试单个组件而不必担心其子组件或需要完整的 Vue 应用环境。它还支持浅层挂载,其中子组件被存根,使测试更快并且只关注正在测试的组件。
    • 访问 Vue 实例: 当组件被挂载时,Vue Test Utils 提供对 Vue 实例的访问,使得可以检查和与组件的数据、计算属性、方法和生命周期钩子进行交互。
    • 事件模拟: 它提供了模拟用户操作(如点击或输入)的实用程序,使测试能够像用户一样与组件进行交互。
    • 查找元素: Vue Test Utils 提供了查找组件内元素的方法,既可以使用选择器也可以引用 Vue 组件。这对于断言元素的存在或作为测试的一部分与它们交互非常有用。
    • 存根和模拟: 它支持存根子组件,这对于隔离正在测试的组件非常有用。您还可以使用 Jest 或其他模拟库来模拟组件使用的外部依赖或模块。
  • jsdom: 在测试的运行环境 node 下提供对 web 标准的模拟实现,比如 window,document, web存储的API 在 node 运行时是不存在的,这影响了测试。 jsdom 完成了对这些标准的补充。

1.搭建环境

  • 安装依赖
// 测试框架, 用于执行整个测试过程并提供断言库、mock、覆盖率
npm i vitest -D
npm i -D @vitest/ui
npm i -D @vitest/coverage-v8
npm i -D @vitest/coverage-istanbul
// 用于提供在 node 环境中的 Dom 仿真模型
npm i jsdom -D
// 测试工具库
npm i @vue/test-utils
  • vite.config.js配置
export default defineConfig({test: {globals: true,environment: "jsdom",coverage: {provider: "v8",reporter: ["text", "html", "clover", "json"],},},
}
  • 修改运行脚本 package.json
"scripts": {..."test": "vitest"
},
  • 编写测试用例
const add = (a, b) => {return a + b;
};describe("测试 Add 函数", () => {test("add(1, 2) === 3", () => {expect(add(1, 2)).toBe(3);});test("add(1, 1) === 2", () => {expect(add(1, 1)).toBe(2);});
});
  • 运行测试

2.输出测试报告集成到组件库文档

  • 配置package.json
{"scripts": {"dev": "vite","build:lib": "vite build --config ./build/lib.config.js","preview": "vite preview","docs:dev": "vitepress dev docs","docs:build": "vitepress build docs","docs:preview": "vitepress preview docs",// 运行测试用例"test": "vitest",// 输出测试报告(可以设置--coverage.enabled=true开启覆盖率)"test:report": "vitest run --coverage.reporter=html --coverage.reportsDirectory=./docs/public/coverage  --reporter=html --outputFile.html=./docs/public/report/index.html"},}

将报告输出格式设置成html,并将输出位置设置为docs/public目录下。

  • 设置vite.config.js
export default defineConfig({test: {globals: true,environment: "jsdom",include: ["./components/**/_test_/*.{js,ts}"],coverage: {provider: "v8",include: ["components/**/*.vue"],reporter: ['text', 'html', 'clover', 'json'],},},
}

设置docs\.vitepress\config.js

export default defineConfig({themeConfig: {nav: [// 更换成实际地址{ text: "测试用例报告", link: "http://localhost:5173/eric-ui/report/index.html",  target: '_self', },],
}

最终效果

相关文章:

【vue组件库搭建07】Vitest单元测试

vitest官网 vue-test-utils 我们的测试框架选择的是 Vitest 和 vue-test-utils。两者的关系为: Vitest 提供测试方法:断言、Mock 、SpyOn 等方法。vue-test-utils: 挂载和渲染组件: Vue Test Utils 允许您在隔离中挂载组件,这意…...

JSONObject和Map<String, Object>的转换

一、前言 Java开发中出参返回和入参传入更灵活的方法是使用Map<String, Object>入参或出参&#xff0c;或者使用JSONObject。 1、好处&#xff0c;参数可变&#xff0c;对接口扩展性很友好。 public ResponseData<WXModelDTO> getUserInfo(RequestBody Map<…...

C# 建造者模式(Builder Pattern)

建造者模式&#xff08;Builder Pattern&#xff09;&#xff0c;也被称为生成器模式&#xff0c;是一种对象构建模式&#xff0c;旨在将复杂对象的构建过程与表示分离&#xff0c;使得同样的构建过程可以创建不同的表示。这种模式特别适用于构建具有多个组成部分的复杂对象&am…...

初阶数据结构速成

本篇文章算是对初阶数据结构的总结&#xff0c;内容较多&#xff0c;请耐心观看 基础概念部分 顺序表 线性表&#xff08; linear list &#xff09;是n个具有相同特性的数据元素的有限序列。 线性表是⼀种在实际中⼴泛使 ⽤的数据结构&#xff0c;常⻅的线性表&#xff1a;…...

nx上darknet的使用-目标检测-在python中的使用

1 内置的代码 在darknet中已经内置了两个py文件 darknet_video.py与darknet_images.py用法类似&#xff0c;都是改一改给的参数就行了&#xff0c;我们说一下几个关键的参数 input 要预测哪张图像weights 要使用哪个权重config_file 要使用哪个cfg文件data_file 要使用哪个da…...

Python高级(四)_内存管理

Python高级-内存管理 第四章 内存管理 1、对象池 小整数池 系统默认创建好的,等着你使用 概述:整数在程序中的使用非常广泛,Python为了优化速度,使用了小整数对象池,避免为整数频繁申请和销毁内存空间。Python 对小整数的定义是 [-5, 256] ,这些整数对象是提前建立好的…...

关键路径-matlab

路径上边的数目称为路径长度 图的基本知识 求最短路径&#xff08;Dijkstra算法&#xff09; 2. 待继续尝试 ①Dijkstra ②floyd_all.m 一 二 ③ LeetCode [329. 矩阵中的最长递增路径]...

JavaDS —— 单链表 与 LinkedList

顺序表和链表区别 ArrayList &#xff1a; 底层使用连续的空间&#xff0c;可以随机访问某下标的元素&#xff0c;时间复杂度为O&#xff08;1&#xff09; 但是在插入和删除操作的时候&#xff0c;需要将该位置的后序元素整体往前或者向后移动&#xff0c;时间复杂度为O&…...

LangChain —— Message —— how to filter messages

文章目录 一、概述二、基本使用三、连成链 一、概述 在更复杂的链和代理中&#xff0c;我们可能会使用消息列表跟踪状态。此列表可以开始累积来自多个不同模型、说话者、子链等的消息&#xff0c;我们可能只想将此完整消息列表的子集传递给链/代理中的每个模型调用。 filter_me…...

conda install问题记录

最近想用代码处理sar数据&#xff0c;解放双手。 看重了isce这个处理平台&#xff0c;在安装包的时候遇到了一些问题。 这一步持续了非常久&#xff0c;然后我就果断ctrlc了 后面再次进行尝试&#xff0c;出现一大串报错&#xff0c;不知道是不是依赖项的问题 后面看到说mam…...

【python】IPython的使用技巧

IPython使用技巧 一、魔法命令 %timeit 用途&#xff1a;用于测量一段代码的执行时间&#xff0c;这对于评估代码的性能非常有帮助&#xff0c;尤其适用于需要进行性能优化和比较不同实现方式效率的场景。示例&#xff1a;%timeit [x**2 for x in range(1000)]扩展&#xf…...

常用知识点问答

kafka如何部署&#xff1f; 先说明kafka的版本如果是 2.X 版本&#xff0c;则要先部署 3或5 个服务器的zookeeper集群&#xff0c;然后在每个zookeeper服务器上部署kafka应用。如果是 3.X 版本&#xff0c;kafka不再依赖zookeeper&#xff0c;所以可以直接在java17的环境上部署…...

paddlenlp cpu windows 下测试gpt

paddlenlp 安装python3.11版本 conda create -n python311 python3.11 激活python conda activate python311 安装paddlepaddle conda install paddlepaddle3.0.0b0 -c paddle pip install paddlenlp3.0.0b0 -U -i https://pypi.tuna.tsinghua.edu.cn/simple windows下…...

uboot的功能

uboot裸机程序&#xff0c;uboot的核心功能是启动内核 uboot启动流程 XIP设备&#xff1a; 1、硬件初始化 2、读flash上面的内核&#xff0c;拷贝进内存 3、启动内核 非XIP设备 1、BROM程序拷贝uboot到RAM 2、执行uboot 3、硬件初始化 4、读flash上面的内核&#xff0c;拷贝进…...

java导出word实现

参考&#xff1a;Poi-tl Documentation...

Flink 提交作业的方式

首先我进行了flink单机部署&#xff0c;个人建议不管是学习还是开发尽量不使用 然后开始了flink自带集群部署&#xff0c;部署在三台服务器上&#xff0c;资源管理由flink集群自己管理&#xff0c;然后为了解决集群的单点故障问题&#xff0c;使用zookeeper监听事件&#xff0…...

JVM系列 | 垃圾收集算法

JVM系列 | 垃圾收集算法 文章目录 前言如何判断对象已"死"&#xff1f;引用计数法可达性分析算法可达性分析2.0版 | 引用的增强对象的消亡过程回收方法区主要回收目标&#xff1a;回收操作 垃圾收集算法分代收集理论 与 跨代引用假说分代收集理论跨带引用假说 垃圾收…...

深入理解Spring Boot中的事件驱动架构

深入理解Spring Boot中的事件驱动架构 大家好&#xff0c;我是微赚淘客系统3.0的小编&#xff0c;也是冬天不穿秋裤&#xff0c;天冷也要风度的程序猿&#xff01; 1. 引言 事件驱动架构在现代软件开发中越来越受欢迎&#xff0c;它能够提高系统的松耦合性和可扩展性。Sprin…...

Moldflow安装包下载:附网盘地址+详细教程步骤

如大家所了解的&#xff0c;Autodesk Moldflow仿真软件具有注塑成型仿真工具&#xff0c;能够帮助您验证和优化塑料零件、注塑模具和注塑成型流程。目前常用的版本有Moldflow 2019和Moldflow2023。 还没有获取Moldflow软件安装包资源的小伙伴&#xff0c;可以用百度云盘保存或下…...

2024辽宁省数学建模B题【钢铁产品质量优化】思路详解

2024 辽宁省大学数学建模竞赛试题 B 题 钢铁产品质量优化 由于连续退火工序中各阶段的工艺参数之间存在耦合性&#xff08;加热炉的温度设定会影响后续均热与冷却温度的设定&#xff0c;以及带钢穿行速度&#xff09;&#xff0c;导致难以建立该工序的机理模型&#xff0c;从而…...

VB.net复制Ntag213卡写入UID

本示例使用的发卡器&#xff1a;https://item.taobao.com/item.htm?ftt&id615391857885 一、读取旧Ntag卡的UID和数据 Private Sub Button15_Click(sender As Object, e As EventArgs) Handles Button15.Click轻松读卡技术支持:网站:Dim i, j As IntegerDim cardidhex, …...

关于nvm与node.js

1 安装nvm 安装过程中手动修改 nvm的安装路径&#xff0c; 以及修改 通过nvm安装node后正在使用的node的存放目录【这句话可能难以理解&#xff0c;但接着往下看你就了然了】 2 修改nvm中settings.txt文件配置 nvm安装成功后&#xff0c;通常在该文件中会出现以下配置&…...

uniapp中使用aixos 报错

问题&#xff1a; 在uniapp中使用aixos&#xff0c;运行后报如下错误&#xff1a; AxiosError: There is no suitable adapter to dispatch the request since : - adapter xhr is not supported by the environment - adapter http is not available in the build 解决方案&…...

基于 TAPD 进行项目管理

起因 自己写了个小工具&#xff0c;仓库用的Github。之前在用markdown进行需求管理&#xff0c;现在随着功能的增加&#xff0c;感觉有点难以管理了&#xff0c;所以用TAPD这个工具进行需求、Bug管理。 操作流程 注册 TAPD&#xff0c;需要提供一个企业名新建一个项目&#…...

LLMs 系列实操科普(1)

写在前面&#xff1a; 本期内容我们继续 Andrej Karpathy 的《How I use LLMs》讲座内容&#xff0c;原视频时长 ~130 分钟&#xff0c;以实操演示主流的一些 LLMs 的使用&#xff0c;由于涉及到实操&#xff0c;实际上并不适合以文字整理&#xff0c;但还是决定尽量整理一份笔…...

LabVIEW双光子成像系统技术

双光子成像技术的核心特性 双光子成像通过双低能量光子协同激发机制&#xff0c;展现出显著的技术优势&#xff1a; 深层组织穿透能力&#xff1a;适用于活体组织深度成像 高分辨率观测性能&#xff1a;满足微观结构的精细研究需求 低光毒性特点&#xff1a;减少对样本的损伤…...

【 java 虚拟机知识 第一篇 】

目录 1.内存模型 1.1.JVM内存模型的介绍 1.2.堆和栈的区别 1.3.栈的存储细节 1.4.堆的部分 1.5.程序计数器的作用 1.6.方法区的内容 1.7.字符串池 1.8.引用类型 1.9.内存泄漏与内存溢出 1.10.会出现内存溢出的结构 1.内存模型 1.1.JVM内存模型的介绍 内存模型主要分…...

go 里面的指针

指针 在 Go 中&#xff0c;指针&#xff08;pointer&#xff09;是一个变量的内存地址&#xff0c;就像 C 语言那样&#xff1a; a : 10 p : &a // p 是一个指向 a 的指针 fmt.Println(*p) // 输出 10&#xff0c;通过指针解引用• &a 表示获取变量 a 的地址 p 表示…...

嵌入式学习之系统编程(九)OSI模型、TCP/IP模型、UDP协议网络相关编程(6.3)

目录 一、网络编程--OSI模型 二、网络编程--TCP/IP模型 三、网络接口 四、UDP网络相关编程及主要函数 ​编辑​编辑 UDP的特征 socke函数 bind函数 recvfrom函数&#xff08;接收函数&#xff09; sendto函数&#xff08;发送函数&#xff09; 五、网络编程之 UDP 用…...

针对药品仓库的效期管理问题,如何利用WMS系统“破局”

案例&#xff1a; 某医药分销企业&#xff0c;主要经营各类药品的批发与零售。由于药品的特殊性&#xff0c;效期管理至关重要&#xff0c;但该企业一直面临效期问题的困扰。在未使用WMS系统之前&#xff0c;其药品入库、存储、出库等环节的效期管理主要依赖人工记录与检查。库…...