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 拡張機能のテストをご覧ください。