lundi 1 février 2021

Why does a jest test not recognise a findByAltText?

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

it('opup is opened when user clicks icon', async () => {
  Api.get.mockResolvedValueOnce(Form);
  popupActions.showPopup = jest.fn(() => () => {});
  const { findByAltText } = renderWithRedux(
    <Input />,
    initialState
  );
  const iconButton = await findByAltText('action-icon');
  fireEvent.click(iconButton);

In my html this is the tag of the icon, which has the correct alt value, as you can see below

<div class="" style="position: relative; height: 80px;">
   <svg class="MuiSvgIcon-root" focusable="false" viewBox="0 0 24 24" aria-hidden="true" alt="action-icon" style="position: absolute; right: 0px; top: 26px; z-index: 10; user-select: none; cursor: pointer;">
     <g stroke="none" stroke-width="1" fill="none" fill-rule="evenodd">
        <polygon points="0 0 24 0 24 24 0 24">
        </polygon>
          <path d="M11,7 L13,7 L13,9 L11,9 L11,7 Z M11,11 L13,11 L13,17 L11,17 L11,11 Z M12,2 C6.48,2 2,6.48 2,12 C2,17.52 6.48,22 12,22 C17.52,22 22,17.52 22,12 C22,6.48 17.52,2 12,2 Z M12,20 C7.59,20 4,16.41 4,12 C4,7.59 7.59,4 12,4 C16.41,4 20,7.59 20,12 C20,16.41 16.41,20 12,20 Z" fill="#404040" fill-rule="nonzero">
          </path>
     </g>
    </svg>
    <div class="MuiFormControl-root MuiFormControl-fullWidth">
      

But in console when running the jest tests, I get the following error message

" Unable to find an element with the alt text: action-icon"

and the construction of the html showing the part corresponding to the icon with the correct information as follows

<div
   class=""
   style="position: relative; height: 80px;"
>
   <svg
      alt="action-icon"
      aria-hidden="true"
      class="MuiSvgIcon-root"
      focusable="false"
      style="position: absolute; right: 0px; top: 26px; z-index: 10; cursor: pointer;"
      viewBox="0 0 24 24"
     >
       <g
         fill="none"
         fill-rule="evenodd"
         stroke="none"
         stroke-width="1"
       >
 

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.

Aucun commentaire:

Enregistrer un commentaire