Vitest 测试框架完整指南：JavaScript/TypeScript 项目极速测试与配置教程

vitest-testing by secondsky/claude-skills

156 周安装量

102 GitHub Stars

GitHub

安装命令

npx skills add https://github.com/secondsky/claude-skills --skill vitest-testing

TypeScript JavaScript 框架测试

🇨🇳中文介绍

Vitest 测试

使用 Vitest 测试 JavaScript/TypeScript 项目的专业知识 - 一个由 Vite 驱动的极速测试框架。

快速开始

安装

# 使用 Bun（推荐）
bun add -d vitest

# 使用 npm
npm install -D vitest

配置

// vitest.config.ts
import { defineConfig } from 'vitest/config'

export default defineConfig({
  test: {
    globals: true,
    environment: 'node', // 或 'jsdom'
    coverage: {
      provider: 'v8',
      reporter: ['text', 'json', 'html'],
      thresholds: { lines: 80, functions: 80, branches: 80 },
    },
    include: ['**/*.{test,spec}.{js,ts,jsx,tsx}'],
  },
})

运行测试

# 运行所有测试（推荐使用 bun）
bun test

# 监视模式（默认）
bun test --watch

# 运行一次（CI 模式）
bun test --run

# 带覆盖率
bun test --coverage

# 特定文件
bun test src/utils/math.test.ts

# 模式匹配
bun test --grep="calculates sum"

# UI 模式（交互式）
bun test --ui

# 详细输出
bun test --reporter=verbose

编写测试

基本结构

import { describe, it, expect, beforeEach, afterEach } from 'vitest'
import { add, subtract } from './math'

describe('数学工具', () => {
  beforeEach(() => {
    // 每个测试前的设置
  })

  it('正确相加两个数字', () => {
    expect(add(2, 3)).toBe(5)
  })

  it('正确相减两个数字', () => {
    expect(subtract(5, 3)).toBe(2)
  })
})

广告位招租

在这里展示您的产品或服务

触达数万 AI 开发者，精准高效

联系我们

相关 Skills

Node.js后端模式指南：构建可扩展REST API、微服务与实时应用

20,000 周安装

minimal-run-and-audit：AI论文复现执行与审计技能，标准化测试与报告

19,100 周安装

Next.js 16+ 缓存组件指南：实现部分预渲染（PPR）与混合内容缓存

17,000 周安装

代码审查最佳实践指南：完整流程、安全与性能审查清单

12,400 周安装

describe.each([
  { input: 2, expected: 4 },
  { input: 3, expected: 9 },
])('平方函数', ({ input, expected }) => {
  it(`将 ${input} 平方为 ${expected}`, () => {
    expect(square(input)).toBe(expected)
  })
})

// 相等性
expect(value).toBe(expected)
expect(value).toEqual(expected)

// 真值性
expect(value).toBeTruthy()
expect(value).toBeNull()
expect(value).toBeDefined()

// 数字
expect(number).toBeGreaterThan(3)
expect(number).toBeCloseTo(0.3, 1)

// 字符串/数组
expect(string).toMatch(/pattern/)
expect(array).toContain(item)

// 对象
expect(object).toHaveProperty('key')
expect(object).toMatchObject({ a: 1 })

// 异常
expect(() => throwError()).toThrow('message')

// Promise
await expect(promise).resolves.toBe(value)
await expect(promise).rejects.toThrow()

import { vi } from 'vitest'

const mockFn = vi.fn()
mockFn.mockReturnValue(42)
mockFn.mockResolvedValue('async result')
mockFn.mockImplementation((x) => x * 2)

expect(mockFn).toHaveBeenCalled()
expect(mockFn).toHaveBeenCalledWith('arg')

vi.mock('./api', () => ({
  fetchUser: vi.fn(() => ({ id: 1, name: '测试用户' })),
}))

import { fetchUser } from './api'

beforeEach(() => {
  vi.clearAllMocks()
})

beforeEach(() => vi.useFakeTimers())
afterEach(() => vi.restoreAllMocks())

it('推进定时器', () => {
  const callback = vi.fn()
  setTimeout(callback, 1000)
  vi.advanceTimersByTime(1000)
  expect(callback).toHaveBeenCalledOnce()
})

it('模拟日期', () => {
  const date = new Date('2024-01-01')
  vi.setSystemTime(date)
  expect(Date.now()).toBe(date.getTime())
})

# 生成覆盖率报告
bun test --coverage

# HTML 报告
bun test --coverage --coverage.reporter=html
open coverage/index.html

# 检查阈值
bun test --coverage --coverage.thresholds.lines=90

import request from 'supertest'
import { app } from './app'

describe('API 端点', () => {
  it('创建用户', async () => {
    const response = await request(app)
      .post('/api/users')
      .send({ name: 'John' })
      .expect(201)

    expect(response.body).toMatchObject({
      id: expect.any(Number),
      name: 'John',
    })
  })
})

