🔧基于istanbul实现代码测试覆盖率工具

背景

引入istanbul最初的目的是为了实现生成cypress端对端测试覆盖率报告，但是在经过一段时间实践后认为每次实现业务功能后再去实现cypress测试的成本过高，后面采用jest等单元测试框架来替代，但是istanbul却被保留下来，作为供测试人员评估测试质量和效率的工具。

基于实际的业务背景，需要一个工具来生成代码测试覆盖率报告，而代码覆盖率有下面这四个维度：

其中对于测试而言最重要的可能就是函数覆盖率和分支覆盖率了，从这两个指标可以判断出测试工作是否有遗漏的情况。最理想的情况是能够所有覆盖率指标都能覆盖到，在实际测试中应该尽量提升函数覆盖率和分支覆盖率。

生成这四个维度的代码覆盖率报告可以通过Istanbul这个babel插件来实现，Istanbul 是一个 JavaScript 代码覆盖率工具，它可以用于测量 JavaScript 代码的测试覆盖率。由于istanbul是一个babel插件，因此使用Istanbul的前提是项目中集成了babel。

从技术上来说，由于需要同时集成到老项目和新项目上，因此这就要求了这个工具具备下面的特点：

Istanbul实现的本质是“插桩”，在代码的入口和出口插入计数器代码，以便在你的代码执行时能够记录执行情况。

基于前面所说的几点来考虑，这个工具应当做成一个babel预设，然后作为一个npm库集成到各个项目中，以便能够尽量降低集成成本。

此外工具还需要提供一些交互功能给测试人员使用，虽然目前公司技术栈都是vue，但是为了确保兼容性，还是需要考虑兼容常用的框架。

Istanbul不支持的vue的SFC（单页面组件），但是换个思路，vue的SFC实际上最终会编译成一个包含render方法的js对象，本质上还是js。

最后更新于1年前

背景

要求

基于实际的业务背景，需要一个工具来生成代码测试覆盖率报告，而代码覆盖率有下面这四个维度：

函数覆盖率：覆盖了多少函数

行覆盖率：覆盖了多少行代码

分支覆盖率：覆盖了多少分支

语句覆盖率：覆盖了多少语句

从技术上来说，由于需要同时集成到老项目和新项目上，因此这就要求了这个工具具备下面的特点：

易集成性：尽量减少集成到项目中的成本。

可扩展性：支持未来扩展新功能。

最小依赖：应当尽量少地引入新的依赖。

易使用性：减少集成和测试人员心智负担。

实现

整体思路

基于前面所说的几点来考虑，这个工具应当做成一个babel预设，然后作为一个npm库集成到各个项目中，以便能够尽量降低集成成本。

此外工具还需要提供一些交互功能给测试人员使用，虽然目前公司技术栈都是vue，但是为了确保兼容性，还是需要考虑兼容常用的框架。

依赖

babel

babel-plugin-istanbul

适配vue文件

Istanbul不支持的vue的SFC（单页面组件），但是换个思路，vue的SFC实际上最终会编译成一个包含render方法的js对象，本质上还是js。