使用Karma做vue组件单元测试的实现(2)

module.exports = function(config) { config.set({ // ... coverageIstanbulReporter: { reports: [ 'html', 'text' ], fixWebpackSourcePaths: true }, reporters: [ 'coverage-istanbul' ] //... }) }

设置 reporters 为 [ 'coverage-istanbul' ]，即使用 coverage-istanbul reporters

coverageIstanbulReporter 配置项用于设置 coverage-istanbul 的参数，详细的参数可以参考

运行结果

再次执行单元测试，我们会看到测试覆盖率的相关信息

----------------|----------|----------|----------|----------|-------------------| File | % Stmts | % Branch | % Funcs | % Lines | Uncovered Line #s | ----------------|----------|----------|----------|----------|-------------------| All files | 100 | 100 | 100 | 100 | | Header.spec.js | 100 | 100 | 100 | 100 | | ----------------|----------|----------|----------|----------|-------------------|

也可以通过生成到 coverage 目录下的网页文件，在浏览器中查看

参考资料

https://vue-test-utils.vuejs.org/zh/
https://github.com/mattlewis92/karma-coverage-istanbul-reporter