如何使用单个Puppeteer浏览器实例运行全部Jest测试文件

针对你提出的两个核心问题，以下是具体实现方案：

一、跨测试文件共享浏览器实例 #

Node.js不支持异步导出，但可以借助Jest的全局生命周期钩子实现：

1. 创建全局配置文件
   新建jest-puppeteer-setup.js，用于统一管理浏览器的启动与销毁：

const puppeteer = require('puppeteer');

module.exports = {
  globalSetup: async () => {
    // 启动浏览器并挂载到全局对象
    global.browser = await puppeteer.launch({ headless: false });
  },
  globalTeardown: async () => {
    // 所有测试完成后关闭浏览器
    await global.browser.close();
  },
  testEnvironment: 'node'
};

2. 配置Jest加载全局钩子
   修改jest.config.js，引入上述全局配置：

module.exports = {
  // 保留原有配置
  preset: './jest-puppeteer-setup.js'
};

3. 在测试文件中复用实例
   每个测试文件直接从全局对象获取浏览器，创建新标签页执行测试：

describe('用户登录测试', () => {
  let page;

  beforeAll(async () => {
    // 每个测试套件创建独立标签页
    page = await global.browser.newPage();
  });

  afterAll(async () => {
    // 测试套件结束后关闭当前标签页
    await page.close();
  });

  test('验证登录流程', async () => {
    await page.goto('/login');
    // 编写具体测试逻辑
  });
});

二、自动关闭浏览器及失败处理 #

• 自动关闭浏览器：通过globalTeardown钩子，Jest会在所有测试（无论成功/失败）执行完毕后自动触发该函数，无需手动判断最后一个测试。
• 测试失败处理：可在测试文件的afterEach钩子中检测测试状态，执行自定义操作：

afterEach(async () => {
  const testState = expect.getState();
  if (testState.failedTests.length > testState.numPassedTests) {
    // 测试失败时截图留存
    await page.screenshot({ path: `failed-${Date.now()}.png` });
  }
});

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