快速起步

总览

Vitest 是一个由 Vite 提供支持的极速单元测试框架。

你可以在为什么是 Vitest 中了解有关该项目背后的基本原理的更多信息。

在线试用 Vitest

你可以在 StackBlitz 上在线尝试 Vitest 。它直接在浏览器中运行 Vitest，它几乎与本地设置相同，但不需要在你的计算机上安装任何东西。

将 Vitest 安装到项目

使用 npm

Learn how to install by Video

bash

npm install -D vitest

npm install -D vitest

使用 yarn

bash

yarn add -D vitest

yarn add -D vitest

使用 pnpm

bash

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 上使用 process.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 脚本：

json

{
  "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 的测试体验。

从 VS Code 插件市场进行安装

了解更多有关 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 的项目

使用未发布的功能

如果你迫不及待想要体验最新的功能，可以自行克隆 vitest 仓库到本地机器上然后自行将其链接（将需要 pnpm）：

bash

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 社区来寻求帮助。

快速起步 ​

总览 ​

在线试用 Vitest ​

将 Vitest 安装到项目 ​

配置 Vitest ​

支持工作空间 ​

命令行 ​

IDE 集成 ​

示例 ​

使用 Vitest 的项目 ​

使用未发布的功能 ​

社区 ​

快速起步

总览

在线试用 Vitest

将 Vitest 安装到项目

配置 Vitest

支持工作空间

命令行

IDE 集成

示例

使用 Vitest 的项目

使用未发布的功能

社区