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

## 背景

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

## 要求

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

* 函数覆盖率：覆盖了多少函数
* 行覆盖率：覆盖了多少行代码
* 分支覆盖率：覆盖了多少分支
* 语句覆盖率：覆盖了多少语句

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

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

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

1. 易集成性：尽量减少集成到项目中的成本。
2. 可扩展性：支持未来扩展新功能。
3. 最小依赖：应当尽量少地引入新的依赖。
4. 易使用性：减少集成和测试人员心智负担。

## 原理

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

## 实现

### 整体思路

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

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

### 依赖

* **babel**
* **babel-plugin-istanbul**

### 适配vue文件

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

## 需要解决的问题

### 一些情况下丢失函数名

### 实现增量和全量测试覆盖率


---

# Agent Instructions: Querying This Documentation

If you need additional information that is not directly available in this page, you can query the documentation dynamically by asking a question.

Perform an HTTP GET request on the current page URL with the `ask` query parameter:

```
GET https://1425816423.gitbook.io/my-knowledge-base/jing-yan-ji-lu/jing-yan-zong-jie/ji-yu-istanbul-shi-xian-dai-ma-ce-shi-fu-gailgong-ju.md?ask=<question>
```

The question should be specific, self-contained, and written in natural language.
The response will contain a direct answer to the question and relevant excerpts and sources from the documentation.

Use this mechanism when the answer is not explicitly present in the current page, you need clarification or additional context, or you want to retrieve related documentation sections.