【高频考点精讲】前端代码覆盖率：如何确保测试足够全面？

前端代码覆盖率：你的测试真的"雨露均沾"了吗？

🧑‍🏫 作者：全栈老李

📅 更新时间：2025 年 5 月

🧑‍💻 适合人群：前端初学者、进阶开发者

🚀 版权：本文由全栈老李原创，转载请注明出处。

最近团队里来了个实习生，信心满满地说自己写的组件"测试覆盖率100%"。我让他跑个覆盖率报告看看，结果发现他所谓的测试只是渲染了组件，连点击事件都没触发——这就像自称吃遍北京美食，结果只去了全聚德一家店（还只拍了门口照片）。今天咱们就来聊聊，如何用代码覆盖率工具给你的测试做个"全身检查"。

覆盖率不是数字游戏

先破除个迷信：100%覆盖率 ≠ 无bug。就像体检报告各项指标都正常，不代表你就不会感冒。覆盖率衡量的是"测试代码执行了哪些源码"，而不是"测试是否充分"。举个例子：

// 全栈老李提示：这个函数虽然简单，但测试陷阱不少
function calculateDiscount(price, isVIP) {
   
  if (price > 100) {
   
    return isVIP ? price * 0.7 : price * 0.9 // 老李说：这里有两个分支
  }
  return price // 别忘了这个默认情况！
}

你写个测试只验证price=200, isVIP=true的情况，覆盖率显示100%（因为所有行都执行了），但其实漏掉了：

1. 非VIP用户的折扣
2. 低价商品不打折的情况
3. 边界值price=100

四大金刚：覆盖率的核心指标

现代覆盖率工具通常报告四种指标（以Istanbul为例）：

1. 行覆盖率（Line）：最基础的，这行代码被执行了吗？
2. 函数覆盖率（Function）：每个函数都被调用了吗？
3. 分支覆盖率（Branch）：if/else等条件的所有分支都走到了吗？
4. 语句覆盖率（Statement）：每个语句都执行了吗？

看个真实项目的覆盖率报告（使用Jest+istanbul）：

----------------|---------|----------|---------|---------|-------------------
File            | % Stmts | % Branch | % Funcs | % Lines | Uncovered Line #s 
----------------|---------|----------|---------|---------|-------------------
All files       |    85.6 |     72.3 |    83.3 |    86.1 |                   
 components     |    91.2 |     80.1 |    90.0 |    91.5 |                   
  Button.js     |    95.0 |     85.7 |   100.0 |    95.0 | 32-33             
  Modal.js      |    87.5 |     75.0 |    85.7 |    88.2 | 48-50,67          
----------------|---------|----------|---------|---------|-------------------

全栈老李解读：Modal组件分支覆盖率只有75%，说明有1/4的条件分支没测试到，很可能漏掉了某些边缘情况。

实战：给React组件做"CT扫描"

让我们用Jest+Enzyme给一个抽奖按钮组件做测试（代码含老李独家调试技巧）：

// LotteryButton.js
import React, { useState } from 'react'
const prizes = ['谢谢参与', '50元券', '100元券', '神秘大奖'] // 老李提示：测试要覆盖所有奖品
export default function LotteryButton({ onWin }) {
  const [result, setResult] = useState(null)
  
  const draw = () => {
    const random = Math.random()
    let prizeIndex = 0
    
    // 全栈老李注释：这个概率分布很容易测不全
    if (random