单元测试学习笔记

单元测试是软件测试的基础层级，主要针对代码的最小可测试单元进行验证。单元测试可以帮助快速定位问题边界，提升代码可维护性，支持安全的重构操作。

测试对象：

• 独立函数/方法
• 纯工具类（如数据处理函数）
• 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)
})