vitest 单元测试应用与配置

vitest 应用与配置

一、简介

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

二、安装vitest

// npm
npm install -D vitest
// yarn
yarn add -D vitest
// pnpm 
pnpm add -D vitest

注意:vitest的版本应与你的项目依赖兼容,建议使用最新版本以获得最佳性能和功能。

三、配置vitest

Vitest的配置可以通过多种方式实现,包括在package.json中直接配置,或者创建一个专门的配置文件(如vitest.config.ts或vitest.config.js)。

1、在package.json中配置

在package.json的scripts部分添加一个测试脚本:

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

这样就可以通过npm run test 或pnpm test来执行测试了

2、创建配置文件

对于更复杂的配置,你可以创建一个vitest.config.ts或vitest.config.js文件。例如:

/// <reference types="vitest">
import { defineConfig } from "vite";
import vue from "@vitejs/plugin-vue";
import * as path from "path";// https://vitejs.dev/config/
export default defineConfig({// 单元测试test: {globals: true,  //全局注册environment: 'jsdom', // 模拟浏览器环境  },resolve: {//设置别名alias: {"@": path.resolve(__dirname, "src"),},},plugins: [vue()],
});

四、编写测试

在你的Vue项目中,你可以为组件、函数、工具等编写测试。Vitest支持多种测试文件命名方式,但通常建议使用.test.ts或.spec.ts作为测试文件的扩展名。
例如,如果你有一个名为utils.js的文件,你可以创建一个utils.test.ts文件来编写它的测试。

1、函数测试

import { sum } from "../utils/index";
describe('sum', () => {test('should return 0 when num is 0', () => {expect(sum(1, 1)).toEqual(2);});it('should return 1 when num is 1', () => {expect(sum(1, 4)).toEqual(5);});it('should return 1 when num is 2', () => {expect(sum(3, 3)).toBe(6);});
});

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

2、组件测试

测试文件

