Ava 使用承诺测试图像加载:测试返回的承诺从未解决
Ava testing image-loading with promise: promise returned by test never resolved
我想测试我的 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';
});
}
当我在浏览器中使用我的承诺时,它工作正常:
imagePromise().then((result) => console.log(result));
// fulfill the promise and log the result: true
但是,当我使用 ava and browser-env 测试我的承诺时,ava returns 出现错误:
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。有什么我想念的吗?
将图像创建从 imagePromise
移至 ImageClass
怎么样?之后你将控制承诺解决/拒绝
import test from "ava";
import { EventEmitter } from "events";
function imagePromise(img) {
return new Promise((resolve, reject) => {
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 => {
class ImageClass extends EventEmitter {
addEventListener(type, fn) {
this.on(type, fn);
}
}
const image = new ImageClass();
process.nextTick(() => image.emit("load"));
return imagePromise(image).then(result => {
t.is(result, true);
});
});
我终于修复了我的测试,使用 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
我的第二个错误是忘记在 test/helpers/setup-browser-env.js
文件中的 browser-env
测试声明中放置特殊配置:
require('browser-env')(['window', 'document', 'Image'], {
resources: 'usable',
});
然后我们可以 运行 我们的 image-loading 承诺测试,来自 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
标志进行调试(有点像live-reload 供您测试)。
我想测试我的 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';
});
}
当我在浏览器中使用我的承诺时,它工作正常:
imagePromise().then((result) => console.log(result));
// fulfill the promise and log the result: true
但是,当我使用 ava and browser-env 测试我的承诺时,ava returns 出现错误:
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。有什么我想念的吗?
将图像创建从 imagePromise
移至 ImageClass
怎么样?之后你将控制承诺解决/拒绝
import test from "ava";
import { EventEmitter } from "events";
function imagePromise(img) {
return new Promise((resolve, reject) => {
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 => {
class ImageClass extends EventEmitter {
addEventListener(type, fn) {
this.on(type, fn);
}
}
const image = new ImageClass();
process.nextTick(() => image.emit("load"));
return imagePromise(image).then(result => {
t.is(result, true);
});
});
我终于修复了我的测试,使用 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
我的第二个错误是忘记在 test/helpers/setup-browser-env.js
文件中的 browser-env
测试声明中放置特殊配置:
require('browser-env')(['window', 'document', 'Image'], {
resources: 'usable',
});
然后我们可以 运行 我们的 image-loading 承诺测试,来自 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
标志进行调试(有点像live-reload 供您测试)。