Vue.js测试覆盖率[编辑 | 编辑源代码]

简介[编辑 | 编辑源代码]

测试覆盖率是衡量测试套件对源代码覆盖程度的指标，表示被测试执行的代码占总代码的比例。在Vue.js项目中，通过分析测试覆盖率可以评估测试的完整性，发现未被测试的代码路径，从而提高软件质量。覆盖率通常分为：

行覆盖率（Line Coverage）：已执行代码行数占总行数的比例
分支覆盖率（Branch Coverage）：已测试代码分支路径占总分支路径的比例
函数覆盖率（Function Coverage）：已调用函数占总函数的比例

核心概念[编辑 | 编辑源代码]

覆盖率工具[编辑 | 编辑源代码]

Vue.js项目常用工具组合：

Jest：测试运行器
Istanbul（现为Jest内置）：覆盖率统计工具
nyc：命令行覆盖率工具

基础配置[编辑 | 编辑源代码]

在jest.config.js中启用覆盖率：

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

实战示例[编辑 | 编辑源代码]

组件测试[编辑 | 编辑源代码]

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

// 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>

对应的测试文件：

// 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测试以演示覆盖率
})

执行测试后生成的覆盖率报告会显示：

increment方法：已覆盖
decrement方法：未覆盖
模板渲染：已覆盖

覆盖率阈值[编辑 | 编辑源代码]

在package.json中设置最低要求：

{
  "jest": {
    "coverageThreshold": {
      "global": {
        "branches": 80,
        "functions": 90,
        "lines": 85,
        "statements": 85
      }
    }
  }
}

高级技巧[编辑 | 编辑源代码]

忽略代码块[编辑 | 编辑源代码]

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

/* istanbul ignore next */
function utilityFunction() {
  // 此函数不会计入覆盖率统计
}

分支覆盖率优化[编辑 | 编辑源代码]

处理条件语句的完整测试：

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