Jest / Enzyme wait for the element to have a specific attribute - reactjs

Question

I'm creating a weather app with React and testing it with enzyme, on each page reload and on the initial page load the background image is supposed to change/load
App.js
function App() {
const [background, setBackground] = useState('');
async function fetchBgImage() {
// getRandomImage returns a link fetched from the api
setBackground(await getRandomImage());
}
useEffect(() => {
fetchBgImage(); //a method which sets the background image and sets background to image url
}, []);
return (
<div className="App">
// Here backgound is just an image url
<img id="background_image" src={background} alt="background image" />
</div>
);
}
In the real world the app works fine and the background image load properly and changes on each page reload, but when I'm testing with enzyme, it doesn't wait for the backgound property to be set and, consequently, the src property is empty.
App.test.js
beforeEach(() => {
// I read that useEffect doesnt work with shallow rendering
// https://github.com/airbnb/enzyme/issues/2086
jest.spyOn(React, 'useEffect').mockImplementation((f) => f());
});
it('displays background image', () => {
const wrapper = shallow(<App />);
const image = wrapper.find('#background_image');
// src prop is empty
console.log(image.props());
});
So how do I make enzyme wait for the src property of the image to be set?

Answer 1

You could write a helper function to wait for the attribute. Something like:
function waitForAttribute(el, attribute) {
return new Promise((resolve, reject) => {
const tryInterval = 100; // try every 100ms
let maxTries = 10; //try 10 times
let currentTry = 0;
const timer = setInterval(() => {
if (currentTry >= maxTries) {
clearInterval(timer);
return reject(new Error(`${attribute} not found on ${el.debug()}`));
}
const prop = el.props()[attribute]
if (prop) {
clearInterval(timer);
resolve(el);
}
currentTry++
}, tryInterval);
});
}
it('displays background image', async () => {
const wrapper = shallow(<App />);
const image = wrapper.find('#background_image');
const srcValue = await waitForAttribute(image, 'src')
// ...do something with it
});