【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 题 钢铁产品质量优化 由于连续退火工序中各阶段的工艺参数之间存在耦合性(加热炉的温度设定会影响后续均热与冷却温度的设定,以及带钢穿行速度),导致难以建立该工序的机理模型,从而…...
观成科技:隐蔽隧道工具Ligolo-ng加密流量分析
1.工具介绍 Ligolo-ng是一款由go编写的高效隧道工具,该工具基于TUN接口实现其功能,利用反向TCP/TLS连接建立一条隐蔽的通信信道,支持使用Let’s Encrypt自动生成证书。Ligolo-ng的通信隐蔽性体现在其支持多种连接方式,适应复杂网…...
R语言AI模型部署方案:精准离线运行详解
R语言AI模型部署方案:精准离线运行详解 一、项目概述 本文将构建一个完整的R语言AI部署解决方案,实现鸢尾花分类模型的训练、保存、离线部署和预测功能。核心特点: 100%离线运行能力自包含环境依赖生产级错误处理跨平台兼容性模型版本管理# 文件结构说明 Iris_AI_Deployme…...
微服务商城-商品微服务
数据表 CREATE TABLE product (id bigint(20) UNSIGNED NOT NULL AUTO_INCREMENT COMMENT 商品id,cateid smallint(6) UNSIGNED NOT NULL DEFAULT 0 COMMENT 类别Id,name varchar(100) NOT NULL DEFAULT COMMENT 商品名称,subtitle varchar(200) NOT NULL DEFAULT COMMENT 商…...
C++ 求圆面积的程序(Program to find area of a circle)
给定半径r,求圆的面积。圆的面积应精确到小数点后5位。 例子: 输入:r 5 输出:78.53982 解释:由于面积 PI * r * r 3.14159265358979323846 * 5 * 5 78.53982,因为我们只保留小数点后 5 位数字。 输…...
Caliper 配置文件解析:config.yaml
Caliper 是一个区块链性能基准测试工具,用于评估不同区块链平台的性能。下面我将详细解释你提供的 fisco-bcos.json 文件结构,并说明它与 config.yaml 文件的关系。 fisco-bcos.json 文件解析 这个文件是针对 FISCO-BCOS 区块链网络的 Caliper 配置文件,主要包含以下几个部…...
Pinocchio 库详解及其在足式机器人上的应用
Pinocchio 库详解及其在足式机器人上的应用 Pinocchio (Pinocchio is not only a nose) 是一个开源的 C 库,专门用于快速计算机器人模型的正向运动学、逆向运动学、雅可比矩阵、动力学和动力学导数。它主要关注效率和准确性,并提供了一个通用的框架&…...
在鸿蒙HarmonyOS 5中使用DevEco Studio实现企业微信功能
1. 开发环境准备 安装DevEco Studio 3.1: 从华为开发者官网下载最新版DevEco Studio安装HarmonyOS 5.0 SDK 项目配置: // module.json5 {"module": {"requestPermissions": [{"name": "ohos.permis…...
Ubuntu系统多网卡多相机IP设置方法
目录 1、硬件情况 2、如何设置网卡和相机IP 2.1 万兆网卡连接交换机,交换机再连相机 2.1.1 网卡设置 2.1.2 相机设置 2.3 万兆网卡直连相机 1、硬件情况 2个网卡n个相机 电脑系统信息,系统版本:Ubuntu22.04.5 LTS;内核版本…...
微服务通信安全:深入解析mTLS的原理与实践
🔥「炎码工坊」技术弹药已装填! 点击关注 → 解锁工业级干货【工具实测|项目避坑|源码燃烧指南】 一、引言:微服务时代的通信安全挑战 随着云原生和微服务架构的普及,服务间的通信安全成为系统设计的核心议题。传统的单体架构中&…...
ui框架-文件列表展示
ui框架-文件列表展示 介绍 UI框架的文件列表展示组件,可以展示文件夹,支持列表展示和图标展示模式。组件提供了丰富的功能和可配置选项,适用于文件管理、文件上传等场景。 功能特性 支持列表模式和网格模式的切换展示支持文件和文件夹的层…...
