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.mzph.cn/diannao/46557.shtml

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

相关文章

Linux 06-01:简易shell编写

考虑一下这个与shell典型的互动&#xff1a;ls、ps 用下图的时间轴来表示事件的发生次序。其中时间从左向右。shell由标识为sh的方块代表&#xff0c;它随着时间的流逝从左向右移动。shell从用户读入字符串"ls"。shell建立一个新的进程&#xff0c;然后在那个进程中运…

vs code 启动react项目,执行npm start报错原因分析

1.执行 npm start错误信息&#xff1a;npm : 无法将“npm”项识别为 cmdlet、函数、脚本文件或可运行程序的名称。请检查名称的拼写&#xff0c;如果包括路径&#xff0c;请确保路径正确&#xff0c;然后再试一次。 所在位置 行:1 字符: 1 npm start ~~~ CategoryInfo …

2024年5000元投影仪推荐:五千元最值得买的三款家用激光投影推荐

五千元是很多家庭购买投影仪会选择的价位&#xff0c;这个价位的投影一般属于中高端产品&#xff0c;如果懂配置&#xff0c;知道怎么选的朋友可以选到一款性价比颇高的投影&#xff0c;但是如果不会选不懂配置可能会花冤枉钱。所以五千元价位的投影该如何选择&#xff1f;市面…

企业知识库用不起来?试一下用HelpLook同步钉钉组织架构

提升企业管理和协同效率已成为增强竞争力的关键。企业通过知识管理&#xff0c;搭建内部知识库&#xff0c;将分散的经验和知识转化为系统化流程&#xff0c;减少重复解释&#xff0c;促进业务高效运作。这为企业提供了坚实的基础。 企业知识库面临的挑战 尽管传统知识库内容丰…

Jeecgboot vue3的选择部门组件JSelectDept如何实现只查询本级以及子级的部门

jeecgboot vue3的文档&#xff1a;地址 JSelectDept组件实现了弹窗然后选择部门返回的功能&#xff0c;但部门是所有数据&#xff0c;不符合需求&#xff0c;所以在原有代码上稍微改动了一下 组件属性值如下&#xff1a; 当serverTreeDatafalse的时候&#xff0c;从后端查询…

2024年7月9日~2024年7月15日周报

目录 一、前言 二、完成情况 2.1 特征图保存方法 2.1.1 定义网络模型 2.1.2 定义保存特征图的钩子函数 2.1.3 为模型层注册钩子 2.1.4 运行模型并检查特征图 2.2 实验情况 三、下周计划 一、前言 本周的7月11日~7月14日参加了机器培训的学习讨论会&#xff0c;对很多概…

通过MATLAB控制TI毫米波雷达的工作状态之TLV数据解析及绘制

前言 前一章博主介绍了如何基于设计视图中的这些组件结合MATLAB代码来实现TI毫米波雷达数据的实时采集。这一章将在此基础上实现TI毫米波雷达的TLV数据解析。过程中部分算法会涉及到一些简单的毫米波雷达相关算法,需要各位有一定的毫米波雷达基础。 TLV数据之协议解析 紧着…

数字孪生技术如何助力低空经济飞跃式发展?

一、什么是低空经济&#xff1f; 低空经济&#xff0c;是一个以通用航空产业为主导的经济形态&#xff0c;它涵盖了低空飞行、航空旅游、航空物流、应急救援等多个领域。它以垂直起降型飞机和无人驾驶航空器为载体&#xff0c;通过载人、载货及其他作业等多场景低空飞行活动&a…

React 实现五子棋

简介 本文将会基于React 实现五子棋小游戏&#xff0c;游戏规则为先让5颗棋子连成1线的一方获胜。 实现效果 技术实现 页面布局 <div><table style{{border: 1px solid #000, borderCollapse: collapse, backgroundColor: lightgray}}><tbody>{squares.ma…

普中51单片机:定时器与计数器详解及应用(七)

文章目录 引言定时器工作原理TMOD定时器/计数器工作模式寄存器定时器工作模式模式0(13位定时器/计数器)模式1(16位定时器/计数器)模式2(8位自动重装模式)模式3(两个8位计数器) 定时器配置流程代码演示——LED1间隔1秒闪烁代码演示——按键1控制LED流水灯状态代码演示——LCD160…

