myblog

Appearance

Vue 3 + TypeScript + Vite ​

初始化项目 ​

bash
npm create vite@latest my-vue-ts-app --template vue-ts

安装vitest 相关依赖 ​

bash
pnpm add -D vitest @vitest/ui @vue/test-utils happy-dom

Vitest 测试指南 ​

安装的依赖 ​

  • vitest - 测试框架
  • @vitest/ui - 测试 UI 界面
  • @vue/test-utils - Vue 组件测试工具
  • happy-dom - DOM 模拟环境

测试命令 ​

bash
# 运行测试（watch 模式）
pnpm test

# 运行测试（单次运行）
pnpm test:run

# 打开测试 UI 界面
pnpm test:ui

# 生成测试覆盖率报告
pnpm test:coverage

项目结构 ​

src/
  ├── utils/
  │   ├── leetcode.ts       # LeetCode 算法工具函数
  │   └── leetcode.test.ts  # 算法函数测试
  └── components/
      ├── HelloWorld.vue
      └── HelloWorld.test.ts # Vue 组件测试

测试示例 ​

1. 单元测试（算法函数） ​

typescript
import { describe, it, expect } from 'vitest'
import { twoSum } from './leetcode'

describe('twoSum - 两数之和', () => {
  it('应该返回正确的索引', () => {
    expect(twoSum([2, 7, 11, 15], 9)).toEqual([0, 1])
  })
})

2. 组件测试 ​

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

describe('HelloWorld 组件测试', () => {
  it('应该正确渲染', () => {
    const wrapper = mount(HelloWorld, {
      props: { msg: 'Hello Vitest' }
    })
    expect(wrapper.text()).toContain('Hello Vitest')
  })
})

Vitest 配置说明 ​

配置文件：vite.config.ts

typescript
export default defineConfig({
  plugins: [vue()],
  test: {
    globals: true,              // 全局 API（describe, it, expect）
    environment: 'happy-dom',   // DOM 模拟环境
    coverage: {
      provider: 'v8',           // 覆盖率提供者
      reporter: ['text', 'json', 'html']
    }
  }
})

常用断言 ​

typescript
// 相等性断言
expect(value).toBe(expected)          // 严格相等
expect(value).toEqual(expected)       // 深度相等
expect(value).not.toBe(expected)      // 不相等

// 真值断言
expect(value).toBeTruthy()
expect(value).toBeFalsy()
expect(value).toBeDefined()
expect(value).toBeUndefined()
expect(value).toBeNull()

// 数字断言
expect(value).toBeGreaterThan(3)
expect(value).toBeLessThan(5)
expect(value).toBeCloseTo(0.3, 5)

// 数组/字符串断言
expect(array).toContain(item)
expect(string).toContain('substring')
expect(array).toHaveLength(3)

// 函数断言
expect(fn).toThrow()
expect(fn).toHaveBeenCalled()

参考资源 ​