Vitest 单元测试框架

Vitest 是 Vite 生态的测试框架，配置简单、执行速度快。

Vitest 特点

安装 Vitest

npm add -D vitest

配置 Vitest

// vite.config.js
export default defineConfig({
  test: {
    // Vitest 配置
    globals: true,
    environment: 'jsdom',
    coverage: {
      reporter: ['text', 'html']
    }
  }
})

注意：Vitest 配置集成在 vite.config.js 中。

编写测试

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

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

  it('handles negative numbers', () => {
    expect(sum(-1, -2)).toBe(-3)
  })
})

运行测试

# 运行所有测试
vitest

# 运行单个文件
vitest sum.test.js

# 监听模式
vitest --watch

Vue 组件测试

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

describe('Button', () => {
  it('renders text', () => {
    const wrapper = mount(Button, {
      props: { text: 'Click me' }
    })
    expect(wrapper.text()).toBe('Click me')
  })
})

测试环境配置

export default defineConfig({
  test: {
    environment: 'jsdom',  # DOM 环境
    setupFiles: ['./test/setup.js'],
    globals: true          # 全局 API
  }
})

覆盖率报告

vitest run --coverage

输出覆盖率：

Coverage report:
File      | Stmts | Branch | Funcs | Lines
sum.js    | 100%  | 100%   | 100%  | 100%

CI 集成

- name: Test
  run: vitest run

Vitest 与 Jest 对比

要点总结

• Vitest 与 Vite 共享配置
• API 类似 Jest 易上手
• 原生支持 ESM 模块
• coverage 生成覆盖率报告