“覆蓋率檢測”的實現原理，就這？
覆蓋率檢測是用來判斷單測完整性的，jest 和 karma 都提供了這種功能：
覆蓋率就是執行過的代碼占總代碼的比例，比如執行了多少行(Line)，執行了多少個分支(Branch)，執行了多少個函數(Function)，執行了多少條語句(Statement)。
用它比上總的數量就是覆蓋率，分為行覆蓋率、分支覆蓋率、函數覆蓋率、語句覆蓋率等。
看起來是不是很神奇，執行完一遍就能知道覆蓋到了哪些代碼，其實實現原理比較簡單，相信看完這篇文章，你會有“就這?”的感覺。
原理探究
jest 和 karama 都是基于 istanbul 做的覆蓋率檢測，我們來探究下 istanbul 的實現原理。
測試代碼如下：
我們執行 istanbul 的 instrument 命令：
- npx istanbul instrument ./test.js -o ./out.js
instrument 是指函數插樁，也就是透明的給函數添加一些代碼。
為什么要插樁呢?看完生成的代碼你就明白了。
我們來格式化一下，把變量名替換下。
這就是轉換后的代碼，在每一個 statement，每一個 function、每一個 branch 都做了計數，分別是 s、f、b 屬性。
上面還有一段代碼：
初始化了全局變量 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 的源碼(只看紅線標出的位置就行)：
就是通過 esprima(js parser)來把代碼 parse 成 AST，然后對 AST 進行插樁。
插樁代碼分為兩部分，一部分是初始化全局對象的代碼，一部分是每個分支、語句、函數的計數代碼。
我們分別來看下：
初始化全局對象的代碼插樁
istanbul 初始化了全局的 coverState 對象用于統計：
做插樁的時候會記錄信息到這個 coverState 中：
最后把 coverState 變成字符串加入到代碼里：
那具體的分支、語句、函數的 AST 是怎么插樁的?
分支、語句、函數的插樁
對不同 AST 的插樁，就是遍歷過程中根據類型做不同的處理：
然后，具體的插樁就是在前面插入一段 AST：
statement 插樁：
function 插樁：
看到這里，我們就知道了函數插樁的實現原理，就是遍歷 AST，在不同的位置插入計數代碼的 AST 就可以了。
但是有的同學可能會說了，平時我也沒手動生成插樁后的代碼啊?用 jest --coverage 跑測試用例自動就做了計數，然后給出覆蓋率數據了。
istanbul 是怎么做到透明的插樁的呢?
require hook 實現透明無感知的函數插樁
看過之前一篇 require hook 的魔術那篇文章的小伙伴知道，nodejs 的模塊加載是分為 load、extension['.js']、compile 這幾步的。
我們只需要重寫 extension['.js'] 這一步，就能做到透明的代碼轉換。
istanbul 也是這么做的：
它就是通過修改了 extension['.js'] 方法，在這里面做了函數插樁，之后執行的代碼就是轉換過后的了，開發者根本感知不到。
總結
jest 和 karma 都基于 istanbul 實現了覆蓋率檢測。覆蓋率統計的原理就是函數插樁，基于 AST 在代碼的 statement、function、branch 處插入計數代碼，同時通過 require hook 實現了透明的轉換。這樣代碼一執行就能拿到統計數據，自然就可以算出覆蓋率了。
看完之后，是不是覺得：
覆蓋率檢測的實現，就這?
