如何使用 Jest 模拟远程网站对单元测试 Puppeteer 代码的响应？

Question

我正在为一个网站实现一个网络抓取脚本，它将收集一些有用的信息。

脚本是使用 Puppeteer 库实现的，基本上是一组指令，例如：

1. 启动无头 Chrome
2. 打开新选项卡/页面
3. 从 HTML 获取一些分页链接
4. 打开找到的每个分页链接并从 HTML 中抓取一些信息

我正在寻找某种方法来测试此功能。理想情况下，我想要做的是将真实的 HTML 响应“预保存”在测试文件夹中，然后模拟外部网站响应（确保它们始终相同）。然后断言收集到的信息是正确的。

我熟悉几种能够在浏览器中模拟

fetch

函数端点的工具。我正在寻找类似的东西，但是

Puppeteer

。

到目前为止，我正在考虑的唯一解决方案是使用

browser

实例作为我的脚本的依赖项。然后模拟浏览器的

newPage

方法返回带有自定义拦截器的页面。但这看起来工作量很大。

还有其他解决方案吗？

Answer 1

一个简单的解决方案是将要测试的 HTML 页面（或其中的一部分）存储在本地并在 Puppeteer 中打开。可以在 Puppeteer 中打开本地 HTML 网站。然后可以在 Mocha 或 Jest 等 Javascript 测试框架中测试结果。

如果您需要一个真正的 Web 服务器来进行测试，另一种选择是使用像 Express 这样的库来提供本地 HTML 页面作为 Web 服务器响应的模拟。您可以在这个搜索引擎抓取器中找到一个示例，其中包含抓取各种搜索引擎的测试。

还可以模拟和存根 Puppeteer 函数，例如

launch

、

goto

和

$eval

。这种方法需要很多存根方法。

Answer 2

这是我目前正在玩的东西。

我通过设置

setRequestInterception

:

来实现此功能

it('responds', () => {
  return (async () => {
    const browser = await puppeteer.launch();
    const page = await browser.newPage();

    await page.setRequestInterception(true);

    page.on('request', request => {
      // TODO: match request.url()

      request.respond({
        content: 'application/json',
        headers: {"Access-Control-Allow-Origin": "*"},
        body: JSON.stringify({foo: 'bar'})
      })
    });

    res = await page.goto('https://example.com');
    json = await res.json()
    await browser.close();

    expect(json).toStrictEqual({"foo": "bar"})
  })();
})

这看起来也是一个有用的工具：https://github.com/jefflau/jest-fetch-mock。也许匹配请求等会很方便

另请参阅：使用 Puppeteer 在页面上拦截 XHR 请求并返回模拟响应的最佳方式

Answer 3

这个问题迟到了，但几年前我已经为此发表了

mock-puppeteer-goto

。它也适用于 Playwright。

https://www.npmjs.com/package/mock-puppeteer-goto