[英]byRole is not returning the DOM element
I am migrating some of my unit test cases which were previously written using Jest and Enzyme to React Testing Library.我正在将我以前使用 Jest 和 Enzyme 编写的一些单元测试用例迁移到 React 测试库。 I am using Material UI's
Select
component and I know that, in order to open the dropdown, we have to trigger the mouseDown
event on the corresponding div
.我正在使用 Material UI 的
Select
组件并且我知道,为了打开下拉菜单,我们必须在相应的div
上触发mouseDown
事件。 Here is how I did it in Enzyme (working):这是我在 Enzyme 中的做法(有效):
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:我试图通过以下方式使用 React 测试库实现相同的效果,但它不起作用:
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:在此之后,我试图访问
ul
元素的listbox
元素:
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.com/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)我已经验证并且
ul
元素可见(它和它的父元素都没有显示或隐藏可见性)
UPDATE - 1更新 - 1
I have tried all the following approach to wait for element to appear in DOM:我已经尝试了以下所有方法来等待元素出现在 DOM 中:
waitFor
findByRole
instead of getByRole
findByRole
而不是getByRole
in both the case it throws error that Unable to find role="listbox"
在这两种情况下,它都会抛出错误
Unable to find role="listbox"
What is wrong?怎么了?
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 的第二个参数中的选项键,如果这不起作用,您可以尝试使用 findByRole,该方法等待元素, 如果你想确定元素的可见性,你可以尝试在测试中添加一个 waitFor 。
getByRole('listbox', { options: { hidden: true } });
Make sure animations are not compromising 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.
如果动画改变不透明度或显示并且它们在 jest 断言之前没有完成......它可能会抛出错误。
I found the root cause of this issue.我找到了这个问题的根本原因。 I am using the
Select
component from MUI in disablePortal
mode, which make the menu list to be rendered inside the parent component instead of document body.我在
disablePortal
模式下使用 MUI 的Select
组件,这使得菜单列表在父组件而不是文档主体内呈现。 But while MUI does that, it doesn't remove the aria-hidden
attribute from the parent component's div
, and because of that testing library is not able to locate the listbox
(ul) element inside.但是当 MUI 这样做时,它不会从父组件的
div
中删除aria-hidden
属性,并且由于该测试库无法在其中找到listbox
(ul) 元素。
There is an issue reported here: https://github.com/mui/material-ui/issues/19450这里报告了一个问题: https://github.com/mui/material-ui/issues/19450
So as a work around, I passed the data-testid
to the menu
component ( MenuListProps
) and using it to get the listbox
.因此,作为变通方法,我将
data-testid
传递给menu
组件 ( MenuListProps
) 并使用它来获取listbox
。
声明:本站的技术帖子网页,遵循CC BY-SA 4.0协议,如果您需要转载,请注明本站网址或者原文地址。任何问题请咨询:yoyou2525@163.com.