3、Vitest初体验：安装Vitest、编写第一个测试用例、运行与查看结果

好，咱们正式开始动手了。

前面两章聊了聊测试的价值和工具选型，说白了都是铺垫。这一章才是真正的「第一行代码」。我带你从零安装 Vitest，写一个能跑起来的测试用例，然后看看结果长什么样。

别紧张，真的不难。你想想看，测试说白了就是「写一段代码，去验证另一段代码对不对」。咱们今天就走一遍这个流程。

3.1 安装 Vitest

先得有项目。假设你已经有一个 Vue 3 + Vite 的项目了（如果没有，用 npm create vite@latest 快速创建一个）。

安装 Vitest 就一行命令：

npm install -D vitest

嗯，就这么简单。它会作为开发依赖装进你的项目里。

我个人习惯在 package.json 里加一个测试脚本：

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

这里解释一下区别：

• vitest：启动监听模式，改代码自动重新跑测试。开发时用这个。
• vitest run：跑一次就结束。CI/CD 流水线里用这个。

3.2 编写第一个测试用例

按照惯例，我们在项目根目录下建一个 src/__tests__/ 文件夹。当然你也可以把测试文件放在被测文件旁边，叫 xxx.spec.ts。两种方式我都用过，看团队习惯。

先写一个最简单的函数来测试。新建 src/utils/math.ts：

// src/utils/math.ts
export function add(a: number, b: number): number {
  return a + b
}

然后写测试文件 src/__tests__/math.spec.ts：

// src/__tests__/math.spec.ts
import { describe, it, expect } from 'vitest'
import { add } from '../utils/math'

describe('add 函数', () => {
  it('应该正确计算 1 + 2', () => {
    const result = add(1, 2)
    expect(result).toBe(3)
  })

  it('应该正确处理负数', () => {
    expect(add(-1, -2)).toBe(-3)
  })

  it('应该正确处理小数', () => {
    expect(add(0.1, 0.2)).toBeCloseTo(0.3)
  })
})

这里有几个关键点，我展开说说：

• describe：用来分组，把相关的测试用例包在一起。可以嵌套。
• it：一个具体的测试用例。第一个参数是描述，第二个参数是测试函数。
• expect：断言的核心。后面跟各种匹配器（matcher），比如 toBe、toBeCloseTo。

3.3 运行与查看结果

在终端里运行：

npm run test

你会看到类似这样的输出：

✓ src/__tests__/math.spec.ts (3)

  Test Files  1 passed (1)
       Tests  3 passed (3)
    Start at  10:15:30
    Duration  312ms (transform 45ms, setup 0ms, collect 47ms, tests 8ms)

看到那个绿色的 ✓ 了吗？舒服。

如果某个测试失败了，比如我把 add(1, 2) 的期望值改成 4：

expect(add(1, 2)).toBe(4)

终端会变成红色，并告诉你：

AssertionError: expected 3 to be 4 // Object.is equality

- Expected: 4
+ Received: 3

信息很清晰：期望是 4，实际得到 3。定位问题非常快。

3.4 关于测试文件组织的一点建议

我个人习惯把测试文件放在 src/__tests__/ 下，目录结构和源码保持一致。比如：

src/
  utils/
    math.ts
    format.ts
  components/
    Button.vue
  __tests__/
    utils/
      math.spec.ts
      format.spec.ts
    components/
      Button.spec.ts

这样找起来很直观。当然也有人喜欢把测试文件直接放在源码旁边：

src/
  utils/
    math.ts
    math.spec.ts
    format.ts
    format.spec.ts

两种方式没有对错，选你觉得舒服的就行。关键是团队统一。

3.5 本章小结

咱们今天做了三件事：

1. 安装了 Vitest，配好了运行脚本
2. 写了一个纯函数的测试用例，用了 describe、it、expect
3. 跑起来看了结果，绿的通过，红的报错

说白了，测试的骨架就是这样。后面所有的 Vue 组件测试、异步测试、mock 测试，都是在这个基础上加东西。

下一章咱们会真正开始测 Vue 组件。到时候会引入 @vue/test-utils，那才是重头戏。今天先把这个流程跑通，后面就顺了。