编辑“︁Vue.js测试覆盖率”︁

= Vue.js测试覆盖率 =

== 简介 ==
'''测试覆盖率'''是衡量测试套件对源代码覆盖程度的指标，表示被测试执行的代码占总代码的比例。在Vue.js项目中，通过分析测试覆盖率可以评估测试的完整性，发现未被测试的代码路径，从而提高软件质量。覆盖率通常分为：
* '''行覆盖率'''（Line Coverage）：已执行代码行数占总行数的比例
* '''分支覆盖率'''（Branch Coverage）：已测试代码分支路径占总分支路径的比例
* '''函数覆盖率'''（Function Coverage）：已调用函数占总函数的比例

== 核心概念 ==

=== 覆盖率工具 ===
Vue.js项目常用工具组合：
* '''[[Jest]]'''：测试运行器
* '''[[Istanbul]]'''（现为Jest内置）：覆盖率统计工具
* '''[[nyc]]'''：命令行覆盖率工具

=== 基础配置 ===
在<code>jest.config.js</code>中启用覆盖率：

<syntaxhighlight lang="javascript">
module.exports = {
  collectCoverage: true,
  coverageReporters: ['html', 'text-summary'],
  coverageDirectory: 'coverage',
  collectCoverageFrom: [
    'src/**/*.{js,vue}',
    '!**/node_modules/**'
  ]
}
</syntaxhighlight>

== 实战示例 ==

=== 组件测试 ===
测试一个简单的计数器组件：

<syntaxhighlight lang="javascript">
// Counter.vue
<template>
  <div>
    <button @click="decrement">-</button>
    <span>{{ count }}</span>
    <button @click="increment">+</button>
  </div>
</template>

<script>
export default {
  data() {
    return { count: 0 }
  },
  methods: {
    increment() { this.count++ },
    decrement() { this.count-- }
  }
}
</script>
</syntaxhighlight>

对应的测试文件：

<syntaxhighlight lang="javascript">
// Counter.spec.js
import { mount } from '@vue/test-utils'
import Counter from './Counter.vue'

describe('Counter', () => {
  it('increments count', () => {
    const wrapper = mount(Counter)
    wrapper.find('button:nth-child(2)').trigger('click')
    expect(wrapper.vm.count).toBe(1)
  })

  // 故意遗漏decrement测试以演示覆盖率
})
</syntaxhighlight>

执行测试后生成的覆盖率报告会显示：
* <code>increment</code>方法：已覆盖
* <code>decrement</code>方法：未覆盖
* 模板渲染：已覆盖

=== 覆盖率阈值 ===
在<code>package.json</code>中设置最低要求：

<syntaxhighlight lang="json">
{
  "jest": {
    "coverageThreshold": {
      "global": {
        "branches": 80,
        "functions": 90,
        "lines": 85,
        "statements": 85
      }
    }
  }
}
</syntaxhighlight>

== 高级技巧 ==

=== 忽略代码块 ===
使用特殊注释排除无需覆盖的代码：

<syntaxhighlight lang="javascript">
/* istanbul ignore next */
function utilityFunction() {
  // 此函数不会计入覆盖率统计
}
</syntaxhighlight>

=== 分支覆盖率优化 ===
处理条件语句的完整测试：

<syntaxhighlight lang="javascript">
// 被测函数
function checkValue(value) {
  if (value > 10) {
    return 'High'
  } else if (value > 5) {  // 需要测试边界值6和10
    return 'Medium'
  }
  return 'Low'
}
</syntaxhighlight>

完整测试用例应包含：
* <code>value = 15</code>（测试High路径）
* <code>value = 8</code>（测试Medium路径）
* <code>value = 3</code>（测试Low路径）

== 可视化分析 ==

<mermaid>
pie
    title 测试覆盖率分布
    "已覆盖行数" : 85
    "未覆盖行数" : 15
    "忽略代码" : 5
</mermaid>

== 数学表示 ==
覆盖率计算公式：
<math>
\text{行覆盖率} = \frac{\text{已执行行数}}{\text{可执行总行数}} \times 100\%
</math>

== 最佳实践 ==
1. '''渐进式目标'''：从50%开始逐步提高阈值
2. '''关键路径优先'''：核心业务逻辑应达到100%覆盖
3. '''定期检查'''：集成到CI/CD流程中
4. '''避免虚假覆盖'''：不要仅为提高覆盖率而编写无意义测试

== 常见误区 ==
* '''追求100%覆盖'''：非关键代码无需强制完全覆盖
* '''忽略边缘情况'''：只测试"快乐路径"(happy path)
* '''模板覆盖率遗漏'''：Vue模板中的条件渲染也需要测试

== 总结 ==
测试覆盖率是Vue.js项目质量保障的重要指标，但需合理使用。建议结合快照测试和端到端测试，构建完整的测试体系。通过持续监控覆盖率变化，可以有效提升代码可靠性。

[[Category:前端框架]]
[[Category:Vue.js]]
[[Category:Vue.js测试]]