“覆盖率检测”的实现原理，就这？

た入场券 2022-08-28 05:58 253阅读 0赞

覆盖率检测是用来判断单测完整性的，jest 和 karma 都提供了这种功能：

![a2e76ad94339d7aadc97f56f03c66c05.png][] ![2b68900e204a674bccd09fe9badcd8d7.png][]

覆盖率就是执行过的代码占总代码的比例，比如执行了多少行（Line），执行了多少个分支（Branch），执行了多少个函数（Function），执行了多少条语句（Statement）。

用它比上总的数量就是覆盖率，分为行覆盖率、分支覆盖率、函数覆盖率、语句覆盖率等。

看起来是不是很神奇，执行完一遍就能知道覆盖到了哪些代码，其实实现原理比较简单，相信看完这篇文章，你会有“就这？”的感觉。

## 原理探究 ##

jest 和 karama 都是基于 istanbul 做的覆盖率检测，我们来探究下 istanbul 的实现原理。

测试代码如下：

![bf4f03848e71e15cfeda8abc97f33999.png][]

我们执行 istanbul 的 instrument 命令：

npx istanbul instrument ./test.js -o ./out.js

instrument 是指函数插桩，也就是透明的给函数添加一些代码。

为什么要插桩呢？看完生成的代码你就明白了。

![df0ac1ae24604c1129c3895dfcd6211c.png][]

我们来格式化一下，把变量名替换下。

![afac7b2eaee1ec9f9a8776b23c91dbee.png][]

这就是转换后的代码，在每一个 statement，每一个 function、每一个 branch 都做了计数，分别是 s、f、b 属性。

上面还有一段代码：

![466e54a82a0d60629ff1c23bec0f0f58.png][]

初始化了全局变量 AAA，记录了这些信息：

*  `path`：路径
 *  `s`：statement 数
 *  `b`：branch 数
 *  `f`：function 数
 *  `fnMap`：function 的开始结束位置信息
 *  `statementMap`：statement 的开始结束位置信息
 *  `branchMap`：branch 的开始结束位置信息

看到这里我们大概就能搞懂覆盖率的原理了，就是对每个 statement、function、branch 都插入一段计数代码，记录在一个全局对象中。

为了不和别的全局变量冲突，这个对象的名字是随机生成的，比如 `__cov_5ZoEXQ_Hbo27uXArxdm2oA`，这里为了简化改为了 AAA。

我们搞明白了覆盖率就是靠插入计数代码，那怎么做的插桩呢？

## 函数插桩 ##

函数插桩是基于 AST，找到 statement、function、branch 的 AST，在前面插入插桩代码的 AST。

istanbul 确实也是这么做的。

下面是 istanbul 的源码（只看红线标出的位置就行）：

![ce05a10927f564624b256d129b48daa0.png][]

就是通过 esprima（js parser）来把代码 parse 成 AST，然后对 AST 进行插桩。

插桩代码分为两部分，一部分是初始化全局对象的代码，一部分是每个分支、语句、函数的计数代码。

我们分别来看下：

### 初始化全局对象的代码插桩 ###

istanbul 初始化了全局的 coverState 对象用于统计：

![1bdcd9ed8ea655713674de03255b6707.png][]

做插桩的时候会记录信息到这个 coverState 中：

![1a79b2b3909e72b505b1bebe6243bbb9.png][]

最后把 coverState 变成字符串加入到代码里：

![9e7dc67a43968e5ede928cb2df54f604.png][]

那具体的分支、语句、函数的 AST 是怎么插桩的？

### 分支、语句、函数的插桩 ###

对不同 AST 的插桩，就是遍历过程中根据类型做不同的处理：

![cac2a85d0172febe25d02968d5cef4ab.png][]

然后，具体的插桩就是在前面插入一段 AST：

statement 插桩：

![48ae05cd6825e9aa34657767204a2f4f.png][]

function 插桩：

![9da7e07c4b873d18cd0653dc564772e5.png][]

