javascript - byRole is not returning the DOM element - Stack Overflow

admin管理员组

文章数量:1430407

I am migrating some of my unit test cases which were previously written using Jest and Enzyme to React Testing Library. I am using Material UI's Select ponent and I know that, in order to open the dropdown, we have to trigger the mouseDown event on the corresponding div. Here is how I did it in Enzyme (working):

wrapper.find('[role="button"]').simulate('mousedown', { button: 0 });

I am trying to achieve the same using React Testing Library in the following manner, which is not working:

const { container, getAllByRole, getByRole } = renderComponent(mockProps);
fireEvent.mouseDown(getByRole('button')); // trigger the mouseDown on div having role=button

After this I am trying to access the listbox element which is ul element:

getByRole('listbox')

which throws an error and says:

TestingLibraryElementError: Unable to find an accessible element with the role "listbox"

There are no accessible roles. But there might be some inaccessible roles. If you wish to access them, then set the `hidden` option to `true`. Learn more about this here: 

I have verified and the ul element is visible (neither it nor its parent have display none or visibility hidden)

UPDATE - 1

I have tried all the following approach to wait for element to appear in DOM:

• waitFor
• findByRole instead of getByRole

in both the case it throws error that Unable to find role="listbox"

What is wrong?

I am migrating some of my unit test cases which were previously written using Jest and Enzyme to React Testing Library. I am using Material UI's Select ponent and I know that, in order to open the dropdown, we have to trigger the mouseDown event on the corresponding div. Here is how I did it in Enzyme (working):

wrapper.find('[role="button"]').simulate('mousedown', { button: 0 });

I am trying to achieve the same using React Testing Library in the following manner, which is not working:

const { container, getAllByRole, getByRole } = renderComponent(mockProps);
fireEvent.mouseDown(getByRole('button')); // trigger the mouseDown on div having role=button

After this I am trying to access the listbox element which is ul element:

getByRole('listbox')

which throws an error and says:

TestingLibraryElementError: Unable to find an accessible element with the role "listbox"

There are no accessible roles. But there might be some inaccessible roles. If you wish to access them, then set the `hidden` option to `true`. Learn more about this here: https://testing-library./docs/dom-testing-library/api-queries#byrole

I have verified and the ul element is visible (neither it nor its parent have display none or visibility hidden)

UPDATE - 1

I have tried all the following approach to wait for element to appear in DOM:

• waitFor
• findByRole instead of getByRole

in both the case it throws error that Unable to find role="listbox"

What is wrong?

• javascript
• reactjs
• material-ui
• react-testing-library

Share Improve this question Follow edited Feb 21, 2022 at 15:29 Aman asked Feb 21, 2022 at 13:59 AmanAman 5,7541010 gold badges5656 silver badges9292 bronze badges 4

• getByRole('listbox') The role of the element is listbox? – Kapobajza Commented Feb 21, 2022 at 14:10
• @Kapobajza Yes. Its the ul element which has the role="listbox" – Aman Commented Feb 21, 2022 at 14:11
• Okay, I thought maybe that it was a typo. What you could try is to use await findByRole('listbox'), because when you trigger an event which is supposed to show/hide an element you have to wait for that element to show up in your DOM. But I am not entirely sure if findByRole will work – Kapobajza Commented Feb 21, 2022 at 14:14
• Yup, I tried that as well, but no luck. I will update the question with more example. – Aman Commented Feb 21, 2022 at 14:15

Add a ment  | 

3 Answers 3

Sorted by: Reset to default 2

If the element is not accessible at the first render this error could appear, you can try passing the option hidden to the options key in the second argument of the getByRole, if this not works you can try using findByRole, that method wait for the element, and if you want to be sure of the visibility of the element you can try adding a waitFor inside of the test.

getByRole('listbox', { options: { hidden: true } });

I found the root cause of this issue. I am using the Select ponent from MUI in disablePortal mode, which make the menu list to be rendered inside the parent ponent instead of document body. But while MUI does that, it doesn't remove the aria-hidden attribute from the parent ponent's div, and because of that testing library is not able to locate the listbox (ul) element inside.

There is an issue reported here: https://github./mui/material-ui/issues/19450

So as a work around, I passed the data-testid to the menu ponent (MenuListProps) and using it to get the listbox.

Make sure animations are not promising your results. If the animations change opacity or display and they did not finish before assertion from jest... it is likely to throw an error.

本文标签： javascriptbyRole is not returning the DOM elementStack Overflow