2

[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.

homerThinking
  • 785
  • 3
  • 11
  • 28
  • 1
    svg elements don't have an alt attribute, see e.g. https://stackoverflow.com/q/22823770/3001761 – jonrsharpe Feb 01 '21 at 08:47
  • @jonrsharpe Thank you so much! I see, But in the documentation I only see the possibility to pick up an svg with jest through a title. Is this the only way? – homerThinking Feb 01 '21 at 11:01

2 Answers2

2

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);
homerThinking
  • 785
  • 3
  • 11
  • 28
0

In the beginning, you can add a roll as an image role="img"

<svg
            {...restProps}
            ref={forwardedRef}
            xmlns="http://www.w3.org/2000/svg"
            fill="none"
            viewBox="0 0 150 24"
            role="img"
        >

Then it can be accessed via getByRole

describe('BrandLogo', () => {
test('should render correctly and with a specific variant', () => {
    render(<BrandLogo brand="AVIV" />);
    expect(screen.getByRole('img')).toBeInTheDocument();
});
Ahmed Alqassass
  • 1