Skip to content

Latest commit

 

History

History
146 lines (103 loc) · 7.08 KB

File metadata and controls

146 lines (103 loc) · 7.08 KB
title 快速起步 | 指南
next
text link
Writing Tests
/guide/learn/writing-tests

快速起步 {#getting-started}

总览 {#overview}

Vitest(发音为 "veetest") 是由 Vite 驱动的下一代测试框架。

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

在线试用 Vitest {#trying-vitest-online}

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

将 Vitest 安装到项目 {#adding-vitest-to-your-project}

通过视频了解如何安装

::: code-group

npm install -D vitest
yarn add -D vitest
pnpm add -D vitest
bun add -D vitest

:::

:::tip Vitest 需要 Vite >=v6.4.0 and 和 >=v22.12.0 :::

如果在 package.json 中安装一份 vitest 的副本,可以使用上面列出的方法之一。然而,如果更倾向于直接运行 vitest ,可以使用 npx vitestnpx 会随着 npm 和 Node.js 一起被安装)。

npx 是一个命令行工具,用于执行指定的命令。默认情况下,npx 会首先检查本地项目的二进制文件中是否存在该命令。如果在那里没有找到,npx 会在系统的 $PATH 中查找并执行该命令(如果找到的话)。如果两个位置都没有找到该命令,npx 会在执行之前将其安装在临时位置。

Vitest 及第三方集成可使用 .vitest 目录存储构建产物,建议将其添加到你的 .gitignore 文件中。

# Vitest 报告与构建产物
.vitest/

编写测试 {#writing-tests}

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

export function sum(a, b) {
  return a + b
}
import { expect, test } from 'vitest'
import { sum } from './sum.js'

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

::: tip 提示 一般情况下,执行测试的文件名中必须包含 .test..spec. 。 :::

接下来,为了执行测试,请将以下部分添加到你的 package.json 文件中:

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

最后,运行 npm run testyarn testpnpm 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

::: warning 警告 如果使用 Bun 作为软件包管理器,请确保使用 bun run test 命令而不是 bun test 命令,否则 Bun 将运行自己的测试运行程序。 :::

你的第一个测试已通过!继续阅读 编写测试用例 了解如何组织测试、解读测试输出以及日常使用的核心测试模式。

要运行一次测试而不监听文件变化,请使用 vitest run 命令。你也可以传递额外的标志,如 --reporter--coverage。查看完整的 CLI 选项列表,运行 npx vitest --help 或参阅 CLI 指南

配置 Vitest {#configuring-vitest}

Vitest 默认会读取你的 vite.config.* 文件,因此现有 Vite 插件和配置可以开箱即用。你也可创建专用的 vitest.config.* 文件来配置测试特定设置。详情请参阅 配置

IDE 集成 {#ide-integrations}

我们还提供了官方的 Visual Studio Code 扩展,以增强你使用 Vitest 的测试体验。

从 VS Code 插件市场进行安装

了解更多有关 IDE 插件 的更多信息

示例 {#examples}

示例 源代码 演练场
basic GitHub 在线演示
fastify GitHub 在线演示
in-source-test GitHub 在线演示
lit GitHub 在线演示
vue GitHub 在线演示
marko GitHub 在线演示
preact GitHub 在线演示
qwik GitHub 在线演示
react GitHub 在线演示
solid GitHub 在线演示
svelte GitHub 在线演示
profiling GitHub 暂无
typecheck GitHub 在线演示
projects GitHub 在线演示

社区 {#community}

如果你有疑问或者需要帮助,可以到 DiscordGitHub Discussions 社区来寻求帮助。