入门

概述

Vitest 是一个由 Vite 提供支持的下一代测试框架。

您可以在 为什么选择 Vitest 部分了解有关该项目背后的基本原理的更多信息。

在线试用 Vitest

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

将 Vitest 添加到您的项目

学习如何通过视频安装

npm

npm install -D vitest

yarn

yarn add -D vitest

pnpm

pnpm add -D vitest

bun

bun add -D vitest

提示

Vitest 1.0 需要 Vite >=v5.0.0 和 Node >=v18.0.0

建议您使用上面列出的方法之一，在您的 package.json 中安装 vitest 的副本。但是，如果您希望直接运行 vitest，您可以使用 npx vitest（npx 命令随 npm 和 Node.js 附带）。

npx 命令将从本地 node_modules/.bin 中执行命令，安装运行命令所需的任何软件包。默认情况下，npx 会检查命令是否存在于 $PATH 中，或者在本地项目二进制文件中，并执行该命令。如果找不到命令，它将在执行之前安装。

编写测试

例如，我们将编写一个简单的测试，以验证将两个数字相加的函数的输出。

// sum.js
export function sum(a, b) {
  return a + b
}

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

test('adds 1 + 2 to equal 3', () => {
  expect(sum(1, 2)).toBe(3)
})

提示

默认情况下，测试的文件名必须包含 ".test." 或 ".spec."。

接下来，为了执行测试，请将以下部分添加到您的 package.json 中

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

最后，运行 npm run test、yarn test 或 pnpm test（取决于您的包管理器），Vitest 将打印此消息

✓ sum.test.js (1)
  ✓ adds 1 + 2 to equal 3

Test Files  1 passed (1)
    Tests  1 passed (1)
  Start at  02:15:44
  Duration  311ms

了解有关 Vitest 用法的更多信息，请参阅 API 部分。

配置 Vitest

Vitest 的主要优势之一是它与 Vite 的统一配置。如果存在，vitest 将读取您的根 vite.config.ts 以匹配您的 Vite 应用程序的插件和设置。例如，您的 Vite resolve.alias 和 plugins 配置将开箱即用。如果您希望在测试期间使用不同的配置，您可以

• 创建 vitest.config.ts，它将具有更高的优先级
• 将 --config 选项传递给 CLI，例如 vitest --config ./path/to/vitest.config.ts
• 使用 process.env.VITEST 或 defineConfig 上的 mode 属性（如果未覆盖，将设置为 test）以在 vite.config.ts 中有条件地应用不同的配置

Vitest 支持与 Vite 相同的配置文件扩展名：.js、.mjs、.cjs、.ts、.cts、.mts。Vitest 不支持 .json 扩展名。

如果您没有使用 Vite 作为您的构建工具，您可以使用配置文件中的 test 属性配置 Vitest

import {  } from 'vitest/config'

export default ({
  : {
    // ...
  },
})

提示

即使您自己不使用 Vite，Vitest 也严重依赖它来完成其转换管道。因此，您还可以配置 Vite 文档 中描述的任何属性。

如果您已经使用 Vite，请在您的 Vite 配置中添加 test 属性。您还需要使用配置文件顶部的 三斜杠指令 添加对 Vitest 类型的引用。

/// <reference types="vitest" />
import { defineConfig } from 'vite'

export default defineConfig({
  test: {
    // ...
  },
})

请参阅 配置参考 中的配置选项列表

警告

如果您决定为 Vite 和 Vitest 创建两个单独的配置文件，请确保在您的 Vitest 配置文件中定义相同的 Vite 选项，因为它将覆盖您的 Vite 文件，而不是扩展它。您还可以使用 vite 或 vitest/config 条目的 mergeConfig 方法将 Vite 配置与 Vitest 配置合并

vitest.config.mjs

import { defineConfig, mergeConfig } from 'vitest/config'
import viteConfig from './vite.config.mjs'

export default mergeConfig(viteConfig, defineConfig({
  test: {
    // ...
  }
}))

vite.config.mjs

import { defineConfig } from 'vite'
import Vue from '@vitejs/plugin-vue'

export default defineConfig({
  plugins: [Vue()],
})

但我们建议您使用同一个文件来配置 Vite 和 Vitest，而不是创建两个单独的文件。

工作区支持

使用 Vitest 工作区 在同一个项目中运行不同的项目配置。您可以在 vitest.workspace 文件中定义一个文件和文件夹列表，这些文件和文件夹定义您的工作区。该文件支持 js/ts/json 扩展名。此功能非常适合单仓库设置。

import {  } from 'vitest/config'

export default ([
  // 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
  {
    : {
      : 'happy-dom',
      : './shared_tests',
      : 'happy-dom',
      : ['./setup.happy-dom.ts'],
    },
  },
  {
    : {
      : 'node',
      : './shared_tests',
      : 'node',
      : ['./setup.node.ts'],
    },
  },
])

命令行界面

在安装了 Vitest 的项目中，您可以在 npm 脚本中使用 vitest 二进制文件，或者直接使用 npx vitest 运行它。以下是在搭建好的 Vitest 项目中的默认 npm 脚本

{
  "scripts": {
    "test": "vitest",
    "coverage": "vitest run --coverage"
  }
}

要运行一次测试而不监视文件更改，请使用 vitest run。您可以指定其他 CLI 选项，例如 --port 或 --https。有关 CLI 选项的完整列表，请在您的项目中运行 npx vitest --help。

了解有关 命令行界面 的更多信息

IDE 集成

我们还为 Visual Studio Code 提供了一个官方扩展，以增强您使用 Vitest 的测试体验。

从 VS Code 市场安装

了解有关 IDE 集成 的更多信息

示例

使用 Vitest 的项目

• unocss
• unplugin-auto-import
• unplugin-vue-components
• vue
• vite
• 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 # you can use your preferred package manager for this step

然后转到您使用 Vitest 的项目，并运行 pnpm link --global vitest（或您用来全局链接 vitest 的包管理器）。

社区

如果您有任何问题或需要帮助，请在 Discord 和 GitHub Discussions 上联系社区。