【Vitest】 Vitest测试框架的简单使用

简言

在了解vue源码的时候接触到了vitest测试框架,它的官网语言有中文,所以本篇只作简单的使用介绍。
Vitest官网

Vitest 旨在将自己定位为 Vite 项目的首选测试框架,即使对于不使用 Vite 的项目也是一个可靠的替代方案。它本身也兼容一些Jest的API用法。

在这里插入图片描述

Vitest

安装

建议使用1.x以上的版本,因为1以下的版本和1.x有破坏性更新,直接使用最新的。

npm install -D vitest
pnpm add -D vitest

Vitest 1.0 需要 Vite >=v5.0.0 和 Node >=v18.00

创建测试文件

在你的项目上创建带.test.或.spec.的测试文件。

一般情况下,执行测试的文件名中必须包含 “.test.” 或 “.spec.” 。

例如:

// sum.test.js
import { expect, test } from 'vitest'
import { sum } from './sum'test('adds 1 + 2 to equal 3', () => {expect(sum(1, 2)).toBe(3)
})

执行测试

在项目的package.json文件中添加测试命令:

{"scripts": {"test": "vitest"}
}

最后,运行 npm run test、yarn test 或 pnpm test,具体取决于你的包管理器,Vitest 将打印此消息:

✓ sum.test.js (1)✓ adds 1 + 2 to equal 3Test Files  1 passed (1)Tests  1 passed (1)Start at  02:15:44Duration  311ms (transform 23ms, setup 0ms, collect 16ms, tests 2ms, environment 0ms, prepare 106ms)

在终端输出的覆盖率测试报告:
在这里插入图片描述

使用 @vitest/ui

Vitest 由 Vite 提供能力,在运行测试时有一个开发服务器。这允许 Vitest 提供一个漂亮的 UI 界面来查看并与测试交互。Vitest 的 UI 界面是可选的,你可以通过以下安装:

npm i -D @vitest/ui

接下来,你可以通过传入 --ui 参数来启动测试的 UI 界面:

vitest --ui

重新启动测试命令后即可:
在这里插入图片描述

使用 IDE插件

使用VS Code的话,可以使用Vitest插件 或Wallaby.js(不建议) 。Wallaby是一个强大的js测试执行工具,但是呢国内不好使用它。
在这里插入图片描述
安装成功后,右侧就会出来这个icon:
在这里插入图片描述

结语

vitest详细的API和命令配置等可以到官网去看,非常容易上手,在此不作展开了。

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

如若内容造成侵权/违法违规/事实不符,请联系多彩编程网进行投诉反馈email:809451989@qq.com,一经查实,立即删除!

相关文章

寒假思维训练计划day16 A. Did We Get Everything Covered?

今天更新一道1月27号晚上div2的C题作为素材,感觉用到了我的构造题总结模型,我总结了一系列的模型和例题。 摘要: Part1 定义"边界贪心法" Part2 题意 Part3 题解 Part4 代码 Part5 思维构造题模型和例题 Part1 边界贪心…

【服务器Midjourney】创建部署Midjourney网站

目录 🌺【前言】 🌺【准备】 🌺【宝塔搭建MJ】 🌼1. 给服务器添加端口 🌼2. 使用Xshell连接服务器 🌼3. 安装docker 🌼4. 安装Midjourney程序 🌼5. 绑定域名+申请SSL证书 🌼6. 更新网站

全球唯一使用Python生成双色球和大乐透

