快速起步
总览
Vitest 是一个由 Vite 提供支持的极速单元测试框架。
你可以在 为什么是 Vitest 中了解有关该项目背后的基本原理的更多信息。
在线试用 Vitest
你可以在 StackBlitz 上在线尝试 Vitest 。它直接在浏览器中运行 Vitest,它几乎与本地设置相同,但不需要在你的计算机上安装任何东西。
将 Vitest 安装到项目
使用 npm
Learn how to install by Videonpm install -D vitest
npm install -D vitest
使用 yarn
yarn add -D vitest
yarn add -D vitest
使用 pnpm
pnpm add -D vitest
pnpm add -D vitest
TIP
Vitest 需要 Vite >=v3.0.0 和 Node >=v14.18
建议你使用上面列出的方法之一在 package.json
中安装 vitest
的副本。 但是,如果你希望直接运行 vitest
,可以使用 npx vitest
(npm 和 Node.js 附带 npx
命令)。
npx
命令将从本地 node_modules/.bin
执行命令,安装命令运行所需的任何包。 默认情况下,npx 将检查命令是否存在于 $PATH 或本地项目二进制文件中,并执行它。 如果未找到命令,它将在执行之前安装。
配置 Vitest
Vitest 的主要优势之一是它与 Vite 的统一配置。如果存在,vitest
将读取你的根目录 vite.config.ts
以匹配插件并设置为你的 Vite 应用程序。例如,你的 Vite 有 resolve.alias 和 plugins 的配置将会在 Vitest 中开箱即用。如果你想在测试期间想要不同的配置,你可以:
- 创建
vitest.config.ts
,优先级将会最高。 - 将
--config
选项传递给 CLI,例如vitest --config ./path/to/vitest.config.ts
。 - 在
defineConfig
上使用p
或rocess.env.VITEST mode
属性(如果没有被覆盖,将设置为test
)有条件地在vite.config.ts
中应用不同的配置。
如果要配置 vitest
本身,请在你的 Vite 配置中添加 test
属性。 你还需要使用 三斜线命令 ,同时如果是从 vite
本身导入 defineConfig
,请在配置文件的顶部加上三斜线命令。
import { defineConfig } from 'vitest/config'
export default defineConfig({
test: {
// ...
},
})
import { defineConfig } from 'vitest/config'
export default defineConfig({
test: {
// ...
},
})
可以参阅 配置索引 中的配置选项列表
支持工作空间
使用 Vitest Workspaces 在同一项目中运行不同的项目配置。你可以在vitest.workspace
文件中定义定义工作区的文件和文件夹列表。该文件支持 js
/ ts
/ json
扩展名。此功能与 monorepo 设置非常配合使用。
import { defineWorkspace } from 'vitest/config'
export default defineWorkspace([
// you can use a list of glob patterns to define your workspaces
// Vitest expects a list of config files
// or directories where there is a config file
'packages/*',
'tests/*/vitest.config.{e2e,unit}.ts',
// you can even run the same tests,
// but with different configs in the same "vitest" process
{
test: {
name: 'happy-dom',
root: './shared_tests',
environment: 'happy-dom',
setupFiles: ['./setup.happy-dom.ts'],
},
},
{
test: {
name: 'node',
root: './shared_tests',
environment: 'node',
setupFiles: ['./setup.node.ts'],
},
},
])
import { defineWorkspace } from 'vitest/config'
export default defineWorkspace([
// you can use a list of glob patterns to define your workspaces
// Vitest expects a list of config files
// or directories where there is a config file
'packages/*',
'tests/*/vitest.config.{e2e,unit}.ts',
// you can even run the same tests,
// but with different configs in the same "vitest" process
{
test: {
name: 'happy-dom',
root: './shared_tests',
environment: 'happy-dom',
setupFiles: ['./setup.happy-dom.ts'],
},
},
{
test: {
name: 'node',
root: './shared_tests',
environment: 'node',
setupFiles: ['./setup.node.ts'],
},
},
])
命令行
在安装了 Vitest 的项目中,你可以在 npm 脚本中使用 vitest
脚本,或者直接使用 npx vitest
运行它。 以下是脚手架 Vitest 项目中的默认 npm 脚本:
{
"scripts": {
"test": "vitest",
"coverage": "vitest run --coverage"
}
}
{
"scripts": {
"test": "vitest",
"coverage": "vitest run --coverage"
}
}
要在不监视文件更改的情况下运行一次测试,请使用 vitest run
。 你还可以指定其他 CLI 选项,例如 --port
或 --https
。 有关 CLI 选项的完整列表,可以在你的项目中运行 npx vitest --help
。
了解更多有关 命令行界面 的更多信息
IDE 集成
我们还提供了 Visual Studio Code 的官方扩展,以增强你使用 Vitest 的测试体验。
了解更多有关 IDE 插件 的更多信息
示例
示例 | 源代码 | 演练场 |
---|---|---|
basic | GitHub | Play Online |
graphql | GitHub | Play Online |
lit | GitHub | Play Online |
mocks | GitHub | Play Online |
nextjs | GitHub | Play Online |
puppeteer | GitHub | |
react-enzyme | GitHub | Play Online |
react-mui | GitHub | Play Online |
react-storybook | GitHub | Play Online |
react-testing-lib-msw | GitHub | Play Online |
react-testing-lib | GitHub | Play Online |
react | GitHub | Play Online |
ruby | GitHub | Play Online |
solid | GitHub | Play Online |
svelte | GitHub | Play Online |
vitesse | GitHub | Play Online |
vue-jsx | GitHub | Play Online |
vue | GitHub | Play Online |
vue2 | GitHub | Play Online |
使用 Vitest 的项目
- unocss
- unplugin-auto-import
- unplugin-vue-components
- vitesse
- vitesse-lite
- fluent-vue
- vueuse
- milkdown
- gridjs-svelte
- spring-easing
- bytemd
- faker
- million
- Vitamin
- neodrag
- svelte-multiselect
- iconify
- tdesign-vue-next
- cz-git
使用未发布的功能
如果你迫不及待想要体验最新的功能,可以自行克隆 vitest 仓库 到本地机器上然后自行将其链接(将需要 pnpm):
git clone https://github.com/vitest-dev/vitest.git
cd vitest
pnpm install
cd packages/vitest
pnpm run build
pnpm link --global # 你可以使用你喜爱的任何包管理工具来设置这个步骤
git clone https://github.com/vitest-dev/vitest.git
cd vitest
pnpm install
cd packages/vitest
pnpm run build
pnpm link --global # 你可以使用你喜爱的任何包管理工具来设置这个步骤
然后,回到你的 Vitest 项目并运行 pnpm link --global vitest
(或者使用你的其他包管理工具来全局链接 Vitest
)。
社区
如果你有疑问或者需要帮助,可以到 Discord 和 GitHub Discussions 社区来寻求帮助。