使用jest-puppeteer时expect-puppeteer不支持CDPPage对象的问题

核心原因 #

jest-puppeteer预设已经自动将expect-puppeteer的断言方法集成到全局expect对象中，手动单独导入expectPuppeteer并直接传入page对象会导致类型不匹配，触发错误。

修复步骤 #

1. 移除手动导入的expectPuppeteer
   删除测试代码中的这一行：

import expectPuppeteer from 'expect-puppeteer'

2. 修改断言写法
   将原来的：

await expectPuppeteer(page).toMatchElement('img', {})

替换为：

await expect(page).toMatchElement('img', {})

验证配置 #

你的jest.config.js配置是正确的，preset: "jest-puppeteer"会自动处理puppeteer环境的初始化，包括提供全局的page对象，以及增强全局expect的断言方法。

修复后的完整测试代码 #

describe("(context)", () => {
  beforeEach(async () => {
    await page.goto(process.env.URL, { waitUntil: 'domcontentloaded' });
  });

  it('should be titled "Google"', async () => {
    await expect(page.title()).resolves.toMatch('Google');
  });

  it('should have an img', async () => {
    await expect(page).toMatchElement('img', {})
  });
})

这样修改后，就能正常使用expect-puppeteer的断言方法，不会再触发类型错误。

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