在 Karma 中测试覆盖率

最近自己用vue造轮子开发UI框架，为了使代码更健壮，采用了Karma做单元测试，并尝试测试覆盖率以检测测试质量。以下是测试覆盖率过程。

首先安装依赖
yarn add -D karma-coverage cross-env babel-plugin-istanbul
修改babel.config.js

module.exports = {
  presets: [
    '@vue/app'
  ],
  // 添加以下几行代码
  env: {
    test: {
      plugins: ["istanbul"]
    }
  }
}

修改karma.conf.js, 增加以下配置

    reporters: ['spec', 'coverage'],
    coverageReporter: {
      dir: './coverage',
      reporters: [
        { type: 'lcov', subdir: '.' },
        { type: 'text-summary' }
      ]
    },

修改 package.json 的测试命令

"test": "cross-env BABEL_ENV=test karma start --single-run"

之后运行yarn test就可以看到覆盖率概览啦

覆盖率概览.png

也可以网页预览，打开coverage/lcov-report/index.html

image.png

可以点击具体组件查看组件代码是否被测试过

image.png

有数字表示被测过几次，标红表示没被测过

参考文档：https://vue-test-utils.vuejs.org/zh/guides/#%E7%94%A8-karma-%E6%B5%8B%E8%AF%95%E5%8D%95%E6%96%87%E4%BB%B6%E7%BB%84%E4%BB%B6