看到这里，我们就知道了函数插桩的实现原理，就是遍历 AST，在不同的位置插入计数代码的 AST 就可以了。

但是有的同学可能会说了，平时我也没手动生成插桩后的代码啊？用 jest --coverage 跑测试用例自动就做了计数，然后给出覆盖率数据了。

istanbul 是怎么做到透明的插桩的呢？

## require hook 实现透明无感知的函数插桩 ##

看过之前一篇 [require hook 的魔术][require hook]

![19687c5b83208a740736c2150802f54f.png][]

我们只需要重写 extension\['.js'\] 这一步，就能做到透明的代码转换。

istanbul 也是这么做的：

![8f47b4c5a8f536820bdeef52b0db7650.png][]

它就是通过修改了 extension\['.js'\] 方法，在这里面做了函数插桩，之后执行的代码就是转换过后的了，开发者根本感知不到。

## 总结 ##

jest 和 karma 都基于 istanbul 实现了覆盖率检测。覆盖率统计的原理就是函数插桩，基于 AST 在代码的 statement、function、branch 处插入计数代码，同时通过 require hook 实现了透明的转换。这样代码一执行就能拿到统计数据，自然就可以算出覆盖率了。

看完之后，是不是觉得：

覆盖率检测的实现，就这？

往期推荐

[![7ae37d70ffc8cc5728b5620b14c6807e.png][]][7ae37d70ffc8cc5728b5620b14c6807e.png 1]

[解密初、中、高级程序员的进化之路（前端）][7ae37d70ffc8cc5728b5620b14c6807e.png 1]

[![cfdc677c75fcbb7aa3f3f4acb1322469.png][]][cfdc677c75fcbb7aa3f3f4acb1322469.png 1]

[程序员一定会有35岁危机吗？][cfdc677c75fcbb7aa3f3f4acb1322469.png 1]

[![8a56644d03e81d90f4d2db3144f12c54.png][]][8a56644d03e81d90f4d2db3144f12c54.png 1]

[近 20k Star的项目说不做就不做了，但总结的内容值得借鉴][8a56644d03e81d90f4d2db3144f12c54.png 1]

[![c11a9e76617123504858cbb4f7e8e1bf.png][]][c11a9e76617123504858cbb4f7e8e1bf.png 1]

[但凡早知道这28个网站，都不至于学得那么不扎实][c11a9e76617123504858cbb4f7e8e1bf.png 1]

如果你觉得这篇内容对你挺有启发，我想邀请你帮我三个小忙：

1.  点个「**在看**」，让更多的人也能看到这篇内容（喜欢不点在看，都是耍流氓 -\_-）
2.  欢迎加我微信「huab119」拉你进技术群，长期交流学习...
    
    关注公众号「**前端劝退师**」，持续为你推送精选好文，也可以加我为好友，随时聊骚。
3.

![cb577d2b4da245f23e20d4262731e448.png][]

点个在看支持我吧，转发就更好了

如果觉得这篇文章还不错，来个【转发、收藏、在看】三连吧，让更多的人也看到~

![d77366e6110a468997a5b41404c1efa7.png][]

