如何使用 Jest 测试 asnyc 代码(或使用 jsdom 测试“image.onload") [英] How to test asnyc code with Jest ( or test "image.onload" with jsdom )
本文介绍了如何使用 Jest 测试 asnyc 代码(或使用 jsdom 测试“image.onload")的处理方法,对大家解决问题具有一定的参考价值,需要的朋友们下面随着小编来一起学习吧!
问题描述
:我已经用承诺方式更改了我的代码.
: I have change my code with promise way .
我正在写与 this 由 facebook 创建的 starter 的反应,我是测试新手.
I am writing react with this starter created by facebook, and I'm a newbie about testing.
现在我有一个关于图像的组件,它有一个检查图像大小的功能:
Now I have a component about image, it has a function to check Image size:
import React, { Component } from 'react';
class ImagePart extends Component {
.....
// check size.
checkSize(src, width, height){
this.loadImg(src)
.then((obj) => {
return (obj.width >= width && obj.height >= height)
? true : false;
})
.catch((msg)=> {
dosomething
});
}
// load image and return a promise.
loadImg(src){
return new Promise((resolve, reject) => {
let imageObj = new Image();
imageObj.onload = (evt) => {
resolve(evt.target);
}
imageObj.error = (err) =>{
reject(err);
}
imageObj.src = src;
})
}
.....
}
和测试片段:
import React from 'react';
import ReactDOM from 'react-dom';
import ImagePart from './ImagePart';
it('checking image size without error', () => {
const image = new ImagePart();
const img300_300 = 'https://someImage.png';
expect(image.loadImg(img300_300).width).resolves.toBe(300);
// ??? test checkSize
});
运行测试后,我收到此错误:
After Running the test, I got this error :
TypeError: 无法读取未定义的属性 'toBe'
TypeError: Cannot read property 'toBe' of undefined
问题是:
- 如何以正确的方式测试 `loadImg?
- 测试 checkSize 的一般模式是什么?
谢谢.
推荐答案
checkSize
的当前实现是异步的,总是返回 undefined
.
The current implementation of checkSize
is asynchronous and always returns undefined
.
You should either use a callback or return a Promise
.
function checkSizeWithCallback(src, width, height, callback) {
const image = new Image();
image.onload = evt => {
const result = evt.target.width >= width && evt.target.height >= height;
callback(null, result);
};
image.onerror = // TODO: handle onerror
image.src = src;
}
it('...', done => {
checkSizeWithCallback(/* args */, (err, result) => {
expect(result).toEqual(true);
done(err);
});
});
<小时>
function checkSizeWithPromise(src, width, height) {
return new Promise((resolve, reject) => {
const image = new Image();
image.onload = evt => {
const result = evt.target.width >= width && evt.target.height >= height;
resolve(result);
};
image.onerror = // TODO: handle onerror
imageObj.src = src;
});
}
it('...', () => {
return checkSizeWithPromise(/* args */)
.then(result => {
expect(result).toEqual(true);
});
});
这篇关于如何使用 Jest 测试 asnyc 代码(或使用 jsdom 测试“image.onload")的文章就介绍到这了,希望我们推荐的答案对大家有所帮助,也希望大家多多支持IT屋!
查看全文