如何獲得程式碼覆蓋率百分比？ ✅

實現 100% 程式碼覆蓋率：實用指南

本文詳細介紹如何有效率地為您的專案實現 100% 的程式碼覆蓋率。 讓我們潛入吧！

準備

開始之前，先確定這些關鍵組件：

1. 測試範圍：定義要測試的程式碼段（函數、模組等）。
2. 第三方函式庫：選擇測試函式庫（例如Mocha）。
3. 報告格式： 選擇報告格式（例如，lcov 表示 Codecov）。

預先規劃可簡化測試過程。

實際實作

此範例使用 TypeScript 檔案：

在專案的根目錄中建立一個 test 資料夾。 測試放置在具有 .test.ts 副檔名（或類似的，如 .spec.ts）的檔案中。

我們將使用 Mocha、Sinon 和 c8 進行覆蓋率報告：

<code class="language-json">  "devDependencies": {
    "@types/mocha": "^10.0.9",
    "@types/sinon": "^17.0.3",
    "c8": "^10.1.2",
    "mocha": "^10.8.2",
    "sinon": "^19.0.2"
  }</code>

需要安裝這些軟體包。 稍後將添加其他庫。

以下命令執行測試並產生報表：

<code class="language-json">  "scripts": {
    "test": "mocha --require ts-node/esm --experimental-specifier-resolution=node",
    "test:watch": "mocha --watch --require ts-node/esm --experimental-specifier-resolution=node",
    "coverage": "c8 --reporter=lcov npm run test",
    "coverage:default": "c8 npm run test"
  },</code>

test:watch命令至關重要；它會自動重新運行程式碼變更測試，從而消除手動重新啟動。

TypeScript 編譯需要額外的模組：

<code class="language-json">  "devDependencies": {
    "ts-node": "^10.9.2",
    "typescript": "^5.6.3"
  }</code>

範例：測試簡單函數

讓我們來測試一下這個add函數：

add.test.ts

<code class="language-typescript">export function add(a: number, b: number): number {
    return a + b;
}</code>

對應的測試文件：

add.ts

<code class="language-typescript">import { strict as assert } from 'assert';
import { add } from '../add';

describe('Function add()', () => {
    it('should return 5 when adding 2 and 3', () => {
        const result = add(2, 3);
        assert.equal(result, 5);
    });

    // ... more test cases ...
});</code>

這比較了預期結果和實際結果。 測試失敗表示存在問題。 徹底的測試確保程式碼修改不會破壞現有功能。

檢定 DOM 互動

要測試 DOM 操作（例如，按一下事件），請安裝 jsdom 和 jsdom-global:

<code class="language-json">"devDependencies": {
    "@types/node": "^22.9.0",
    "jsdom": "^25.0.1",
    "jsdom-global": "^3.0.2",
}</code>

配置這些套件：

<code class="language-javascript">require("jsdom-global")();

global.DOMParser = window.DOMParser;</code>

這允許 Node.js 模擬瀏覽器的 DOM 環境。

測試非同步操作

對於非同步函數（例如 API 呼叫），請使用 nock 和 node-fetch:

<code class="language-json">"devDependencies": {
    "nock": "^13.5.6",
    "node-fetch": "^2.7.0",
}</code>

配置這些套件：

<code class="language-javascript">import fetch from "node-fetch";

global.fetch = fetch as any;</code>

nock 模擬 API 回應，提供可預測且穩定的測試環境。 node-fetch 為 Node.js 提供類似瀏覽器的 fetch 實作。

Codecov 整合

要與 Codecov 集成，請建立 GitHub 儲存庫並按照 Codecov 的設定說明進行操作。 GitHub Actions 可以自動上傳報告。 GitHub Actions 工作流程範例：

<code class="language-json">  "devDependencies": {
    "@types/mocha": "^10.0.9",
    "@types/sinon": "^17.0.3",
    "c8": "^10.1.2",
    "mocha": "^10.8.2",
    "sinon": "^19.0.2"
  }</code>

此工作流程針對每個推送或拉取請求執行測試並將覆蓋率報告上傳至 Codecov。 然後可以將 Codecov 徽章添加到您的自述文件中。

結論

透過遵循這些步驟並根據您的特定需求進行調整，您可以實現並保持 100% 的測試覆蓋率，從而提高程式碼品質和可靠性。 請記住將重複的測試程式碼重構為可重複使用的函數，以獲得更好的可維護性。

以上是如何獲得程式碼覆蓋率百分比？ ✅的詳細內容。更多資訊請關注PHP中文網其他相關文章！