在概念篇里，了解到覆蓋率，開始的時候，看斷言庫，看mocha，但實際操刀寫單元測試，還是沒啥概念，就算是看了element ui 組件庫的那些單元測試用例，實際搬到自己組件上的時候，還是感覺無從下手，只有個模糊的概念：

組件的單元測試，那就分：

1、文本比對

2、組件中方法調用

3、組件中props的傳遞值是否正常取到

好像也就這些，再復雜點就是帶上store啥的，又考慮到組件依賴store后，這還算不算單元測試呢？又困惑了~o(╯□╰)o

根據我這模糊的概念，在結合之前覆蓋率的概念，突然想到這不是就是覆蓋率的幾項么？那我照著覆蓋率的那幾個維度是不是就能全乎了？

立馬實踐下：

腳手架分分鐘建了一個項目，也不用自己寫組件，腳手架的hello world的例子就可以玩好久了，直接跑一下命令：npm run unit

多簡單的例子啊，看截圖中的覆蓋率統計，語句和行覆蓋率是一致的，但還是看不出啥，在概念篇里的http://blog.hypers.io/2017/08/20/test-coverage/ 這篇博文里提到的怎么分析測試報告啥的，感覺很神奇，完全沒看到在哪啊，我跑的時候，不是就一個頁面么，打開那個覆蓋率統計頁面，仔細研究了下，發現很多地方可以點啊~

結合第一張截圖，兩個語句，應該是component和router中各有一個語句被執行啦~這里語句覆蓋和行覆蓋等價了，從實際代碼上看也不確定到底執行的是哪一行啊，于是點進去，就知道啦：

是不是看到了那篇文章里熟悉的numX啊，根據那篇文章的解釋，1x表示這個語句被調用了一次。

現在來試下行覆蓋和語句覆蓋的差別。

在hello world 的vue文件中添加created：

這時候statements和lines的數值不同了吧~

let a = 1 是一條可執行的語句

let b = 2 又是一條可執行語句

后面的console(a)和console(b)就是兩條可執行語句

再算上data里的return那一句，和router文件下的那一句，所以可執行語句是6個，而行數就只有4行

開始我是以為我的斷言對應的是執行的覆蓋率結果，一一對應，而顯然不是：

測試代碼中，只有一個比對文本的斷言，但語句覆蓋率是覆蓋全了，所以顯然我之前對怎么寫用例的理解是歪的~o(╯□╰)o

測試代碼中的一個斷言，是將組件實例化，而組件實例化的時候，會執行data中的return，以及created這里的代碼，所以將語句覆蓋率就完成了。

又稍微改了點代碼，和預期的還是有點出入：

method中加了個consoleNum的方法，跑npm run unit后，想著，branches和functions應該都不會保持0了吧，然后事實很打臉：

加了if else，所以 branches 的值變成了2，有兩個分支。

functions的值為啥沒變呢？

我的理解是，method中的方法，還是組件內部的，不能算作是函數覆蓋率級別，于是我再做了個嘗試，一般寫代碼時都會有些公共處理函數：

我只是定義了下，但沒有去調用，所以執行npm run unit后：

到組件中，調用一下：

也可以是在測試代碼中調用，不在組件本身調用，覆蓋率上也能統計到：

這幾步執行下來后，不管成功失敗，只要調用對應的維度，覆蓋率就很高，這樣的話，如果從覆蓋率的結果來判斷組件是否完善，這顯然就不是正確的思路了，覆蓋率這個只能反應代碼是否都有在測試代碼里斷言到，至于斷言的是否全，還是要看單元測試的概念。

p.p1 { margin: 0; font: 12px ".PingFang SC"; color: rgba(69, 69, 69, 1) }
p.p2 { margin: 0; font: 12px "Helvetica Neue"; color: rgba(228, 175, 10, 1) }
p.p3 { margin: 0; font: 12px "Helvetica Neue"; color: rgba(69, 69, 69, 1); min-height: 14px }
p.p4 { margin: 0; font: 12px "Helvetica Neue"; color: rgba(69, 69, 69, 1) }
span.s1 { font: 12px "Helvetica Neue" }
span.s2 { font: 12px ".PingFang SC"; color: rgba(69, 69, 69, 1) }
span.s3 { font: 12px "Helvetica Neue"; color: rgba(228, 175, 10, 1) }
span.s4 { font: 12px ".PingFang SC" }

總結

以上是生活随笔為你收集整理的前端单元测试笔记 —— 覆盖率篇的全部內容，希望文章能夠幫你解決所遇到的問題。

如果覺得生活随笔網站內容還不錯，歡迎將生活随笔推薦給好友。