前端测试实战：从Jest到Playwright的完整指南

1. 前端测试生存指南：从"我代码没问题"到"卧槽真香"的心路历程

作为一个从业多年的前端开发者，我深知测试在项目中的重要性。记得刚入行时，我和大多数新人一样，对测试嗤之以鼻——"我的代码怎么可能有问题？"、"写测试太浪费时间了"。直到某次线上事故让我凌晨三点被叫起来修复bug，我才真正意识到测试的价值。

这篇文章不是教科书式的测试教程，而是一个从血泪教训中成长起来的前端工程师的真实经验分享。我会带你走过我从"测试小白"到"测试信徒"的完整心路历程，分享那些只有踩过坑才知道的实战技巧。

1.1 为什么我们需要前端测试？

前端测试不是形式主义，而是实实在在的生产力工具。想象一下这样的场景：

• 你修改了一个看似无关紧要的工具函数，结果导致整个支付流程崩溃
• 你在Chrome上测试完美的组件，在Safari上却完全无法使用
• 你重构了一个老组件，却不知道它会影响三个不同页面的功能

这些我都亲身经历过。测试就像给你的代码买了保险——平时可能觉得多余，出事时才知道它的价值。

2. 单元测试：你的代码保镖

2.1 测试框架选型：Jest vs Vitest

在测试框架的选择上，我经历了从Jest到Vitest的转变。Jest作为老牌测试框架确实稳定，但Vitest凭借其极致的速度优势赢得了我的心。

性能对比实测数据：

• 项目规模：150+组件，800+测试用例
• Jest执行时间：3分12秒
• Vitest执行时间：38秒（启用多线程后降至22秒）

Vitest的快速得益于：

1. 原生ESM支持，无需转换
2. 智能的文件监听和增量测试
3. 与Vite生态的深度集成

配置示例：

javascript复制// vitest.config.js
import { defineConfig } from 'vitest/config'

export default defineConfig({
  test: {
    environment: 'jsdom',
    globals: true,
    coverage: {
      provider: 'istanbul',
      thresholds: {
        lines: 85,
        functions: 80,
        branches: 75,
        statements: 85
      }
    }
  }
})

2.2 实战：测试一个价格格式化函数

让我们看一个真实的案例。假设我们有一个价格格式化工具函数：

javascript复制// utils/price.js
export function formatPrice(price, currency = 'CNY') {
  if (price == null || isNaN(price)) return '--'
  
  const isNegative = price < 0
  const absolutePrice = Math.abs(price)
  const yuan = (absolutePrice / 100).toFixed(2)
  
  const symbols = {
    'CNY': '¥', 'USD': '$', 'EUR': '€'
  }
  
  return `${isNegative ? '-' : ''}${symbols[currency] || symbols.CNY}${yuan}`
}

高质量测试的要点：

1. 覆盖所有正常情况
2. 测试边界条件
3. 验证错误处理
4. 检查类型安全

对应的测试用例：

javascript复制// utils/price.spec.js
import { describe, it, expect } from 'vitest'
import { formatPrice } from './price'

describe('formatPrice', () => {
  it('正确格式化人民币价格', () => {
    expect(formatPrice(1000)).toBe('¥10.00')
    expect(formatPrice(999)).toBe('¥9.99')
  })

  it('处理负数价格', () => {
    expect(formatPrice(-1000)).toBe('-¥10.00')
  })

  it('支持不同货币', () => {
    expect(formatPrice(1000, 'USD')).toBe('$10.00')
    expect(formatPrice(1000, 'EUR')).toBe('€10.00')
  })

  it('处理非法输入', () => {
    expect(formatPrice(null)).toBe('--')
    expect(formatPrice(undefined)).toBe('--')
    expect(formatPrice('abc')).toBe('--')
  })

  it('处理极小金额', () => {
    expect(formatPrice(1)).toBe('¥0.01') // 1分钱
    expect(formatPrice(0)).toBe('¥0.00')
  })
})

2.3 组件测试：超越简单的渲染测试

很多开发者对组件测试的理解停留在"是否渲染成功"的层面，这是远远不够的。好的组件测试应该：

1. 验证所有交互逻辑
2. 测试各种props组合
3. 检查边缘情况
4. 验证无障碍访问性

以一个简单的计数器组件为例：

javascript复制// compon