[[429164]]

覆蓋率檢測是用來判斷單測完整性的，jest 和 karma 都提供了這種功能：

覆蓋率就是執(zhí)行過的代碼占總代碼的比例，比如執(zhí)行了多少行(Line)，執(zhí)行了多少個分支(Branch)，執(zhí)行了多少個函數(shù)(Function)，執(zhí)行了多少條語句(Statement)。

用它比上總的數(shù)量就是覆蓋率，分為行覆蓋率、分支覆蓋率、函數(shù)覆蓋率、語句覆蓋率等。

看起來是不是很神奇，執(zhí)行完一遍就能知道覆蓋到了哪些代碼，其實實現(xiàn)原理比較簡單，相信看完這篇文章，你會有“就這?”的感覺。

原理探究

jest 和 karama 都是基于 istanbul 做的覆蓋率檢測，我們來探究下 istanbul 的實現(xiàn)原理。

測試代碼如下： 

我們執(zhí)行 istanbul 的 instrument 命令：

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

instrument 是指函數(shù)插樁，也就是透明的給函數(shù)添加一些代碼。

為什么要插樁呢?看完生成的代碼你就明白了。

我們來格式化一下，把變量名替換下。

這就是轉(zhuǎn)換后的代碼，在每一個 statement，每一個 function、每一個 branch 都做了計數(shù)，分別是 s、f、b 屬性。

上面還有一段代碼：

初始化了全局變量 AAA，記錄了這些信息：

• path：路徑
• s：statement 數(shù)
• b：branch 數(shù)
• f：function 數(shù)
• fnMap：function 的開始結(jié)束位置信息
• statementMap：statement 的開始結(jié)束位置信息
• branchMap：branch 的開始結(jié)束位置信息

看到這里我們大概就能搞懂覆蓋率的原理了，就是對每個 statement、function、branch 都插入一段計數(shù)代碼，記錄在一個全局對象中。

為了不和別的全局變量沖突，這個對象的名字是隨機生成的，比如 __cov_5ZoEXQ_Hbo27uXArxdm2oA，這里為了簡化改為了 AAA。

我們搞明白了覆蓋率就是靠插入計數(shù)代碼，那怎么做的插樁呢?

函數(shù)插樁

函數(shù)插樁是基于 AST，找到 statement、function、branch 的 AST，在前面插入插樁代碼的 AST。

istanbul 確實也是這么做的。

下面是 istanbul 的源碼(只看紅線標出的位置就行)：

就是通過 esprima(js parser)來把代碼 parse 成 AST，然后對 AST 進行插樁。

插樁代碼分為兩部分，一部分是初始化全局對象的代碼，一部分是每個分支、語句、函數(shù)的計數(shù)代碼。

我們分別來看下：

初始化全局對象的代碼插樁

istanbul 初始化了全局的 coverState 對象用于統(tǒng)計：

做插樁的時候會記錄信息到這個 coverState 中：

最后把 coverState 變成字符串加入到代碼里：

那具體的分支、語句、函數(shù)的 AST 是怎么插樁的?

分支、語句、函數(shù)的插樁

對不同 AST 的插樁，就是遍歷過程中根據(jù)類型做不同的處理：

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

statement 插樁：

function 插樁：

看到這里，我們就知道了函數(shù)插樁的實現(xiàn)原理，就是遍歷 AST，在不同的位置插入計數(shù)代碼的 AST 就可以了。

但是有的同學(xué)可能會說了，平時我也沒手動生成插樁后的代碼啊?用 jest --coverage 跑測試用例自動就做了計數(shù)，然后給出覆蓋率數(shù)據(jù)了。

istanbul 是怎么做到透明的插樁的呢?

require hook 實現(xiàn)透明無感知的函數(shù)插樁

看過之前一篇 require hook 的魔術(shù)那篇文章的小伙伴知道，nodejs 的模塊加載是分為 load、extension['.js']、compile 這幾步的。

我們只需要重寫 extension['.js'] 這一步，就能做到透明的代碼轉(zhuǎn)換。

istanbul 也是這么做的：

它就是通過修改了 extension['.js'] 方法，在這里面做了函數(shù)插樁，之后執(zhí)行的代碼就是轉(zhuǎn)換過后的了，開發(fā)者根本感知不到。

總結(jié)

jest 和 karma 都基于 istanbul 實現(xiàn)了覆蓋率檢測。覆蓋率統(tǒng)計的原理就是函數(shù)插樁，基于 AST 在代碼的 statement、function、branch 處插入計數(shù)代碼，同時通過 require hook 實現(xiàn)了透明的轉(zhuǎn)換。這樣代碼一執(zhí)行就能拿到統(tǒng)計數(shù)據(jù)，自然就可以算出覆蓋率了。

看完之后，是不是覺得：

覆蓋率檢測的實現(xiàn)，就這?