时间戳

首页 > 解决方案 > 如何在 Puppeteer with Jest 中使用 page.evaluate 中的导入函数？

typescript - 如何在 Puppeteer with Jest 中使用 page.evaluate 中的导入函数？

问题描述

我有一个使用 Jest 进行单元测试的 TypeScript 项目，并且刚刚将 Puppeteer 添加到混合中，目的是在客户端上运行一些测试。它工作正常，除非我尝试在page.evaluate.

例如，我有以下内容HdpiCanvas.test.ts：

import { createHdpiCanvas } from "./HdpiCanvas";

test("createHdpiCanvas", async () => {
    await page.setViewport({ width: 800, height: 600, deviceScaleFactor: 2 });
    let size = await page.evaluate(() => {
        const canvas = createHdpiCanvas(); // document.createElement('canvas');
        return [canvas.width, canvas.height];
    });
    console.log(size); // [600, 300] for HDPI canvas and [ 300, 150 ] for a regular one
});

注释掉后document.createElement('canvas')，测试运行良好并记录了[ 300, 150 ]。但是函数createHdpiCanvas()会抛出以下错误page.evaluate：

Error: Evaluation failed: ReferenceError: HdpiCanvas_1 is not defined
    at __puppeteer_evaluation_script__:2:24

实际createHdpiCanvas内部HdpiCanvas.ts定义如下：

export function createHdpiCanvas(width = 300, height = 150): HTMLCanvasElement {
    const canvas = document.createElement('canvas');
    canvas.width = width;
    canvas.height = height;
    applyHdpiOverrides(canvas);
    return canvas;
}

并且本身依赖于 中定义的其他函数HdpiCanvas.ts，例如applyHdpiOverrides.

标签： typescriptimportmodulejestjspuppeteer

解决方案

你可以在调用evaluate函数之前这样做：

await page.exposeFunction("applyHdpiOverrides",applyHdpiOverrides);
await page.exposeFunction("createHdpiCanvas",createHdpiCanvas);

现在您的窗口将识别这些功能

推荐阅读