最近自己用vue造輪子開發(fā)UI框架额各，為了使代碼更健壯国觉，采用了Karma做單元測(cè)試，并嘗試測(cè)試覆蓋率以檢測(cè)測(cè)試質(zhì)量虾啦。以下是測(cè)試覆蓋率過程麻诀。
首先安裝依賴
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 的測(cè)試命令
"test": "cross-env BABEL_ENV=test karma start --single-run"
之后運(yùn)行yarn test就可以看到覆蓋率概覽啦
覆蓋率概覽.png
也可以網(wǎng)頁預(yù)覽痕寓，打開
coverage/lcov-report/index.html
image.png
可以點(diǎn)擊具體組件查看組件代碼是否被測(cè)試過
image.png
有數(shù)字表示被測(cè)過幾次，標(biāo)紅表示沒被測(cè)過
