Chrome 擴充功能單元測試

單元測試可讓小部分的程式碼與擴充功能的其他部分及瀏覽器之外隔離。舉例來說，您可以編寫單元測試，確保輔助方法正確將值寫入儲存空間。

編寫不使用擴充功能 API 的程式碼可以使用 Jest 等架構，照常進行測試。為了讓程式碼更容易測試，建議使用依附元件插入等技巧，這有助於移除低階實作中 Chrome 命名空間的依附元件。

如果需要測試包含擴充功能 API 的程式碼，請考慮使用模擬。

範例：搭配使用模擬和 Jest

建立 jest.config.js 檔案，宣告在所有測試之前執行的設定檔：

jest.config.js:

module.exports = {
  setupFiles: ['<rootDir>/mock-extension-apis.js']
};

在 mock-extension-apis.js 中，為您預期呼叫的特定函式新增實作：

mock-extension-apis.js:

global.chrome = {
  tabs: {
    query: async () => { throw new Error("Unimplemented.") };
  }
};

接著，使用 jest.spy 模擬測試中的傳回值：

test("getActiveTabId returns active tab ID", async () => {
  jest.spyOn(chrome.tabs, "query").mockResolvedValue([{
    id: 3,
    active: true,
    currentWindow: true
  }]);
  expect(await getActiveTabId()).toBe(3);
});

後續步驟

為確保擴充功能正常運作，建議您加入端對端測試。如需完整的教學課程，請參閱使用 Puppeteer 測試 Chrome 擴充功能。