extension-test

用途

Extension Testing 用于为 Chrome 浏览器扩展搭建并运行单元测试、集成测试与端到端测试，帮助开发者在扩展开发过程中验证逻辑、服务交互以及真实浏览器环境下的行为。

测试分层架构

方案将测试划分为三层：

单元测试（Jest）：测试孤立逻辑，并对 chrome.* API 进行 mock。
集成测试（Jest）：测试服务之间的交互与消息传递。
E2E 测试（Puppeteer）：在真实 Chrome 中加载扩展并进行测试。

关键约束

资料明确指出：扩展不能在无头模式下运行。E2E 测试需要设置 headless: false，或使用 Chrome 的 --headless=new（Chrome 112+）。

第一层：单元测试与集成测试（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 });

资料提及更完整的 mock 配置参见 chrome-api-mocks.md，单元与集成测试模式参见 unit-integration-testing.md。

第二层：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 Mock 策略

API	方式
chrome.storage	使用内存存储进行 mock
chrome.runtime.sendMessage	jest.fn() 加 mock 响应
chrome.tabs	jest.fn() 配合 createMockTab 辅助函数
chrome.action	jest.fn() 桩函数
chrome.alarms	jest.fn() 桩函数

全部 mock 方式参见 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 模式、mock、组件测试
e2e-testing-puppeteer.md：Puppeteer 设置、popup/content/SW 测试
chrome-api-mocks.md：完整的 chrome.* mock 模板

适用场景

适用于需要为 Chrome 扩展建立自动化测试体系的开发场景，尤其是希望同时覆盖纯逻辑层、服务通信层以及真实浏览器端行为的项目。

限制

资料未提供除上述内容之外的功能、收费、价格、平台或效果信息。