Javascript 使用Jest测试img标记onload事件

我想使用document.createElement（'img'）来创建img标记。给它一个src并用jest测试onload或onerror事件

我正在为我的sdk编写一些组件，我不能使用任何框架，我必须确保它可以在IE7中使用。所以我使用document.createElement来创建我需要的所有类型的组件。然后编写单元测试以确保它能够正常工作。 但我不知道测试img标记是否合适，因为它需要获取src数据，而且jest似乎不支持它

接口组件支柱{
类名？：字符串
onClick？：（e？：事件，el？：HTMLElement）=>void
样式？：{}
}
键入HTMLComponent=Element | string | HTMLElement | DocumentFragment
类型FunctionComponent=（）=>HTMLComponent
键入Children=HTMLComponent[]| HTMLComponent | FunctionComponent | FunctionComponent[]|（HTMLComponent | FunctionComponent）[]
函数createComponent（类型：字符串，props:ComponentProps，children？：children）{
const current=document.createElement（类型）
props.className&（current.className=props.className）
props.style&&$.style（当前，props.style）
props.onClick&&$.addEventListener（当前，'click'，（e）=>props.onClick（e，当前））
函数包装器文本（str:string）{
返回文档.createTextNode（str）
}
函数渲染（节点：子节点）{
if（Object.prototype.toString.call（node）！=='[Object Array]'）{
node=[任何节点]
}
foreach（节点作为子节点[]，节点=>{
如果（节点类型==='string'）{
当前.appendChild（包装器文本（节点））
}else if（节点类型==='function'）{
渲染（节点（））
}否则{
current.appendChild（作为HtmleElement的节点）
}
})
}
if（儿童）{
渲染（儿童）
}
回流
}
ImgProps类型=组件和{
src:string，
onLoad？：（e？：事件，el？：HTMLElement）=>void
onError？：（e:事件）=>无效
}
常量img=（props:ImgProps）：HTMLElement=>{
const img=createComponent（'img'，props）作为HTMLImageElement
img.src=props.src；
props.onLoad&$.addEventListener（img，'load'，（e）=>props.onLoad（e，img））
props.onError&$.addEventListener（img，'error'，（e）=>props.onError（e））
将img作为HTMLElement返回
}
constdiv=（props:ComponentProps，children:children）=>createComponent（'div'，props，children）
导出默认函数Img（样式：AnyObject，配置：ImgConfig，handlers？：MessageEventHandlers）：延迟{
如果（！config.src）{
返回延迟。解决（无）；
}
返回新的延迟（（解决、拒绝）=>{
img({
src:config.src，
类名：''u gio_c_img'，
风格：风格，
负载：（u2;，电流）=>{
//即自动给图片加上宽度和高度属性的修复
current.removeAttribute（'宽度'）
current.removeAttribute（'高度'）
解析（选项生成（当前））
},
onError：（e）=>{
拒绝（e）
},
onClick:Option.build（config.target）.flatMap（=>Option.build（u.href））.map（href=>{
返回重定向单击（href，（）=>{
handlers&&handlers.onClickTargetAndExplosePermanently（）；
})
}).getOrElse（未定义）
})
})
}

我的单元测试代码如下所示

it（'Render With error Src'，async（）=>{
返回Img（{}{
src:'https://ss0.bdstatic.com/70cFvHSh_Q1YnxGkpoWK1HF6hhy/it/u=2854956166，1658664264&fm=26&gp=0.jpg'，
目标：{}
})。然后（img=>{
expect（img.isEmpty（））.toBe（true）
})
})

然后，Jest发生如下错误

超时-在指定的5000ms超时内未调用异步回调 jest.setTimeout.Error：

---

为什么要在代码中测试javascript函数？无论哪种方式，异步jest测试都会收到一个

done

回调，并需要在完成后调用

done（）

。因为Img是另一个组件子组件，我想确保该组件正常工作。给它正确或错误的配置，看看它是否可以呈现。看看这个问题：