求助：如何为Jest/Puppeteer开发的Chrome扩展E2E测试生成覆盖率报告

核心问题分析 #

你当前使用jest-puppeteer-istanbul但未搭配jest-puppeteer预设，且用ts-jest作为Jest预设，导致覆盖率收集逻辑无法适配Chrome扩展的隔离上下文，进而无法生成报告。jest-puppeteer-istanbul默认依赖jest-puppeteer提供的全局browser对象及页面钩子，直接用ts-jest会跳过这些关键逻辑。

具体修复步骤 #

1. 补充依赖安装 #

安装代码插桩所需的Babel插件：

yarn add -D babel-plugin-istanbul

2. 配置Babel代码插桩 #

在项目根目录创建/修改babel.config.js，仅在测试环境为代码添加覆盖率插桩：

module.exports = {
  presets: ['react-app', '@babel/preset-typescript'],
  env: {
    test: {
      plugins: ['istanbul']
    }
  }
};

注：如果项目用create-react-app生成，需确保BABEL_ENV=test时加载该配置。

3. 调整Jest配置 #

移除原配置中依赖jest-puppeteer的部分，手动配置覆盖率收集逻辑：

// package.json中的jest配置
{
  "jest": {
    "preset": "ts-jest",
    "testTimeout": 90000,
    "moduleDirectories": ["node_modules", "src"],
    "collectCoverage": true,
    "collectCoverageFrom": ["src/pages/**/*.{ts,tsx,js,jsx}"], // 明确文件后缀避免匹配错误
    "coverageDirectory": "coverage",
    "coverageReporters": ["html", "text-summary"] // 指定报告输出格式
  }
}

4. 手动在测试中收集覆盖率 #

由于Chrome扩展页面处于隔离的chrome-extension://上下文，需手动在测试脚本中注入覆盖率收集逻辑：

// e2e-tests/example.test.ts
import puppeteer from 'puppeteer';
import path from 'path';

describe('Chrome Extension E2E', () => {
  let browser: puppeteer.Browser;
  let extensionPage: puppeteer.Page;
  const extensionBuildPath = path.resolve(__dirname, '../build');

  beforeAll(async () => {
    // 启动Chrome并加载本地扩展
    browser = await puppeteer.launch({
      args: [
        `--disable-extensions-except=${extensionBuildPath}`,
        `--load-extension=${extensionBuildPath}`
      ],
      headless: false // 调试时设为false，生产环境改为true
    });

    // 自动获取扩展页面（无需硬编码扩展ID）
    const pages = await browser.pages();
    extensionPage = pages.find(p => p.url().startsWith('chrome-extension://')) 
      || await browser.newPage();

    // 注入覆盖率收集钩子
    await extensionPage.evaluate(() => {
      // 页面卸载时保存覆盖率数据
      window.addEventListener('beforeunload', () => {
        if (window.__coverage__) {
          (window as any).__coverage__ = window.__coverage__;
        }
      });
    });
  });

  afterAll(async () => {
    // 收集最终覆盖率数据并传给Jest全局对象
    const coverageData = await extensionPage.evaluate(() => window.__coverage__);
    if (coverageData) {
      (global as any).__coverage__ = coverageData;
    }
    await browser.close();
  });

  test('扩展弹出页面加载正常', async () => {
    // 替换为你的扩展页面路径
    await extensionPage.goto('chrome-extension://abc123456789/popup.html');
    // 执行测试逻辑
    const title = await extensionPage.title();
    expect(title).toBe('My Extension');
  });
});

5. 验证运行 #

执行测试命令：

yarn test:e2e

运行完成后，coverage目录下会生成HTML格式的覆盖率报告。

关键注意事项 #

• 确保扩展构建时已启用测试环境的Babel配置，可通过BABEL_ENV=test yarn build强制指定环境。
• collectCoverageFrom路径需严格匹配实际源码文件，避免遗漏或错误匹配。
• 开发环境下Chrome扩展ID可能变化，测试中通过Puppeteer自动获取页面可避免硬编码问题。

内容的提问来源于stack exchange，提问作者Himanshu singh