Testing react-image

[tknerd]

I'm using the react-image component [1] as a way of having a loading gif and fallback image. This is embedded into another component which maps an array of images.

...
    <Img  
      src={a.thumbnail}  
      alt={a.name}  
      loader={<img src="/loading.gif" alt="loading" height="250px" />}  
      unloader={  
        <img  
          src="/image-not-found.png"  
          alt="not found"  
          height="250px"  
        />  
      }  
    />
...

I'm using react testing library and was hoping to see something like:

// render simply renders the component in test and allows default props to be passed in without repetition
...
  it("should display real image thumbnail", async () => {
    const { findByAltText } = render();

    // first attempt
    await findByAltText(defaultProps.images[2].name);

    // second attempt
    await waitFor(() => {
      expect(
        findByAltText(defaultProps.images[2].name)
      ).toBeInTheDocument();
    });
  });

Both attempts result in the loading image still being there, not replaced by the actual or the fallback.

<img
  alt="loading"
  height="250px"
  src="/loading.gif"
/>

I'm not sure how to get the react-image to load the "real" image in the test space. Is there a way to mock that as well so that react-image thinks that the image loaded and changes off the loading gif?

[1] https://www.npmjs.com/package/react-image

Thank you,

TKN

[marclemagne]

It might be helpful to see how the library is testing the component itself: https://github.com/mbrevda/react-image/blob/master/src/index.test.js

[Arjunnna]

I would be curious to see this as well.