Question

我目前正在尝试在代码库中测试一些Promise重功能。此代码段还具有事件监听器的额外乐趣。

我将如何进行测试？

const createImage = url =>
  new Promise((resolve, reject) => {
    const image = new Image();
    image.addEventListener("load", () => resolve(image));
    image.addEventListener("error", error => reject(error));
    image.setAttribute("crossOrigin", "anonymous"); // needed to avoid cross-origin issues on CodeSandbox
    image.src = url;
  });

export default createImage;

Answer 1

您可以执行以下操作。这将检查已解决的Promise是否不是错误，是否已成功创建。

describe('Create Image', () => {
  it('Creates Image.', async () => {
    const result = await createImage('some image url here');
    const isError = result instaceOf Error;
    expect(isError).toEqual(false);
  });
});

Answer 2

我通过Reddit找到了解决此问题的方法，这是那些有兴趣的人的答案：

这与测试Promises无关，而与测试图像加载操作有关。 Jest使用JSDOm，我们可以研究其对HTMLImage的实现。不幸的是，没有代码可以触发诸如加载或错误之类的事件。

因此，我们无法模拟请求（例如使用Nock对特定的URL响应500）并验证Promise是否被拒绝（这是最好的）。相反，我们必须依靠实现细节并注入Image.prototype：

let onLoadFn, onErrorFn;
Image.prototype.addEventListener = jest.fn((type, fn) => { 
  if (type === 'load') onLoadFn = fn;
  if (type === 'error') onErrorFn = fn;
});

，以后也可以

const result = yourFunction('someurl');
onLoadFn();
return expect(result).resolves.toEqual(expect.any(Image));

或

const result = yourFunction('someurl');
onErrorFn("test");
return expect(result).rejects.toEqual("test");
Also it looks like a known thing in JSDOm that events are not dispatched at least for load/error

用笑话测试承诺

2 个答案: