Question 230498 in Reactjs Question posted in
The new location for the React Documentation can be found here.

Reactjs – Asserting an images currentSrc with react testing library

I have a react component that uses the picture element. I would like test the image URL with a variety of viewports. On the actual implementation I can use the attribute "currentSrc" to retrieve the current image. However, when I assert "element.currentSrc" the value is always "". I assume this is because the image is not loaded therefore currentSrc has not been set. What is the approach to get the "currentSrc". Here is the picture element enter image description here

enter image description here

Tags:

2

Answers


  1. Chosen as BEST ANSWER
    0

    The thread below explains why we cannot get the currentSrc. My mental map of how the library works was incorrect.

    enter image description here


  2. 0

    I think you need to add alt in the image tag. Then find the src with accessing alt. The code is like this :

    it('uses correct src', async () => {
const { getByTestId } = await render(<HeroImage {...mockHeroImage} />);

const image = getByAltText('the_alt_text');
expect(image.src).toContain('https://via.placeholder.com/653x325.jpg');

    });

    Login or Signup to reply.
Please signup or login to give your own answer.

Back To Top
Search