单元测试是软件测试的基础层级，主要针对代码的最小可测试单元进行验证。单元测试可以帮助快速定位问题边界，提升代码可维护性，支持安全的重构操作。
测试对象：
- 独立函数/方法
- 纯工具类（如数据处理函数）
- UI组件（不依赖外部环境的独立组件）
- 自定义Hooks（React场景）
| 工具类型 | 推荐方案 | 特点 |
|---|---|---|
| 测试框架 | Jest/Vitest | 零配置、快照测试 |
| DOM测试库 | Testing Library | 用户行为导向的组件测试 |
| 覆盖率统计 | Istanbul/NYC | 可视化报告生成 |
| Mock解决方案 | Jest.fn + MSW | 网络请求/定时器模拟 |
demo:
// 工具函数
export const formatPrice = (num) => {
if (typeof num !== 'number') return '0.00'
return num.toFixed(2).replace(/\B(?=(\d{3})+(?!\d))/g, ',')
}
// 测试用例
test('格式化金额显示', () => {
expect(formatPrice(1234.56)).toBe('1,234.56')
expect(formatPrice(null)).toBe('0.00') // 边界值测试
expect(formatPrice('invalid')).toBe('0.00') // 异常输入处理
})
// React组件测试
import { render, screen } from '@testing-library/react'
test('显示加载状态', () => {
render(<LoadingSpinner visible={true} />)
expect(screen.getByRole('status')).toBeInTheDocument()
expect(screen.queryByText('Loading...')).not.toBeNull()
})
test('隐藏加载状态', () => {
render(<LoadingSpinner visible={false} />)
expect(screen.queryByRole('status')).toBeNull()
})
// vue组合式api测试
import { useCounter } from './counter'
import { ref } from 'vue'
test('计数器功能', () => {
const { count, increment } = useCounter(ref(5))
expect(count.value).toBe(5)
increment()
expect(count.value).toBe(6)
})