Javascript 反应-如何在2021年测试图像加载或onerror

我正在使用react测试库进行测试，我有一个图像组件，它在整个项目中共享accross。我正在尝试使用默认CRA构建和

jsdom

测试组件。事实证明，这有点难以实现，我检查了一些资源

我将jest（26.6.0）和jsdom（16.6.0）更新为最新版本。我还尝试了

canvas

jest canvas mock

lib

这是我的示例代码，我也上传到这里

Image.js

从“react”导入{useState}；
导出默认函数映像（{src=”“}）{
常量[状态，设置状态]=使用状态（“加载”）
const handleOnLoad=（）=>{
设置状态（“手动负载”）；
};
常量handleOnError=（）=>{
设置状态（“handleOnError”）；
};
返回(
{状态}
);
}

Image.test.js

从“@testing library/react”导入{render，screen}”；
导入“@测试库/jest dom/extend expect”；
导入“jest画布模拟”；
从“/Image”导入图像；
描述（'测试'，（）=>{
它（“图像应正确呈现”，异步（）=>{
render（）；
wait screen.findByText（/handleOnLoad/i）；
});
})

最后，

jsdom

无法执行on事件。基于此,

浏览器配置为不加载图像时不会触发加载事件。jsdom默认配置为不加载任何外部资源，因此在这方面它遵循浏览器。这使图像与其他未加载的资源（如视频、音频、链接rel=preload等）保持一致

这里已经满了