extension-test

拡張機能のテスト

🚀 Premium にアップグレード Premium バージョンは https://app.extensionbooster.net/dashboard/services/extension-ai-kit から入手できます。

テストレイヤーのアーキテクチャ

Unit Tests (Jest)          → Test isolated logic, chrome.* API mocks
Integration Tests (Jest)   → Test service interactions, message passing
E2E Tests (Puppeteer)      → Test in real Chrome with extension loaded

重要な制約：拡張機能はヘッドレスモードでは実行できません。E2E テストには headless: false または Chrome の --headless=new（Chrome 112 以降）が必要です。

---

レイヤー 1：ユニットテスト＋インテグレーションテスト（Jest）

インストール

npm install -D jest @types/jest ts-jest jest-chrome
# For React popup:
npm install -D @testing-library/react @testing-library/jest-dom jsdom

jest.config.ts

export default {
  preset: "ts-jest",
  testEnvironment: "jsdom",
  setupFilesAfterEnv: ["./jest.setup.ts"],
  moduleNameMapper: {
    "^@/(.*)$": "<rootDir>/src/$1",
  },
};

jest.setup.ts（最小構成）

import chrome from "jest-chrome";
Object.assign(global, { chrome });

モックの完全なセットアップ → chrome-api-mocks.md ユニットテスト／インテグレーションテストのパターン → unit-integration-testing.md

---

レイヤー 2：E2E（Puppeteer）

インストール

npm install -D puppeteer

Chrome で拡張機能を起動する

import puppeteer from "puppeteer";
import path from "path";

const browser = await puppeteer.launch({
  headless: false, // extensions require non-headless
  args: [
    `--disable-extensions-except=${path.resolve("dist")}`,
    `--load-extension=${path.resolve("dist")}`,
  ],
});

拡張機能 ID を取得する

const targets = await browser.targets();
const extTarget = targets.find((t) => t.type() === "service_worker");
const extUrl = extTarget?.url() ?? "";
const [, , extId] = extUrl.split("/");

E2E テストのパターン全般 → e2e-testing-puppeteer.md

---

Chrome API のモック戦略

API	方法
chrome.storage	メモリ内ストアでモックする
chrome.runtime.sendMessage	jest.fn() ＋ モックレスポンス
chrome.tabs	createMockTab ヘルパーを使った jest.fn()
chrome.action	jest.fn() のスタブ
chrome.alarms	jest.fn() のスタブ

すべてのモック → chrome-api-mocks.md

---

package.json のスクリプト

{
  "scripts": {
    "test:unit": "jest --testPathPattern=unit",
    "test:integration": "jest --testPathPattern=integration",
    "test:e2e": "jest --testPathPattern=e2e --runInBand",
    "test": "npm run test:unit && npm run test:integration"
  }
}

E2E テストは個別に実行してください（--runInBand）。Puppeteer のテストは直列で実行する必要があります。

---

参考ファイル

• unit-integration-testing.md — Jest のパターン、モック、コンポーネントテスト
• e2e-testing-puppeteer.md — Puppeteer のセットアップ、ポップアップ／コンテンツ／SW のテスト
• chrome-api-mocks.md — chrome.* のモックテンプレート一式