一次看懂 Jest 覆蓋率報告

[larrykkk]

一次看懂 Jest 覆蓋率報告

在談單元測試的時候常常會談到一個關鍵性的名詞: 覆蓋率(coverage)，
雖然很多時候覆蓋率並不是一個好的指標來衡量你的測試品質，但在客觀的情況下就是會問你覆蓋率到多少。

所以今天我讓我們來研究一下這個東西吧!
不過在那之前要先講一下怎麼開啟產生覆蓋率報告

1. 開啟產生覆蓋率報告的選項

以 Vue + Jest 為例
有找到這裡 說明如何開啟
通常是把以下的設定寫進 jest.config.js 或是 package.json (還需要稍作修改) 裡面就可以了

module.exports = {
  moduleFileExtensions: ['js', 'json', 'vue'],
  transform: {
    '^.+\\.js$': 'babel-jest',
    '^.+\\.vue$': 'vue-jest'
  },
  collectCoverage: true,
  collectCoverageFrom: ['src/**/*.{js,vue}', '!src/main.js']
}

2. 產生報告

再跑一次測試就可以了，以使用 @vue/cli-plugin-unit-jest 來安裝的同學為例，只要再次使用 npm run test:unit 就可以等待報告產生了

3. 打開報告

跑完以後不管是否全部通過還是有部分通過，都會在根目錄下面 coverage 這個資料夾，我們直接進入 coverage/lcov-report 就可以看到報告的 html 檔 index.html，點兩下打開以後就可以檢視覆蓋率如何

4. 理解報告

簡單解釋一下各項的意思
首先是左上角的文字跟數字
如果是 Statements 10/10 那就表示在這支檔案中的 Statements 的覆蓋率是百分之百

Statements

計算每一個陳述句的覆蓋率，關於 Statement 是甚麼 ?
這裡面的語法都算是 statement
用我自己的理解來解釋的話那就是:
statement 執行一些邏輯，但不會回傳值(value)，像下面這種就不是 statement，因為會回傳值

new objectType([param1, param2, ..., paramN]);

你也可以參考這文章

我自己測試的話，會發現很多地方我覺得不是 statements 的地方其實都算是 statement，像是我發現 data 既是 statement 也是 functions 也是 lines (@@?)

data() {
  return {
    // ...
  }
}

Branches

每一個 if ... else 或是 switch case 產生的分支，都會被計算是一次

Functions

就是計算 JS function，在 vue 中常見的 methods 也屬於 functions

Lines

計算每一行的覆蓋

還有一些在報告裡面怪怪的地方，譬如

I: 代表 if 語句沒有成立，判斷式內的語句未執行
E: 代表 else 語句沒有成立，判斷式內的語句未執行
行數左邊的 x 數量: 代表那一行執行次數

如果程式碼被顏色標記的話:

黃色：代表沒有覆蓋的 Branches
粉紅色：未涵蓋的 Statements

總結

這篇文章的主要想傳達幾個重點

1. 如何產生報告
2. 理解報告中的資訊，當我們了解覆蓋率報告中的資訊是如何計算跟呈現之後，想要提高覆蓋率的時候就知道要往哪個方向努力了

參考

How to read Test Coverage report generated using Jest.