每个源文件对应一个测试文件：math.ts → math.test.ts
使用 describe() 块分组相关测试
使用描述性的测试名称
仅模拟外部依赖
对独立的异步测试使用 concurrent 测试
使用 beforeAll() 共享昂贵的固定装置
以 80%+ 覆盖率为目标，但不要追求 100%

test-quality-analysis - 检测测试异味
playwright-testing - E2E 测试
mutation-testing - 验证测试有效性

🇺🇸English

Vitest Testing

Expert knowledge for testing JavaScript/TypeScript projects using Vitest - a blazingly fast testing framework powered by Vite.

Quick Start

Installation

# Using Bun (recommended)
bun add -d vitest

# Using npm
npm install -D vitest

Configuration

// vitest.config.ts
import { defineConfig } from 'vitest/config'

export default defineConfig({
  test: {
    globals: true,
    environment: 'node', // or 'jsdom'
    coverage: {
      provider: 'v8',
      reporter: ['text', 'json', 'html'],
      thresholds: { lines: 80, functions: 80, branches: 80 },
    },
    include: ['**/*.{test,spec}.{js,ts,jsx,tsx}'],
  },
})

Running Tests

# Run all tests (prefer bun)
bun test

# Watch mode (default)
bun test --watch

# Run once (CI mode)
bun test --run

# With coverage
bun test --coverage

# Specific file
bun test src/utils/math.test.ts

# Pattern matching
bun test --grep="calculates sum"

# UI mode (interactive)
bun test --ui

# Verbose output
bun test --reporter=verbose

Writing Tests

Basic Structure

import { describe, it, expect, beforeEach, afterEach } from 'vitest'
import { add, subtract } from './math'

describe('Math utilities', () => {
  beforeEach(() => {
    // Setup before each test
  })

  it('adds two numbers correctly', () => {
    expect(add(2, 3)).toBe(5)
  })

  it('subtracts two numbers correctly', () => {
    expect(subtract(5, 3)).toBe(2)
  })
})

Parametrized Tests

describe.each([
  { input: 2, expected: 4 },
  { input: 3, expected: 9 },
])('square function', ({ input, expected }) => {
  it(`squares ${input} to ${expected}`, () => {
    expect(square(input)).toBe(expected)
  })
})

Assertions

// Equality
expect(value).toBe(expected)
expect(value).toEqual(expected)

// Truthiness
expect(value).toBeTruthy()
expect(value).toBeNull()
expect(value).toBeDefined()

// Numbers
expect(number).toBeGreaterThan(3)
expect(number).toBeCloseTo(0.3, 1)

// Strings/Arrays
expect(string).toMatch(/pattern/)
expect(array).toContain(item)

// Objects
expect(object).toHaveProperty('key')
expect(object).toMatchObject({ a: 1 })

// Exceptions
expect(() => throwError()).toThrow('message')

// Promises
await expect(promise).resolves.toBe(value)
await expect(promise).rejects.toThrow()

Mocking

Function Mocks

import { vi } from 'vitest'

const mockFn = vi.fn()
mockFn.mockReturnValue(42)
mockFn.mockResolvedValue('async result')
mockFn.mockImplementation((x) => x * 2)

expect(mockFn).toHaveBeenCalled()
expect(mockFn).toHaveBeenCalledWith('arg')

Module Mocking

vi.mock('./api', () => ({
  fetchUser: vi.fn(() => ({ id: 1, name: 'Test User' })),
}))

import { fetchUser } from './api'

beforeEach(() => {
  vi.clearAllMocks()
})

Timers

beforeEach(() => vi.useFakeTimers())
afterEach(() => vi.restoreAllMocks())

it('advances timers', () => {
  const callback = vi.fn()
  setTimeout(callback, 1000)
  vi.advanceTimersByTime(1000)
  expect(callback).toHaveBeenCalledOnce()
})

it('mocks dates', () => {
  const date = new Date('2024-01-01')
  vi.setSystemTime(date)
  expect(Date.now()).toBe(date.getTime())
})

Coverage

# Generate coverage report
bun test --coverage

# HTML report
bun test --coverage --coverage.reporter=html
open coverage/index.html

# Check against thresholds
bun test --coverage --coverage.thresholds.lines=90

Integration Testing

import request from 'supertest'
import { app } from './app'

describe('API endpoints', () => {
  it('creates a user', async () => {
    const response = await request(app)
      .post('/api/users')
      .send({ name: 'John' })
      .expect(201)

    expect(response.body).toMatchObject({
      id: expect.any(Number),
      name: 'John',
    })
  })
})

Best Practices

One test file per source file: math.ts → math.test.ts
Group related tests with describe() blocks
Use descriptive test names
Mock only external dependencies
Use concurrent tests for independent async tests
Share expensive fixtures with beforeAll()
Aim for 80%+ coverage but don't chase 100%