React unit test image on load - reactjs

Question

I am using this "async image" component but I have problems in unit tests, for the "load" success section with the image
import { useEffect, useState } from 'react'
const AsyncImage = (props) => {
const [loadedSrc, setLoadedSrc] = useState(null)
useEffect(() => {
setLoadedSrc(null)
if (props.src) {
const handleLoad = () => {
setLoadedSrc(props.src)
}
const image = new Image()
image.addEventListener('load', handleLoad)
image.src = props.src
return () => {
image.removeEventListener('load', handleLoad)
}
}
}, [props.src])
if (loadedSrc === props.src) {
return (
<img {...props} />
)
}
return null
}
export default AsyncImage
Unit test:
global.Image = class {
constructor() {
this.onload = jest.fn();
this.addEventListener = jest.fn()
this.removeEventListener = jest.fn()
setTimeout(() => {
this.onload();
}, 50);
}
};
test("render AsyncImage", async () => {
const logo = LOAD_SUCCESS_SRC
let container
await act(async () => {
container = render(
<Router>
<Provider store={store}>
<AsyncImage
src={logo}
alt="test.png"
className='img-fluid img-catalogCards'
/>
</Provider>
</Router>
)
})
})
At the beginning of the unit test add the image class, it enters the setTimeout but still does not enter the handleLoad function
How do I get to the handleLoad function when loading the image so that it enters the return section of the image?