生成双色球和大乐透代码: import randomdef gen_union_lotto(nums: int):"""随机生成N个双色球:param nums::return:"""union_list []for i in range(0, nums):data []for data_ in range(0, 6):random_num random.randint(1, 33…

电脑 文件夹内 显示是 文件在一起 ,实际存储硬盘的不同地方?

是的,在电脑上,文件夹内显示在一起的文件可能实际上存储在硬盘的不同物理位置。这是因为现代操作系统使用的是文件系统来管理磁盘上的数据,常见的如NTFS(Windows)、HFS(旧版Mac)或APFS&#xff…

【GitHub项目推荐--如何构建项目】【转载】

这是一个 138K Star 的开源项目,这个仓库汇集了诸多优质资源,教你如何构建一些属于自己的东西,内容主要分为增强现实、区块链、机器人、编辑器、命令行工具、神经网络、操作系统等几大类别。 开源地址:https://github.com/danist…

【贪吃蛇:C语言实现】

文章目录 前言1.了解Win32API相关知识1.1什么是Win32API1.2设置控制台的大小、名称1.3控制台上的光标1.4 GetStdHandle(获得控制台信息)1.5 SetConsoleCursorPosition(设置光标位置)1.6 GetConsoleCursorInfo(获得光标…

滴水逆向三期笔记与作业——02C语言——10 Switch语句反汇编

滴水逆向三期笔记与作业——02C语言——10 Switch语句反汇编 一、Switch语句1、switch语句 是if语句的简写2、break加与不加有什么特点?default语句可以省略吗?3、游戏中的switch语句(示例)4、添加case后面的值,一个一个增加&…

深兰科技入选亿欧《“制”敬不凡先锋榜·智能机器人Top10》榜单

日前,由亿欧协办的2023工博会工业智能化发展高峰论坛于上海成功举办,会上发布了《2023智能制造:“制”敬不凡先锋者》系列名单。深兰科技凭借在智能机器人开发中的技术创新和模式应用,入选《“制”敬不凡先锋榜——智能机器人Top1…

前端大厂面试题探索编辑部——第二期

目录 题目 单选题1 题解 关于TCP 关于UDP 单选题2 题解 A选项的HTTP是否是无状态协议 B选项的HTTP支持的方法 C选项的关于HTTP的状态码 D选项HTTP协议的传输格式 题目 单选题1 1.以下哪个描述是关于 TCP 和 UDP 的区别() A. TCP 是无连接的…

行测-资料:3. 比重、平均数

1、比重 1.1 现期比重★★★ C A,16.63%≈1/6 B C,拆成 50% 和 6.6% ≈ 1/15。 C D 1.2 基期比重★ 数学推导,A,B,A/(1 a),B / (1 b) A,4 / 9,12 / 27 x 1.14 / 1.18,看…

【大数据】Flink 架构(四):状态管理

Flink 架构(四):状态管理 1.算子状态2.键值分区状态3.状态后端4.有状态算子的扩缩容4.1 带有键值分区状态的算子4.2 带有算子列表状态的算子4.3 带有算子联合列表状态的算子4.4 带有算子广播状态的算子 在前面的博客中我们指出,大…

WinRAR压缩包高级技巧:永久设置压缩包单个或批量单独压缩成包并且不内嵌文件夹,解压保留原始时间设置

目录点击跳转:WinRAR压缩包高级技巧:永久设置压缩包单个或批量单独压缩成包并且不内嵌文件夹,解压保留原始时间设置 解压永久设置1 解压保存原始时间 压缩永久设置1 默认压缩成zip手机电脑都通用的格式2 默认压缩文件不多额外嵌套一层文件夹&…

【新书推荐】3.1节 布尔运算

本节内容:布尔运算,又称为逻辑运算或位运算。 ■布尔代数:and与、or或、not非、xor异或,按位运算。 3.1.1 布尔代数 ■布尔代数与二进制的关系 乔治布尔是一位英国小学数学老师,19世纪最重要的数学家之一。出版了《…

《HTML 简易速速上手小册》第2章:HTML 的标签和元素(2024 最新版)

文章目录 2.1 文本格式化标签(🎩✨📜 网页的“时尚搭配师”)2.1.1 基础示例:一篇博客的格式化2.1.2 案例扩展一:产品介绍页面2.1.3 案例扩展二:个人简历 2.2 链接和锚点(&#x1f6a…

matplotlib实现动画效果

实现正弦波动画 import matplotlib.pyplot as plt from matplotlib.animation import FuncAnimation import numpy as np# 创建图像和轴 fig, ax plt.subplots()# 生成平均分布在0~2*pi之间的100个坐标点 x_data np.linspace(0, 2 * np.pi, 100) # 画出初始图 line, ax.plo…

【漏洞复现】中移铁通禹路由器信息泄露漏洞

Nx01 产品简介 中移禹路由器支持宽带拨号、动态IP和静态IP三种上网模式,一般中国移动宽带的光猫都是智能光猫也就是光猫带路由器功能,中移禹路由器作为二级路由使用。 Nx02 漏洞描述 中移禹路由器ExportSettings处存在信息泄露漏洞,攻击者可以获取后台权限。 Nx03…

sqli.labs靶场(8-17关)

8、第八关(布尔盲注) id1显示You are in...........,id1单引号不显示,id1 --显示正常 这个应该是单引号闭合,接下来就和第七关差不多上脚本 爆库名长度:id1%27%20and%20length(database()){i}%20-- 爆库…

算法分析(概论)

目录 第一章 概论 1.算法的概念 1.定义 2.算法设计要求 3.算法的特性 4.算法描述 5.数据结构与算法 6.算法设计的基本步骤 2.算法分析 1.计算机资源 2.算法分析 3.评判算法效率的方法 4.算法时间复杂度分析 5.渐进符号 1.大Ο符号 2.大Ω符号 3.大Θ符号 4.三…

bert预训练模型下载

查看 bert 模型所支持的预训练模型有哪些 from transformers import BERT_PRETRAINED_MODEL_ARCHIVE_LIST print(BERT_PRETRAINED_MODEL_ARCHIVE_LIST) 运行结果会吧所有支持的模型打印出来,比如 bert-base-chinese 一般下载模型我们搜索到的都是去 https://hugg…

详解顺序结构双指针处理算法

🎀个人主页: https://zhangxiaoshu.blog.csdn.net 📢欢迎大家:关注🔍点赞👍评论📝收藏⭐️,如有错误敬请指正! 💕未来很长,值得我们全力奔赴更美好的生活&…