Vitest 轻量化前端测试的新选择

2025年10月10日 478点热度 0人点赞 0条评论

一、Vitest 简介

随着 Vite 在前端社区大受欢迎，一款基于它的新型单元测试框架——Vitest 应运而生，由前端开发者 Evan You（尤雨溪）团队和社区贡献者 共同打造。它的目标是提供极快的测试速度，同时保持对现代前端项目的良好兼容性。

Vitest 对 Jest API 兼容性很高，开箱即可支持 ESM、TypeScript、JSX 等现代特性，并依赖 esbuild 实现高速的文件转换。不同于传统测试工具，Vitest 利用 Vite 的开发服务器处理代码，直接复用项目的 vite.config.js 配置，这样就避免了像 Babel 或 ts-jest 那样重复配置的繁琐步骤。

简单来说，使用 Vitest，你既可以沿用熟悉的 Jest 写法，又能享受 Vite 带来的极速启动、热更新和轻量化体验，让前端测试变得更流畅、更高效。

二、为什么选择 Vitest？

在现代前端项目中，测试框架的选择直接影响开发效率和测试质量。Jest 长期作为标准选择，但在 Vite + Vue/React 等项目中存在以下痛点：

启动慢：尤其在大项目中，Jest 的 cold start 时间明显。
配置复杂：需要 Babel、ts-jest 等多层工具链。
HMR 集成不佳：开发时无法和 Vite 的快速热更新无缝结合。

Vitest 则应运而生：

极速启动：利用 Vite 原生模块解析与 ES 模块缓存，实现秒级启动。
内置 TypeScript 支持：无需 ts-jest，开箱即可写 TS 测试。
Jest API 兼容：断言、Mock、Snapshot 大多数 API 一致，迁移成本低。
Vite 原生生态：支持 Vue、React、Svelte 等框架。

三、快速上手

1. 安装依赖

Bash

npm install -D vitest @vitest/ui
# 如果是 Vue 项目
npm install -D @vitejs/plugin-vue vue-test-utils

npm install -D vitest @vitest/ui
# 如果是 Vue 项目
npm install -D @vitejs/plugin-vue vue-test-utils

2. 配置 Vitest

在 vite.config.ts 中添加 Vitest 配置：

TypeScript

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

export default defineConfig({
  plugins: [vue()],
  test: {
    globals: true,      // 使用全局的测试 API，如 describe、it
    environment: 'jsdom', // 浏览器模拟环境
    coverage: {
      provider: 'istanbul', // 代码覆盖率
    },
  },
})

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

export default defineConfig({
  plugins: [vue()],
  test: {
    globals: true,      // 使用全局的测试 API，如 describe、it
    environment: 'jsdom', // 浏览器模拟环境
    coverage: {
      provider: 'istanbul', // 代码覆盖率
    },
  },
})

3. 编写测试文件

在 src/components/HelloWorld.test.ts：

TypeScript

import { describe, it, expect } from 'vitest'
import { mount } from '@vue/test-utils'
import HelloWorld from './HelloWorld.vue'

describe('HelloWorld.vue', () => {
  it('renders props.msg when passed', () => {
    const wrapper = mount(HelloWorld, { props: { msg: 'Vitest' } })
    expect(wrapper.text()).toContain('Vitest')
  })
})

import { describe, it, expect } from 'vitest'
import { mount } from '@vue/test-utils'
import HelloWorld from './HelloWorld.vue'

describe('HelloWorld.vue', () => {
  it('renders props.msg when passed', () => {
    const wrapper = mount(HelloWorld, { props: { msg: 'Vitest' } })
    expect(wrapper.text()).toContain('Vitest')
  })
})

4. 运行测试

Bash

# 命令行运行
npx vitest run

# 开启交互式 UI
npx vitest

# 命令行运行
npx vitest run

# 开启交互式 UI
npx vitest

Vitest 会自动检测 .test.ts、.spec.ts 文件，支持热重载（HMR），极大提升开发体验。

四、Mock 与 Snapshot

1. Mock 示例

TypeScript

import { vi } from 'vitest'
import { fetchData } from './api'

vi.mock('./api', () => ({
  fetchData: vi.fn(() => Promise.resolve('mocked data')),
}))

it('fetches mocked data', async () => {
  const data = await fetchData()
  expect(data).toBe('mocked data')
})

import { vi } from 'vitest'
import { fetchData } from './api'

vi.mock('./api', () => ({
  fetchData: vi.fn(() => Promise.resolve('mocked data')),
}))

it('fetches mocked data', async () => {
  const data = await fetchData()
  expect(data).toBe('mocked data')
})

2. Snapshot 测试

TypeScript

import { mount } from '@vue/test-utils'
import Button from './Button.vue'

it('renders button correctly', () => {
  const wrapper = mount(Button, { props: { label: 'Click' } })
  expect(wrapper.html()).toMatchSnapshot()
})

import { mount } from '@vue/test-utils'
import Button from './Button.vue'

it('renders button correctly', () => {
  const wrapper = mount(Button, { props: { label: 'Click' } })
  expect(wrapper.html()).toMatchSnapshot()
})