我的问题是我正在尝试对一个函数进行单元测试,但不知道如何测试它的一部分。
这是一个 React / Redux 操作,执行以下操作:
1) 使用图像 url 检索 json 数据
2) 将图像加载到 Image 实例中并将其大小分派给减速器(当使用 Image.onload 加载图像时异步)
3) 将获取已完成的信息分派给reducer
图像加载是异步发生的,因此当我尝试对其进行单元测试时,它不会被调用。此外,我不能只是模拟事物,因为图像实例是在函数内创建的......
这是我想要测试的代码(删除一些检查、分支逻辑等):
export function fetchInsuranceCardPhoto() {
return dispatch => {
dispatch(requestingInsuranceCardPhoto());
return fetch(`${api}`,
{
headers: {},
credentials: 'same-origin',
method: 'GET',
})
.then(response => {
switch (response.status) {
case 200:
return response.json()
.then(json => {
dispatch(receivedInsuranceCardPhoto(json));
})
}
});
};
}
function receivedInsuranceCardPhoto(json) {
return dispatch => {
const insuranceCardFrontImg = json.insuranceCardData.url_front;
const insuranceCardBackImg = json.insuranceCardData.url_back;
if (insuranceCardFrontImg) {
dispatch(storeImageSize(insuranceCardFrontImg, 'insuranceCardFront'));
}
return dispatch(receivedInsuranceCardPhotoSuccess(json));
};
}
function receivedInsuranceCardPhotoSuccess(json) {
const insuranceCardFrontImg = json.insuranceCardData.url_front;
const insuranceCardBackImg = json.insuranceCardData.url_back;
const insuranceCardId = json.insuranceCardData.id;
return {
type: RECEIVED_INSURANCE_CARD_PHOTO,
insuranceCardFrontImg,
insuranceCardBackImg,
insuranceCardId,
};
}
function storeImageSize(imgSrc, side) {
return dispatch => {
const img = new Image();
img.src = imgSrc;
img.onload = () => {
return dispatch({
type: STORE_CARD_IMAGE_SIZE,
side,
width: img.naturalWidth,
height: img.naturalHeight,
});
};
};
}
注意最后一个storeImageSize
私有函数如何创建 Image 实例并将 image.onload 分配给函数。
现在这是我的测试:
it('triggers RECEIVED_INSURANCE_CARD_PHOTO when 200 returned without data', async () => {
givenAPICallSucceedsWithData();
await store.dispatch(fetchInsuranceCardPhoto());
expectActionsToHaveBeenTriggered(
REQUESTING_INSURANCE_CARD_PHOTO,
RECEIVED_INSURANCE_CARD_PHOTO,
STORE_CARD_IMAGE_SIZE,
);
});
但该测试将会失败,因为测试在image.onload
回调被调用。
我怎样才能强制image.onload
调用回调以便我可以测试“STORE_CARD_IMAGE_SIZE”操作是否被广播?