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