用 Jest 测试 Promise答案

【问题标题】：Testing Promises in Jest用 Jest 测试 Promise
【发布时间】：2020-04-21 10:22:18
【问题描述】：

我目前正在尝试在代码库中测试一些 Promise 繁重的功能。这个 sn-p 还具有事件侦听器的额外乐趣。

我将如何进行测试？

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;

【问题讨论】：

这能回答你的问题吗？ Best Way to Test Promises in Jest

标签： reactjs promise jestjs tdd

【解决方案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);
  });
});

【讨论】：

感谢您的回复！所以我对此有一些问题。首先，instanceOfpart 存在问题，无法识别。即使我使用result.toBeInstanceOf(Error)。另一个问题是我得到：Timeout - Async callback was not invoked within the 5000ms timeout specified by jest.setTimeout. 每当我使用 async/await 时。有什么想法吗？

【解决方案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

【讨论】：