Question

我正在尝试使用Jest测试将dataUrl加载到图像中。我正在使用JSDOM，并按照说明添加resources: "usable"作为选项。

如果我直接从Node运行代码，则该代码有效，但是当我尝试在Jest中运行它时，永远不会调用图像onLoad处理程序，因此测试永远不会完成。

const jsdom = require("jsdom");
const { JSDOM } = jsdom;

const dom = new JSDOM(`<!DOCTYPE html><p>Hello world</p>`, {
    resources: "usable",
});

global.window = dom.window;
global.document = dom.window.document;
global.navigator = global.window.navigator;

const dataUrlToImage = async (dataUrl) => {
    return new Promise(((resolve, reject) => {
        const img = document.createElement('img');
        img.crossOrigin = 'Anonymous';

        img.onload = function() { // Never called
            console.info('On load called'); 
            resolve(img);
        };

        img.src = dataUrl;
    }));
}

it('tests image loading', async () => {
    const r = await dataUrlToImage('data:image/png;base64,iVBORw0KGgoAAAANSUhEUgAAAAUAAAAFCAYAAACNbyblAAAAHElEQVQI12P4//8/w38GIAXDIBKE0DHxgljNBAAO9TXL0Y4OHwAAAABJRU5ErkJggg==');
    expect(!!r).toBe(true); // This is never called
});

任何想法可能是什么问题？

Answer 1

Jest依赖于仅适用于canvas @ 1的jsdom的旧版本。您现在从npm获得的jsdom版本仅适用于canvas @ 2。

所以我假设您缺少npm install canvas@1或npm install canvas-prebuilt@1。

请注意：jest内置了jsdom，而不是需要自己的版本，而应该在testEnvironmentOptions: { resources: "usable" }中添加jest.config.js，然后删除所有jsdom样板。

从未在Jest中调用过图像onLoad处理程序

1 个答案: