mcpField
E
extension-test

extension-test

github.com/quangpl测试与质量64212 次安装7 周前更新
代码仓库

关于 extension-test

面向 Chrome 扩展开发者的测试技能，说明如何用 Jest 和 Puppeteer 构建单元、集成及端到端测试。内容涵盖 Chrome API 模拟，并指出扩展端到端测试的运行限制。

主要功能

  1. 01规划单元、集成和端到端测试
  2. 02使用 Jest 测试逻辑与服务交互
  3. 03用 Puppeteer 在 Chrome 中测试
  4. 04模拟常用 chrome.* API
  5. 05提供测试配置与脚本示例

适用场景

  1. 01测试扩展中的独立逻辑
  2. 02验证消息传递和服务交互
  3. 03在 Chrome 中检查扩展界面与行为

安装

复制下面的命令，在终端中运行。

$npx skills add https://github.com/quangpl/browser-extension-skills --skill extension-test

安装后在 Claude Code 中输入/extension-test确认已加载。

包含的文件

除 SKILL.md 外，安装时一起下载的参考资料和脚本。

references/
chrome-api-mocks.md
e2e-testing-puppeteer.md
unit-integration-testing.md

详细介绍

扩展测试

🚀 升级到 Premium 在 https://app.extensionbooster.net/dashboard/services/extension-ai-kit 获取 Premium 版本

测试分层架构

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

关键限制：扩展无法在无头模式下运行。端到端测试需要设置 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 });

完整 Mock 配置 → chrome-api-mocks.md 单元测试/集成测试模式 → unit-integration-testing.md

第 2 层：端到端测试（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-testing-puppeteer.md

Chrome API 模拟策略

API方式
chrome.storage使用内存存储进行模拟
chrome.runtime.sendMessagejest.fn() + 模拟响应
chrome.tabs使用 createMockTab 辅助函数和 jest.fn()
chrome.actionjest.fn() 存根
chrome.alarmsjest.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"
  }
}

单独运行端到端测试（--runInBand）——Puppeteer 测试必须串行运行。

参考文件

评论

支持 Markdown