vite + vue3 的项目中使用 vitest 做单元测试(仅供参考)

一、配置文件

// vitest.config.tsimport { fileURLToPath } from 'node:url'
import { mergeConfig, defineConfig } from 'vite'
import { configDefaults } from 'vitest/config'
// import viteConfig from './vite.config'import vue from '@vitejs/plugin-vue'
import vueJsx from '@vitejs/plugin-vue-jsx'export default mergeConfig(defineConfig({// 安装了tsx插件才需配置plugins: [vue(),vueJsx(),],}),defineConfig({test: {globals: true,// 测试环境,模拟浏览器环境的库jsdomenvironment: 'jsdom',// 测试覆盖工具coverage: {provider: "c8"},// 测试报告reporters: ['junit'],// 测试报告生成文件outputFile: './coverage/junit.xml',exclude: [...configDefaults.exclude, 'e2e/*'],root: fileURLToPath(new URL('./', import.meta.url)),transformMode: {web: [/\.[jt]sx$/]}}})
)

二、全量覆盖率报告

在 vitest 中 集成了c8,c8 是测试覆盖率检查的工具,告诉开发者代码中有哪些代码行被覆盖了,哪些没有覆盖。

在package.json增加npm script

"test:coverage": "vitest --coverage"

如果没安装c8,运行命令的话,Vitest 会提示安装 c8,默认yes,回车执行安装。安装后,命令行删除测试覆盖率,同时在 src/coverage 下生成一个测试报告。

三、测试报告

在package.json增加npm script

"test:unit": "vitest --watch=false --coverage --reporter=junit",

四、关闭热更新

配置一个命令行参数–watch==false 就可以关闭这种行为

"test:unit": "vitest --watch=false --coverage"

五、编写测试用例

打开 vscode 新建一个 components 目录并新增一个button目录,然后再建一个__test__目录放测试文件,elemetn-plus 源码也是这样做的,在里面新建一个xxx.test.ts 或者 tsx 的文件(没安装tsx就建ts文件)。

vitest默认会检测项目中所有.test.ts或者.test.tsx等之类的测试文件,这个是可以修改的,具体配置可以参考官网去改。

// HelloWorld.spec.tsimport { describe, it, expect } from 'vitest'import { mount } from '@vue/test-utils'
import HelloWorld from '../HelloWorld.vue'describe('HelloWorld', () => {it('renders properly', () => {const wrapper = mount(HelloWorld, { props: { msg: 'Hello Vitest' } })expect(wrapper.text()).toContain('Hello Vitest')})
})
// HelloWorld.vue<script setup lang="ts">
defineProps<{msg: string
}>()
</script><template><div class="greetings"><h1 class="green">{{ msg }}</h1><h3>You’ve successfully created a project with<a href="https://vitejs.dev/" target="_blank" rel="noopener">Vite</a> +<a href="https://vuejs.org/" target="_blank" rel="noopener">Vue 3</a>. What's next?</h3></div>
</template><style scoped>
h1 {font-weight: 500;font-size: 2.6rem;position: relative;top: -10px;
}h3 {font-size: 1.2rem;
}.greetings h1,
.greetings h3 {text-align: center;
}@media (min-width: 1024px) {.greetings h1,.greetings h3 {text-align: left;}
}
</style>

参考

Vitest | 由 Vite 提供支持的极速单元测试框架

Vite | 下一代的前端工具链

Vitest: 现代前端测试框架 - 知乎

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

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

相关文章

第一百五十二回 自定义组件综合实例:游戏摇杆三

文章目录 内容回顾优化性能示例代码我们在上一章回中介绍了 如何实现游戏摇杆相关的内容,本章回中将继续介绍这方面的知识.闲话休提,让我们一起Talk Flutter吧。 内容回顾 我们在前面章回中介绍了游戏摇杆的概念以及实现方法,并且通过示例代码演示了实现游戏摇杆的整个过程…

Windows安装cuda和cudnn教程最新版(2023年9月)

文章目录 cudacudnn cuda 查看电脑的cuda最高驱动版本&#xff08;适用于N卡电脑-Nvidia&#xff09; winR打开命令行&#xff0c;输入nvidia-smi 右上角cuda -version就是目前支持的最高cuda版本&#xff0c;目前是12.2 nvidia官网下载cuda 下载地址&#xff1a;https://d…

基于eBPF的安卓逆向辅助工具——stackplz

前言 stackplz是一款基于eBPF技术实现的追踪工具&#xff0c;目的是辅助安卓native逆向&#xff0c;仅支持64位进程&#xff0c;主要功能如下&#xff1a; hardware breakpoint 基于pref_event实现的硬件断点功能&#xff0c;在断点处可读取寄存器信息&#xff0c;不会被用户…

C/C++自定义读取ini、cfg配置文件

常见cfg、ini文件如下: [config1] setting192.168.1.1 [config2] setting192.168.1.2 [config3] setting192.168.1.3 示例代码使用 // opt_ini.cpp : 此文件包含 "main" 函数。程序执行将在此处开始并结束。 //#include <iostream> #include "cfg.h"…

短信登录功能如何实现?

简介&#xff1a; 在日常生活中我们登录/注册某些网站/APP是通常可以选择 密码登录和手机号登录。 为什么手机号发送后会有验证码返回呢&#xff1f; 网站如何识别我的验证码是否正确&#xff1f; 如果我的个人网站也想要实现短信登录功能&#xff0c;具体该如何实现&#xff1…

获取文件创建时间

版权声明 本文原创作者&#xff1a;谷哥的小弟作者博客地址&#xff1a;http://blog.csdn.net/lfdfhl Java源码 public void testGetFileTime() {try {String string "E://test.txt";File file new File(string);Path path file.toPath();BasicFileAttributes ba…

RedHat 服务器安装NGINX

参照官方文档&#xff1a;nginx: Linux packages 按顺序操作&#xff1a; 安装前提&#xff1a; sudo yum install yum-utils 设置yum仓库&#xff08;执行命令的时候会自动新建文件&#xff09;&#xff1a; sudo vi /etc/yum.repos.d/nginx.repo 粘贴下面的内容保存退出…

一个电子信息工程学生的历程和内心感想

提示&#xff1a;文章写完后&#xff0c;目录可以自动生成&#xff0c;如何生成可参考右边的帮助文档 文章目录 一、我对大学三年专业课程的理解二、我为什么本科选择研究嵌入式这个方向&#xff1f;1.可以把理论变为实际应用——兴趣是最好的老师。2.嵌入式方向可以打的比赛非…

如何把利用paddlepaddle导出的json文件转化为yolo或者voc文件

目录 1. 修改源码&#xff0c;让模型能够生成出对于单个图像的标注。 2. 把数据转为yolo格式 3.把yolo格式转化为xml格式 这两天想偷懒&#xff0c;想让模型先在数据上标一遍&#xff0c;然后我再做修正&#xff0c;主要是图个省事。由于我们主要是利用paddle,模型也是基于p…

冒泡排序与选择排序(最low的两兄弟)

个人主页&#xff1a;Lei宝啊 愿所有美好如期而遇 前言&#xff1a; 在我们的生活中&#xff0c;无处不在用到排序&#xff0c;比如说成绩的排名&#xff0c;淘宝&#xff0c;京东等等商品在各个方面的排序&#xff0c;这样看来一个好的算 法很重要&#xff0c;接下来我们要先…

文件操作和IO

文章目录 一、文件系统二、文件类型三、文件系统操作3.1File类的属性3.2File类的构造方法3.3File类的方法 四、文件内容操作4.1Reader类里的函数4.2Writer类里的函数4.3InputStream类里的函数4.4OutputStream类里的函数4.5字节流转换为字符流 一、文件系统 1、操作系统会把很多…

【刷题-牛客】链表内指定区间反转

链表定区间翻转链表 题目链接题目描述核心思想详细图解代码实现复杂度分析 题目链接 链表内指定区间反转_牛客题霸_牛客网 (nowcoder.com) 题目描述 核心思想 遍历链表的过程中在进行原地翻转 [m,n]翻转区间记作子链表,找到子链表的 起始节点 left 和 终止节点 right记录在…

爬虫,初学者指南

第一篇&#xff1a;入门测速request模块的基本使用以www.douban.com为例 import requests url "http://www.douban.com" heards {"User-Agent": "Mozilla/5.0 (Windows NT 10.0; Win64; x64) AppleWebKit/537.36 (KHTML, like Gecko) Chrome/116.0…

组队竞赛(int溢出问题)

目录 一、题目 二、代码 &#xff08;一&#xff09;没有注意int溢出 &#xff08;二&#xff09;正确代码 1. long long sum0 2. #define int long long 3. 使用现成的sort函数 一、题目 二、代码 &#xff08;一&#xff09;没有注意int溢出 #include <iostream&g…

自动化测试的定位及一些思考

大家对自动化的理解&#xff0c;首先是想到Web UI自动化&#xff0c;这就为什么我一说自动化&#xff0c;公司一般就会有很多人反对&#xff0c;因为自动化的成本实在太高了&#xff0c;其实自动化是分为三个层面的&#xff08;UI层自动化、接口自动化、单元测试&#xff09;&a…

Sourcetree 无法打开/闪退问题

Sourcetree在某次开机以后无法打开或者是闪退。 Sourcetree是一款Git的可视化图形管理界面,提供了Windows和Mac的免费Git客户端,很方便的管理项目的代码版本 出现问题的环境 win11&#xff0c;sourcTree版本&#xff1a;3.4.12.0 在开始菜单搜索sourcetree&#xff0c;打开…

线上论坛之单元测试

对线上论坛进行单元测试的测试报告 源码地址&#xff1a;https://gitee.com/coisini-thirty-three/forum 一、用户部分&#xff08;UserServiceImplTest&#xff09; 1.创建普通用户 测试名称 createNormalUser() 测试源码 Test void createNormalUser() { // 构造用户 User …

为您的SSH提提速

SSH是运维和开发人员接触比较多的工具&#xff0c;一般用SSH来连接远程服务器&#xff0c;这个是我的一些免费客户和企业客户经常使用的场景&#xff0c;当然SSH除了远程连接之外&#xff0c;还有很多额外的用途&#xff0c;比如SSH本身是具备代理功能的&#xff0c;我们也有一…

【2023年研究生数学建模】E题解题思路

问题1 针对问题1.1&#xff0c;要求判断患者sub001至sub100发病后48小时内是否发生血肿扩张事件。对于此&#xff0c;先构建新表&#xff0c;记录每次检查的时间及血肿体积。采取遍历的方式识别48小时内是否出现血肿扩张事件&#xff0c;若发生血肿扩张&#xff0c;则记录入表…

如何写一份出色的毕业设计任务书

title: 如何写一份出色的毕业设计任务书 date: 2023-09-20 毕业设计任务书是每个毕业生必须面对的关键文档。它不仅是你完成毕业设计的路线图&#xff0c;还是导师评估你工作的依据。因此&#xff0c;撰写一份清晰、详细且具体的任务书至关重要。本文将向你介绍如何编写一份出色…