0

0

什么是 Vitest?为什么要使用它?

WBOY

WBOY

发布时间:2024-08-22 09:45:45

|

1319人浏览过

|

来源于dev.to

转载

什么是 vitest?为什么要使用它?

嘿,开发者同事! ?你准备好进入vitest的世界了吗?如果您是测试新手或者一直在使用其他测试框架,请不要担心。我们将一起探索 vitest,在本文结束时,您会很高兴尝试一下!

什么是维泰斯特?

vitest 就像你的代码的超级英雄。这是一个由 vite 提供支持的超快单元测试框架。但这对你来说意味着什么?

?️ 速度:vitest 速度快得令人难以置信,这意味着您可以花更少的时间等待,花更多的时间编码。
?简易设置:与vite开箱即用,超级容易上手。
?观看模式:当您进行更改时,它可以自动重新运行您的测试。
?出色的开发者体验:它有一个干净、直观的 api,使用起来很有趣。

让我们开始吧!

想象一下您正在开发一个新项目。您已经有了一些功能,并且想要确保它们正常工作。进入维斯特!

首先我们来安装vitest:

npm install -d vitest

现在,假设我们有一个简单的函数要测试:

// math.js
export function add(a, b) {
  return a + b;
}

我们如何使用 vitest 进行测试?这非常简单!我们来创建一个测试文件:

// math.test.js
import { expect, test } from 'vitest'
import { add } from './math'

test('addition works', () => {
  expect(add(2, 2)).tobe(4)
})

哇,这很简单,对吧?我们来分解一下:

  1. 我们从vitest导入expect和test。
  2. 我们导入add函数。
  3. 我们使用测试函数创建一个测试。
  4. 在测试中,我们使用expect来检查我们的函数是否正常工作。

运行你的测试

准备好运行测试了吗?只需将其添加到您的 package.json 中即可:

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

现在您可以使用以下命令运行测试:

npm run test

瞧!您将在终端中看到测试结果。 ?

让我们来看看:观看模式

但是等等,还有更多! vitest 有一个很棒的观看模式。就像有一个私人助理,每次您进行更改时都会检查您的代码。

要使用观看模式,只需运行:

npm run test -- --watch

现在,每次您保存文件时,vitest 都会自动重新运行您的测试。就像魔法一样! ✨

提问时间!

让我们来互动吧。你能猜出这个测试的作用吗?

test('multiply function', () => {
  expect(multiply(3, 4)).tobe(12)
})

花点时间想一想...

准备好了吗?此测试正在检查乘法函数,以确保它正确地将 3 和 4 相乘得到 12。很酷,对吗?

轮到你了!

现在轮到你写测试了!假设我们有这个函数:

export function isEven(number) {
  return number % 2 === 0
}

你能为这个函数写一个测试吗?试试吧!

(提示:您需要检查偶数和奇数)

总结

恭喜!您刚刚迈出了进入 vitest 世界的第一步。 ? 我们已经介绍了基础知识,但还有更多值得探索的内容:

  • 模拟函数和模块
  • 测试异步代码
  • 将 vitest 与您最喜欢的框架(如 react 或 vue)一起使用

记住,测试不仅仅是发现错误。这是关于编写更好、更可靠的代码。有了 vitest,其实可以很有趣!

那么,你准备好在你的下一个项目中尝试vitest了吗?相信我,未来的你会感谢你的! ?

测试愉快! ?✨

相关专题

更多
json数据格式
json数据格式

JSON是一种轻量级的数据交换格式。本专题为大家带来json数据格式相关文章,帮助大家解决问题。

403

2023.08.07

json是什么
json是什么

JSON是一种轻量级的数据交换格式,具有简洁、易读、跨平台和语言的特点,JSON数据是通过键值对的方式进行组织,其中键是字符串,值可以是字符串、数值、布尔值、数组、对象或者null,在Web开发、数据交换和配置文件等方面得到广泛应用。本专题为大家提供json相关的文章、下载、课程内容,供大家免费下载体验。

529

2023.08.23

jquery怎么操作json
jquery怎么操作json

操作的方法有:1、“$.parseJSON(jsonString)”2、“$.getJSON(url, data, success)”;3、“$.each(obj, callback)”;4、“$.ajax()”。更多jquery怎么操作json的详细内容,可以访问本专题下面的文章。

307

2023.10.13

go语言处理json数据方法
go语言处理json数据方法

本专题整合了go语言中处理json数据方法,阅读专题下面的文章了解更多详细内容。

74

2025.09.10

php源码安装教程大全
php源码安装教程大全

本专题整合了php源码安装教程,阅读专题下面的文章了解更多详细内容。

138

2025.12.31

php网站源码教程大全
php网站源码教程大全

本专题整合了php网站源码相关教程,阅读专题下面的文章了解更多详细内容。

80

2025.12.31

视频文件格式
视频文件格式

本专题整合了视频文件格式相关内容,阅读专题下面的文章了解更多详细内容。

82

2025.12.31

不受国内限制的浏览器大全
不受国内限制的浏览器大全

想找真正自由、无限制的上网体验?本合集精选2025年最开放、隐私强、访问无阻的浏览器App,涵盖Tor、Brave、Via、X浏览器、Mullvad等高自由度工具。支持自定义搜索引擎、广告拦截、隐身模式及全球网站无障碍访问,部分更具备防追踪、去谷歌化、双内核切换等高级功能。无论日常浏览、隐私保护还是突破地域限制,总有一款适合你!

61

2025.12.31

出现404解决方法大全
出现404解决方法大全

本专题整合了404错误解决方法大全,阅读专题下面的文章了解更多详细内容。

458

2025.12.31

热门下载

更多
网站特效
/
网站源码
/
网站素材
/
前端模板

精品课程

更多
相关推荐
/
热门推荐
/
最新课程
Vue 教程
Vue 教程

共42课时 | 5.8万人学习

Vue3.x 工具篇--十天技能课堂
Vue3.x 工具篇--十天技能课堂

共26课时 | 1.4万人学习

关于我们 免责申明 举报中心 意见反馈 讲师合作 广告合作 最新更新
php中文网:公益在线php培训,帮助PHP学习者快速成长!
关注服务号 技术交流群
PHP中文网订阅号
每天精选资源文章推送

Copyright 2014-2026 https://www.php.cn/ All Rights Reserved | php.cn | 湘ICP备2023035733号