import { describe, it, expect } from 'vitest';
import { mount } from '@vue/test-utils';
import Button from './Button.vue';describe('Button.vue', () => {it('renders props.label when passed', () => {const wrapper = mount(Button, {props: {label: 'Click me',},});expect(wrapper.text()).toContain('Click me');});it('emits a click event when clicked', () => {const wrapper = mount(Button, {props: {label: '测试 Button',},attachToDocument: true,});wrapper.trigger('click');// 验证是否发射了 click 事件expect(wrapper.emitted().click).toBeTruthy();});
});

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

错误示例:

报错提醒!!!

原因:vitest是运行在Node.js环境的,没有document对象,因此需要借助jsdom来实现。
jsdom 是一个在 Node.js 环境中使用的纯 JavaScript 实现的 DOM(文档对象模型),它模拟了足够多的浏览器环境,使得你能够在服务器端(如 Node.js 应用程序)中运行那些原本只能在浏览器中运行的脚本。

// npm
npm install -D jsdom
// yarn
yarn add -D jsdom
// pnpm 
pnpm add -D jsdom

五、其他配置

Vitest还提供了许多其他配置选项,如支持TypeScript、模拟DOM环境、生成测试覆盖率报告等。你可以根据项目的具体需求来配置这些选项。

注意事项
  • 确保你的项目依赖(如Vue、Vite等)与Vitest的版本兼容。
  • 在编写测试时,尽量保持测试代码的简洁性和可维护性。
  • 利用Vitest提供的丰富API和插件来增强你的测试体验。

开发者

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

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

相关文章

【Linux】vim详解

1.什么是vi/vim? 简单来说&#xff0c;vi是老式的文本编辑器&#xff0c;不过功能已经很齐全了&#xff0c;但是还是有可以进步的地方。vim则可以说是程序开发者的一项很好用的工具&#xff0c;就连 vim的官方网站&#xff08; http://www.vim.org&#xff09;自己也说vim是一…

【公益案例展】华为云X《无尽攀登》——攀登不停,向上而行

‍ 华为云公益案例 本项目案例由华为云投递并参与数据猿与上海大数据联盟联合推出的 #榜样的力量# 《2024中国数据智能产业最具社会责任感企业》榜单/奖项”评选。 大数据产业创新服务媒体 ——聚焦数据 改变商业 夏伯渝&#xff0c;中国无腿登珠峰第一人&#xff0c;一生43年…

语言模型演进:从NLP到LLM的跨越之旅

在人工智能的浩瀚宇宙中&#xff0c;自然语言处理&#xff08;NLP&#xff09;一直是一个充满挑战和机遇的领域。随着技术的发展&#xff0c;我们见证了从传统规则到统计机器学习&#xff0c;再到深度学习和预训练模型的演进。如今&#xff0c;我们站在了大型语言模型&#xff…

免费开源数字人生成工具

使用步骤更是简单到不行&#xff1a; 1. 输入图片&#xff1a;选择你想要生成动态视频的肖像图片。 2. 输入音频&#xff1a;提供与图片匹配的音频文件&#xff0c;EchoMimic会根据音频内容驱动肖像的动态效果。 3. 设置参数&#xff1a;一般保持默认设置即可&#xff0c;当然&…

端到端自动驾驶系列(一):自动驾驶综述解析

端到端自动驾驶系列(一)&#xff1a;自动驾驶综述解析 End-to-end-Autonomous-Driving Abstract Abstract—The autonomous driving community has witnessed a rapid growth in approaches that embrace an end-to-end algorithm framework, utilizing raw sensor input to …

模块化(一)nodejs

模块化 一.模块化的基本概念1.1 什么是模块化1.2 模块化规范 二.Node.js 中的模块化2.1 Node.js 中模块的分类2.2 加载模块2.3 Node.js 中的模块作用域2.4 向外共享模块作用域中的成员 一.模块化的基本概念 1.1 什么是模块化 模块化 是指解决一个 复杂问题 时&#xff0c;自顶…

uni-app 保存号码到通讯录

1、 添加模块 2、添加权限 3、添加策略 Android&#xff1a; "permissionExternalStorage" : {"request" : "none","prompt" : "应用保存运行状态等信息&#xff0c;需要获取读写手机存储&#xff08;系统提示为访问设备上的照片…

安卓14中Zygote初始化流程及源码分析

文章目录 日志抓取结合日志与源码分析systemServer zygote创建时序图一般应用 zygote 创建时序图向 zygote socket 发送数据时序图 本文首发地址 https://h89.cn/archives/298.html 最新更新地址 https://gitee.com/chenjim/chenjimblog 本文主要结合日志和代码看安卓 14 中 Zy…

HarmonyOS ArkUi 字符串<展开/收起>功能

效果图&#xff1a; 官方API&#xff1a; ohos.measure (文本计算) 方式一 measure.measureTextSize 跟方式二使用一样&#xff0c;只是API调用不同&#xff0c;可仔细查看官网方式二 API 12 import { display, promptAction } from kit.ArkUI import { MeasureUtils } fr…

基于蓝牙iBeacon定位技术的商场3D楼层导视软件功能详解与实施效益

在现代商场的繁华与复杂中&#xff0c;寻找目的地往往令人头疼。维小帮3D楼层导视软件以其创新技术&#xff0c;为顾客带来无缝、直观的跨楼层导航体验&#xff0c;让每一次商场消费都成为享受。 商场3D楼层导视软件功能服务 3D多楼层导视地图&#xff0c;商场布局一览无遗 …

【Go】函数的使用

目录 函数返回多个值 init函数和import init函数 main函数 函数的参数 值传递 引用传递&#xff08;指针&#xff09; 函数返回多个值 用法如下&#xff1a; package mainimport ("fmt""strconv" )// 返回多个返回值&#xff0c;无参数名 func Mu…

计网-三次握手和四次挥手

TCP建立和断开连接的过程&#xff08;三次握手和四次挥手&#xff09; TCP通信的过程&#xff1a; 问题&#xff1a;tcp是如何保证数据在客户端和服务端之间通信传输的&#xff1f; 分为三个步骤&#xff1a;三次握手&#xff0c;传输数据确认&#xff0c;四次挥手。三次握手…

Python | Leetcode Python题解之第232题用栈实现队列

题目&#xff1a; 题解&#xff1a; class MyQueue:def __init__(self):self.A, self.B [], []def push(self, x: int) -> None:self.A.append(x)def pop(self) -> int:peek self.peek()self.B.pop()return peekdef peek(self) -> int:if self.B: return self.B[-1…

如何找回误删的文件?4个常用文件恢复方法!

对于许多用户来说&#xff0c;误删文件是一种常见而令人懊恼的情况。恢复误删文件的重要性在于&#xff0c;它可以帮助用户找回宝贵的数据&#xff0c;避免因数据丢失带来的各种不便和损失。 如何找回不小心删除的文件&#xff1f; 误删数据不知道怎么恢复&#xff0c;会给我…

OS Copilot:新手测评体验

文章目录 前言一、OS Copilot&#xff08;阿里云操作系统智能助手&#xff09;简介二、测评体验总结OS Copilot 产品体验评测OS Copilot 产品功能反馈 前言 本文简单分享一下自己使用OS Copilot测评体验。 一、OS Copilot&#xff08;阿里云操作系统智能助手&#xff09;简介 …

一个极简的 Vue 示例

https://andi.cn/page/621516.html

【BUG】已解决:JsonMappingException

已解决&#xff1a;JsonMappingException 欢迎来到英杰社区https://bbs.csdn.net/topics/617804998 概述&#xff1a; 没有getter方法的实体的序列化&#xff0c;并解决Jackson引发的JsonMappingException异常。 默认情况下&#xff0c;Jackson 2只会处理公有字段或具有公有get…

vue 自定义滚动条同步拖动(移动端)

实现效果&#xff0c;拖动左右箭头实现图片区域同步滚动&#xff0c;到边缘停止拖动。 HTML代码 <template><div touchstart"onClick"><!--使用draggable组件 图片列表区域--><draggablev-model"select_list"end"onEnd"cl…

比赛获奖的武林秘籍:06 5 分钟速通比赛路演答辩,国奖选手的血泪经验!

比赛获奖的武林秘籍&#xff1a;06 5 分钟速通比赛路演答辩&#xff0c;国奖选手的血泪经验&#xff01; 摘要 本文主要介绍了大学生电子计算机类比赛和创新创业类比赛常见雷点、要点和精髓&#xff0c;并对路演的定义和基本概念进行了说明&#xff0c;结合自身经历对路演答辩…

【提交ACM出版 | EIScopus检索稳定 | 高录用】第五届大数据与社会科学国际学术会议(ICBDSS 2024,8月16-18)

第五届大数据与社会科学国际学术会议&#xff08;ICBDSS 2024&#xff09;将于2024年08月16-18日在中国-上海隆重举行。 ICBDSS会议在各专家教授的支持下&#xff0c;去年已成功举办了四届会议。为了让更多的学者有机会参与会议分享交流经验。本次会议主要围绕“大数据”、“社…