javascript - Ava 使用 Promise : promise returned by test never resolved 测试图像加载

Question

我想测试我的 promise 函数来加载图像，代码如下所示:

function imagePromise() {
  return new Promise((resolve, reject) => {
    const img = new Image();
    img.addEventListener('load', () => resolve(true));
    img.addEventListener('error', () => reject(false));
    img.src = 'http://78.media.tumblr.com/tumblr_lr9mx5Axur1qlyuwso1_1280.jpg';
  });
}

当我在浏览器中使用我的 promise 时，它工作正常:

imagePromise().then((result) => console.log(result));
// fulfill the promise and log the result: true

但是，当我使用 ava 测试我的 promise 时和 browser-env ，ava返回错误:

Promise returned by test never resolved

我的测试文件如下所示:

import test from 'ava';

function imagePromise() {
  return new Promise((resolve, reject) => {
    const img = new Image();
    img.addEventListener('load', () => resolve(true));
    img.addEventListener('error', () => reject(false));
    img.src = 'http://78.media.tumblr.com/tumblr_lr9mx5Axur1qlyuwso1_1280.jpg';
  });
}

test('load image with promise', (t) => {
  return imagePromise().then((result) => {
    t.is(result, true);
  });
});

请注意，由于浏览器兼容性问题，我都尝试了 addEventListener 和 onload/onerror 方法，并且 browser-env 已 configured to work with ava 。我有什么遗漏的吗？

Answer 1

我终于修复了我的测试，使用 browser-env (它本身使用 jsdom )。我做了一个small repo for people interested :

我的第一个错误是我忘记安装 canvas-prebuilt ，这允许 jsdom操纵images和canvas元素。

// install browser-env and canvas-prebuilt
// (https://github.com/jsdom/jsdom#loading-subresources)
yarn add browser-env canvas-prebuilt -D

我的第二个错误是我忘记在 browser-env 上放置特殊配置测试声明，在test/helpers/setup-browser-env.js中文件:

require('browser-env')(['window', 'document', 'Image'], {
  resources: 'usable',
});

然后我们可以运行我们的图像加载 promise 测试，从 test/test.js :

import test from 'ava';

function imagePromise() {
  return new Promise((resolve, reject) => {
    const img = new Image();
    img.addEventListener('load', () => resolve(true));
    img.addEventListener('error', () => reject(false));
    // an heavy 4k wallpaper to check if promise is resolved after a long time
    img.src = 'https://www.wallpaperup.com/wallpaper/download/991808/8000/5224';
  });
}

test('load image with promise', (t) => {
  return imagePromise().then((result) => {
    t.is(result, true);
  });
});

要运行测试，您可以执行 ava但我强烈建议添加 --verbose标记，因为它有助于使用 --watch 进行调试标志(一种用于测试的实时重新加载)。