How to find an svg in a jest test?

Question

[SECOND UPDATE] I was looking for a svg for properties that it doesn't recognise and I have corrected my mistake thanks to a user comment , but how could I look for my svg for a jest test?

I have implemented in my react application a jest test that should detect an icon that has the function to open a popup.

it('popup is opened when icon is clicked', async () => {
  Api.get.mockResolvedValueOnce(form);
  popupActions.showPopup = jest.fn(() => () => {});
  const { findByRole } = renderWithRedux(
    <CardInput translate={(text) => text} />,
    initialState
  );
  const iconWrapper = await findByRole('info');


  fireEvent.click(??);
  await wait(() =>
    expect(popupActions.showPopup).toHaveBeenCalledWith(
      expect.objectContaining({
        message: {
          text: 'message_front',
        },
      })
    )
  );
});

here I get to retrieve the div that wraps the svg, but I don't know how to put retrieve the svg, which would be the child component of the "iconwrapper".

<div role="info">
   <svg class="root" style="position: absolute; cursor: pointer;">
     <g stroke="none" stroke-width="1" fill="none">
        <polygon points="0 0 24 0 24 24 0 24">
        </polygon>
          <path d="M11,7 L13,7 L13,9 L11,9 L11,7 Z" fill="#404040" fill-rule="nonzero">
          </path>
     </g>
    </svg>
   
      

Can anyone with this information tell me if I am doing something wrong? I am not able to see my mistake. Best regards and thank you all for your time and help in advance.

Answer 1

In the end I solved it by wrapping the svg in a div to which I declare a role attribute. Then I used the findByRole method and the firstchild method to get the svg

const iconWrapper = await findByRole('info');
fireEvent.click(iconWrapper.firstChild);