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