什么是Vitest？
Vitest是有vue官方主导开发的下一代测试框架，一个原生支持Vite的测试框架。非常快速。
Vitest 与 Jest 兼容，具有开箱即用的 ESM、Typescript 和 JSX 支持，并且由 esbuild 提供支持。它在测试过程中使用 Vite 开发服务器来转换你的文件，并监听你的应用程序的相同配置（通过vite.config.js），从而消除了使用Jest等测试替代品所涉及的重复工作。
单元测试
单元测试的重要性不言而喻，可以很大程度的减少一些bug的产生。在前端项目中，有很多用于单元测试的工具，如最常见的Jest。但对于由vite构建的前端项目而言，使用vite配套的vitest会更加方便、舒适。官方文档是最好的入门方式，这篇文章记录在入门过程中可能遇到的一些问题，方便想了解的人更快速的上手。本文暂时只介绍单元测试和覆盖率测试的使用方法。
Vitest文档手册
为什么选择Vitest？
Vite是一个构建工具，旨在为现代 web 项目提供更快、更精简的开发体验，它开箱即用，支持常见的 web 模式、glob导入和 SSR 等功能。它的许多插件和集成正在促进一个充满活力的生态系统。
但这导致了一个新问题：如何在Vite上编写单元测试。
将Jest等框架与Vite一起使用，导致Vite和Jest之间有很多重复的配置，而 Vitest 解决了这一问题，它消除了为我们的应用程序编写单元测试所需的额外配置。Vitest 使用与 Vite 相同的配置，并在开发、构建和测试时共享一个共同的转换管道。它还可以使用与 Vite 相同的插件API进行扩展，并与Jest的API兼容，以方便从Jest迁移，而不需要做很多重构工作。
因此，Vitest 的速度也非常快。
安装与配置
#npm
npm install -D vitest
#yarn
yarn add -D vitest
基础配置
{
"scripts": {
"test": "vitest"
}
}
测试Vitest是否能正常工作
按照官方文档的示例，准备两个文件sum.ts和sum.test.ts(可以在项目根目录下创建一个test文件夹，专门用来存放测试文件)：
// sum.ts
export function sum(a, b) {
return a + b
}
// sum.test.ts
import { expect, test } from 'vitest'
import { sum } from './sum'
test('adds 1 + 2 to equal 3', () => {
expect(sum(1, 2)).toBe(3)
})
然后，在终端中运行指令npm run test(或者yarn test)。
如果没有意外，那么将出现以下结果：
关键字解释
如果你之前没有用过Jest，那么对于sum.test.ts文件中的test、expect、toBe方法，肯定一头雾水。
- test（别名为it）
test方法是用于编写单元测试的函数。test方法接受两个参数：测试名称和测试函数。语法如下：test(name: string, testFn: Function, timeout?: number | TestOptions): Promise<void>; - name
接收一个字符串，作为测试的名称显示在控制台中。一般用来描述该项测试的内容。 - testFn
是一个异步或同步的函数，用于执行测试逻辑和断言。 - timeout
可选参数，用于设置测试的超时时间（以毫秒为单位）。如果测试在超时时间内没有完成，则会失败并抛出错误。 - expect
expect方法是用于创建断言的函数。断言是一种用于验证代码的行为和输出是否符合预期的方式。
expect 方法的基本语法如下：
expect(actual).matcher(expected)
配合IDE使用
Vitest在各大主流前端IDE中都有对应的插件供开发者更方便的使用测试功能，这里以vscode为例，直接在插件市场搜索Vitest，点击安装即可。
然后打开sum.test.ts文件，可以看到test方法的那一行的左边出现了一个图标：
点击该图标即可运行该文件下的测试代码，右键该图标可以进行更多选择，比如调试。
总结
使用 Vitest 对我们的应用程序进行单元测试是无缝的，与Jest等替代品相比，需要更少的步骤来启动和运行。Vitest 还可以很容易地将现有的测试从 Jest 迁移到Vitest，而不需要进行额外的配置。