最近自己用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
有数字表示被测过几次，标红表示没被测过