[a2e76ad94339d7aadc97f56f03c66c05.png]: https://img-blog.csdnimg.cn/img_convert/a2e76ad94339d7aadc97f56f03c66c05.png
[2b68900e204a674bccd09fe9badcd8d7.png]: /images/20220828/4b22eb6be7b246f2bb932caf0defb30a.png
[bf4f03848e71e15cfeda8abc97f33999.png]: /images/20220828/914adea548164a27b9dae8cb3928921d.png
[df0ac1ae24604c1129c3895dfcd6211c.png]: /images/20220828/9c954d2d9d9540488142296fabaeae24.png
[afac7b2eaee1ec9f9a8776b23c91dbee.png]: /images/20220828/fba5fad315724223a2379cc3ef13643d.png
[466e54a82a0d60629ff1c23bec0f0f58.png]: /images/20220828/5785bcc0035a41efa0d5efb9f85068dd.png
[ce05a10927f564624b256d129b48daa0.png]: /images/20220828/dfaba52df1794b218efd8bf6b767d80f.png
[1bdcd9ed8ea655713674de03255b6707.png]: /images/20220828/aeeeb1d1874b4aa28f79ce87575d22a0.png
[1a79b2b3909e72b505b1bebe6243bbb9.png]: /images/20220828/e9b1839b09ba457082d374ef2d1a872d.png
[9e7dc67a43968e5ede928cb2df54f604.png]: /images/20220828/76caca14d46a471bb76ad780bc6b81e9.png
[cac2a85d0172febe25d02968d5cef4ab.png]: /images/20220828/4d832a681fa9437294236f7da1a8bc8b.png
[48ae05cd6825e9aa34657767204a2f4f.png]: /images/20220828/a336f2a17aa8440dae3af1676d7ca4cd.png
[9da7e07c4b873d18cd0653dc564772e5.png]: /images/20220828/8a7ab571ba254bfab82bb94de9e8fb76.png
[require hook]: https://blog.csdn.net/weixin_30545285/article/details/96110047
[19687c5b83208a740736c2150802f54f.png]: /images/20220828/4fac5a9a9a73427084a488527f7ef9b9.png
[8f47b4c5a8f536820bdeef52b0db7650.png]: /images/20220828/483aca873b38494e9169378e8086b5e5.png
[7ae37d70ffc8cc5728b5620b14c6807e.png]: /images/20220828/391cdb230eea4e428ade283f06a3d1ed.png
[7ae37d70ffc8cc5728b5620b14c6807e.png 1]: http://mp.weixin.qq.com/s?__biz=MzI1NDU3NzM5Mg==&mid=2247488225&idx=1&sn=3e91b6a5ac626e1f9a1af2440841ba09&chksm=e9c24d7edeb5c46838a3c8388e5ca06527de7462ba131a032c4f8436b5c141d072a95e954565&scene=21#wechat_redirect
[cfdc677c75fcbb7aa3f3f4acb1322469.png]: /images/20220828/9e23f21cd89143fea23350994dbe280a.png
[cfdc677c75fcbb7aa3f3f4acb1322469.png 1]: http://mp.weixin.qq.com/s?__biz=MzI1NDU3NzM5Mg==&mid=2247488196&idx=1&sn=cbdc683c77c4aa72013a2a4dd978155f&chksm=e9c24d5bdeb5c44d86b4bdef20c3f47c4e78447fbf1741296c4e5b604854be41439adba23164&scene=21#wechat_redirect
[8a56644d03e81d90f4d2db3144f12c54.png]: /images/20220828/b691f82280f74b469a352e8c37f82929.png
[8a56644d03e81d90f4d2db3144f12c54.png 1]: http://mp.weixin.qq.com/s?__biz=MzI1NDU3NzM5Mg==&mid=2247488186&idx=1&sn=524febedb0b747325c6033b2b6c8a3a1&chksm=e9c24d25deb5c433458252a80776efbe9782d97586f13cd9fa19b9479e265206e07adb805f84&scene=21#wechat_redirect
[c11a9e76617123504858cbb4f7e8e1bf.png]: /images/20220828/707c509df0d94064b8d3992d1f01d9a8.png
[c11a9e76617123504858cbb4f7e8e1bf.png 1]: http://mp.weixin.qq.com/s?__biz=MzI1NDU3NzM5Mg==&mid=2247488154&idx=1&sn=e7310eb5cce62960512d3d31f3ef3737&chksm=e9c24d05deb5c413674ff8e6335b617d0e65890c4f69c090510027b72df3f819b5781a00a08f&scene=21#wechat_redirect
[cb577d2b4da245f23e20d4262731e448.png]: /images/20220828/a0af2ee9859c484cbf9fc3aaa7052e90.png
[d77366e6110a468997a5b41404c1efa7.png]: /images/20220828/7d07304b8ca84fa1b5fe9068f17e2c7f.png