单元测试学习笔记

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

测试对象：

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

})