admin管理员组文章数量:1336645
[Edited] : I have change my code with promise way .
I am writing react with this starter created by facebook, and I'm a newbie about testing.
Now I have a ponent 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;
})
}
.....
}
And test snippet:
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 = '';
expect(image.loadImg(img300_300).width).resolves.toBe(300);
// ??? test checkSize
});
After Running the test, I got this error :
TypeError: Cannot read property 'toBe' of undefined
The question is:
- How can I test `loadImg in right way ?
- what's the general pattern to test checkSize ?
thank you.
[Edited] : I have change my code with promise way .
I am writing react with this starter created by facebook, and I'm a newbie about testing.
Now I have a ponent 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;
})
}
.....
}
And test snippet:
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: Cannot read property 'toBe' of undefined
The question is:
- How can I test `loadImg in right way ?
- what's the general pattern to test checkSize ?
thank you.
Share Improve this question edited Apr 6, 2017 at 18:30 AppleJam asked Apr 6, 2017 at 9:36 AppleJamAppleJam 1,0398 silver badges18 bronze badges2 Answers
Reset to default 4The 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);
});
});
You should be able to use the done
call back when testing async code.
https://facebook.github.io/jest/docs/asynchronous.html
In your case i would do
it('checking image size without error', (done) => {
const image = new ImagePart();
const img300_300 = 'https://someImage.png';
expect(image.checkSize(img300_300,200,200)).toEqual(true);
expect(image.checkSize(img300_300,300,300)).toEqual(true);
expect(image.checkSize(img300_300,300,200)).toEqual(false);
expect(image.checkSize(img300_300,200,300)).toEqual(false);
expect(image.checkSize(img300_300,400,400)).toEqual(false);
done();
});
本文标签: javascriptHow to test asnyc code with Jest ( or test quotimageonloadquot with jsdom )Stack Overflow
版权声明:本文标题:javascript - How to test asnyc code with Jest ( or test "image.onload" with jsdom ) - Stack Overflow 内容由网友自发贡献,该文观点仅代表作者本人, 转载请联系作者并注明出处:http://www.betaflare.com/web/1742260236a2442376.html, 本站仅提供信息存储空间服务,不拥有所有权,不承担相关法律责任。如发现本站有涉嫌抄袭侵权/违法违规的内容,一经查实,本站将立刻删除。
发表评论