GaussDB DWS 详解

文章目录 GaussDB DWS 详解一、简介二、DWS的分布式架构架构概述关键组件 三、分布式查询数据查询流程SQL执行的示例 批注&#xff1a;本文引鉴了Forlogen博主的一些内容&#xff0c;并加以补充&#xff0c;以供学习了解。 GaussDB DWS 详解 一、简介 DWS(Data Warehouse Ser…

免费分享一套SpringBoot+Vue农产品在线销售(在线商城)管理系统【论文+源码+SQL脚本】,帅呆了~~

大家好&#xff0c;我是java1234_小锋老师&#xff0c;看到一个不错的SpringBootVue农产品在线销售(在线商城)管理系统&#xff0c;分享下哈。 项目介绍 如今社会上各行各业&#xff0c;都喜欢用自己行业的专属软件工作&#xff0c;互联网发展到这个时候&#xff0c;人们已经发…

alike-cpp 编译

1. 源码链接&#xff1a; https://github.com/Shiaoming/ALIKE-cpp 2.已经安装好显卡驱动&#xff0c;cuda&#xff0c;cudnn,没安装的参考&#xff1a; 切记装cuda-11.x的版本&#xff0c;最好cuda11.3的版本 ubuntu重装系统后&#xff0c;安装cuda,cudnn-CSDN博客 3.安装…

C++客户端Qt开发——信号和槽

三、信号和槽 1.信号和槽概述 在Qt中&#xff0c;用户和控件的每次交互过程称为一个事件。比如"用户点击按钮”是一个事件&#xff0c;"用户关闭窗口”也是一个事件。每个事件都会发出一个信号&#xff0c;例如用户点击按钮会发出"按钮被点击"的信号&…

在互联网供应链系统可能是永远不会过时的系统

一、前言 在互联网在到人工智能&#xff0c;从基本的门户网站&#xff0c;社交网站&#xff0c;到移动互联网&#xff0c;视频网站&#xff0c;再到现在比较火爆短视频直播和人工智能AI&#xff0c;大模型。互联网的迭代&#xff0c;出现了无数的系统。但是有些系统一直久经不…

剪画小程序:做自媒体要做哪些准备!

在这个数字化的时代&#xff0c;自媒体成为了许多人展现自我、实现价值的舞台。如果你是一个自媒体小白&#xff0c;怀揣着梦想和热情准备踏上这条充满挑战与机遇的道路&#xff0c;那么在出发之前&#xff0c;有一些关键的准备工作可不能忽视。 一、明确自身定位 首先要思考的…

婚恋交友语音交友小程序APP系统开发

在数字化时代&#xff0c;婚恋交友的方式也日益多样化。传统的相亲、朋友介绍等方式已经无法满足现代人快节毒的生活需求&#xff0c;更多的人开始选择通过线上平台寻找自己的另-婚恋交友语音交友小程序APP应运而生&#xff0c;为单身男女提供了个便捷、高效的交友平台。本文将…

指针!!C语言(第一篇)

指针1 指针变量和地址1.取地址操作符(&)2.指针变量和解引用操作符(*) 指针变量的大小和类型指针的运算特殊指针1.viod*指针2.const修饰指针3.野指针 assert断言指针的使用和传址调用1.strlen的模拟实现2.传值调用和传址调用 指针变量和地址 在认识指针之前&#xff0c;我们…

Iceberg概念和特性

1. 快照 Iceberg会随着时间的推进,跟踪表生命周期中的所有数据集变化,并使用快照(Snapshots)来表示每一次变化后的数据集合,每一次数据操作的事务提交均会产生一个快照,并将其记录在元数据文件(Metadata)中。 基于快照的概念,Iceberg有以下特性: 事务性:写入快照成…

26.6 Django模型层

1. 模型层 1.1 模型层的作用 模型层(Model Layer)是MVC或MTV架构中的一个核心组成部分, 它主要负责定义和管理应用程序中的数据结构及其行为. 具体职责包括: * 1. 封装数据: 模型层封装了应用程序所需的所有数据, 这些数据以结构化的形式存在, 如数据库表, 对象等. * 2. 数据…