[编辑]:我已经用 Promise 方式更改了我的代码。
我正在写反应this由facebook创建的starter,我是测试方面的新手。
现在我有一个关于图像的组件,它有一个检查图像大小的功能:
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
});
运行测试后,我收到此错误:
类型错误:无法读取未定义的属性“toBe”
问题是:
- 如何以正确的方式测试`loadIng?
- 测试 checkSize 的一般模式是什么?
谢谢。
目前的实施checkSize
是异步的并且总是返回undefined
.
你应该使用callback或返回一个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);
});
});
本文内容由网友自发贡献,版权归原作者所有,本站不承担相应法律责任。如您发现有涉嫌抄袭侵权的内容,请联系:hwhale#tublm.com(使用前将#替换为@)