【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>入参或出参,或者使用JSONObject。 1、好处,参数可变,对接口扩展性很友好。 public ResponseData<WXModelDTO> getUserInfo(RequestBody Map<…...
C# 建造者模式(Builder Pattern)
建造者模式(Builder Pattern),也被称为生成器模式,是一种对象构建模式,旨在将复杂对象的构建过程与表示分离,使得同样的构建过程可以创建不同的表示。这种模式特别适用于构建具有多个组成部分的复杂对象&am…...
初阶数据结构速成
本篇文章算是对初阶数据结构的总结,内容较多,请耐心观看 基础概念部分 顺序表 线性表( linear list )是n个具有相同特性的数据元素的有限序列。 线性表是⼀种在实际中⼴泛使 ⽤的数据结构,常⻅的线性表:…...
nx上darknet的使用-目标检测-在python中的使用
1 内置的代码 在darknet中已经内置了两个py文件 darknet_video.py与darknet_images.py用法类似,都是改一改给的参数就行了,我们说一下几个关键的参数 input 要预测哪张图像weights 要使用哪个权重config_file 要使用哪个cfg文件data_file 要使用哪个da…...
Python高级(四)_内存管理
Python高级-内存管理 第四章 内存管理 1、对象池 小整数池 系统默认创建好的,等着你使用 概述:整数在程序中的使用非常广泛,Python为了优化速度,使用了小整数对象池,避免为整数频繁申请和销毁内存空间。Python 对小整数的定义是 [-5, 256] ,这些整数对象是提前建立好的…...
关键路径-matlab
路径上边的数目称为路径长度 图的基本知识 求最短路径(Dijkstra算法) 2. 待继续尝试 ①Dijkstra ②floyd_all.m 一 二 ③ LeetCode [329. 矩阵中的最长递增路径]...
JavaDS —— 单链表 与 LinkedList
顺序表和链表区别 ArrayList : 底层使用连续的空间,可以随机访问某下标的元素,时间复杂度为O(1) 但是在插入和删除操作的时候,需要将该位置的后序元素整体往前或者向后移动,时间复杂度为O&…...
LangChain —— Message —— how to filter messages
文章目录 一、概述二、基本使用三、连成链 一、概述 在更复杂的链和代理中,我们可能会使用消息列表跟踪状态。此列表可以开始累积来自多个不同模型、说话者、子链等的消息,我们可能只想将此完整消息列表的子集传递给链/代理中的每个模型调用。 filter_me…...
conda install问题记录
最近想用代码处理sar数据,解放双手。 看重了isce这个处理平台,在安装包的时候遇到了一些问题。 这一步持续了非常久,然后我就果断ctrlc了 后面再次进行尝试,出现一大串报错,不知道是不是依赖项的问题 后面看到说mam…...
【python】IPython的使用技巧
IPython使用技巧 一、魔法命令 %timeit 用途:用于测量一段代码的执行时间,这对于评估代码的性能非常有帮助,尤其适用于需要进行性能优化和比较不同实现方式效率的场景。示例:%timeit [x**2 for x in range(1000)]扩展…...
常用知识点问答
kafka如何部署? 先说明kafka的版本如果是 2.X 版本,则要先部署 3或5 个服务器的zookeeper集群,然后在每个zookeeper服务器上部署kafka应用。如果是 3.X 版本,kafka不再依赖zookeeper,所以可以直接在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裸机程序,uboot的核心功能是启动内核 uboot启动流程 XIP设备: 1、硬件初始化 2、读flash上面的内核,拷贝进内存 3、启动内核 非XIP设备 1、BROM程序拷贝uboot到RAM 2、执行uboot 3、硬件初始化 4、读flash上面的内核,拷贝进…...
java导出word实现
参考:Poi-tl Documentation...
Flink 提交作业的方式
首先我进行了flink单机部署,个人建议不管是学习还是开发尽量不使用 然后开始了flink自带集群部署,部署在三台服务器上,资源管理由flink集群自己管理,然后为了解决集群的单点故障问题,使用zookeeper监听事件࿰…...
JVM系列 | 垃圾收集算法
JVM系列 | 垃圾收集算法 文章目录 前言如何判断对象已"死"?引用计数法可达性分析算法可达性分析2.0版 | 引用的增强对象的消亡过程回收方法区主要回收目标:回收操作 垃圾收集算法分代收集理论 与 跨代引用假说分代收集理论跨带引用假说 垃圾收…...
深入理解Spring Boot中的事件驱动架构
深入理解Spring Boot中的事件驱动架构 大家好,我是微赚淘客系统3.0的小编,也是冬天不穿秋裤,天冷也要风度的程序猿! 1. 引言 事件驱动架构在现代软件开发中越来越受欢迎,它能够提高系统的松耦合性和可扩展性。Sprin…...
Moldflow安装包下载:附网盘地址+详细教程步骤
如大家所了解的,Autodesk Moldflow仿真软件具有注塑成型仿真工具,能够帮助您验证和优化塑料零件、注塑模具和注塑成型流程。目前常用的版本有Moldflow 2019和Moldflow2023。 还没有获取Moldflow软件安装包资源的小伙伴,可以用百度云盘保存或下…...
2024辽宁省数学建模B题【钢铁产品质量优化】思路详解
2024 辽宁省大学数学建模竞赛试题 B 题 钢铁产品质量优化 由于连续退火工序中各阶段的工艺参数之间存在耦合性(加热炉的温度设定会影响后续均热与冷却温度的设定,以及带钢穿行速度),导致难以建立该工序的机理模型,从而…...
ES6从入门到精通:前言
ES6简介 ES6(ECMAScript 2015)是JavaScript语言的重大更新,引入了许多新特性,包括语法糖、新数据类型、模块化支持等,显著提升了开发效率和代码可维护性。 核心知识点概览 变量声明 let 和 const 取代 var…...
五年级数学知识边界总结思考-下册
目录 一、背景二、过程1.观察物体小学五年级下册“观察物体”知识点详解:由来、作用与意义**一、知识点核心内容****二、知识点的由来:从生活实践到数学抽象****三、知识的作用:解决实际问题的工具****四、学习的意义:培养核心素养…...
如何将联系人从 iPhone 转移到 Android
从 iPhone 换到 Android 手机时,你可能需要保留重要的数据,例如通讯录。好在,将通讯录从 iPhone 转移到 Android 手机非常简单,你可以从本文中学习 6 种可靠的方法,确保随时保持连接,不错过任何信息。 第 1…...
JUC笔记(上)-复习 涉及死锁 volatile synchronized CAS 原子操作
一、上下文切换 即使单核CPU也可以进行多线程执行代码,CPU会给每个线程分配CPU时间片来实现这个机制。时间片非常短,所以CPU会不断地切换线程执行,从而让我们感觉多个线程是同时执行的。时间片一般是十几毫秒(ms)。通过时间片分配算法执行。…...
多种风格导航菜单 HTML 实现(附源码)
下面我将为您展示 6 种不同风格的导航菜单实现,每种都包含完整 HTML、CSS 和 JavaScript 代码。 1. 简约水平导航栏 <!DOCTYPE html> <html lang"zh-CN"> <head><meta charset"UTF-8"><meta name"viewport&qu…...
Linux C语言网络编程详细入门教程:如何一步步实现TCP服务端与客户端通信
文章目录 Linux C语言网络编程详细入门教程:如何一步步实现TCP服务端与客户端通信前言一、网络通信基础概念二、服务端与客户端的完整流程图解三、每一步的详细讲解和代码示例1. 创建Socket(服务端和客户端都要)2. 绑定本地地址和端口&#x…...
CVE-2020-17519源码分析与漏洞复现(Flink 任意文件读取)
漏洞概览 漏洞名称:Apache Flink REST API 任意文件读取漏洞CVE编号:CVE-2020-17519CVSS评分:7.5影响版本:Apache Flink 1.11.0、1.11.1、1.11.2修复版本:≥ 1.11.3 或 ≥ 1.12.0漏洞类型:路径遍历&#x…...
算法:模拟
1.替换所有的问号 1576. 替换所有的问号 - 力扣(LeetCode) 遍历字符串:通过外层循环逐一检查每个字符。遇到 ? 时处理: 内层循环遍历小写字母(a 到 z)。对每个字母检查是否满足: 与…...
在树莓派上添加音频输入设备的几种方法
在树莓派上添加音频输入设备可以通过以下步骤完成,具体方法取决于设备类型(如USB麦克风、3.5mm接口麦克风或HDMI音频输入)。以下是详细指南: 1. 连接音频输入设备 USB麦克风/声卡:直接插入树莓派的USB接口。3.5mm麦克…...
jdbc查询mysql数据库时,出现id顺序错误的情况
我在repository中的查询语句如下所示,即传入一个List<intager>的数据,返回这些id的问题列表。但是由于数据库查询时ID列表的顺序与预期不一致,会导致返回的id是从小到大排列的,但我不希望这样。 Query("SELECT NEW com…...
