0
192
VistasbyRole no devuelve el elemento DOM
Estoy migrando algunos de mis casos de prueba de unidad que se escribieron previamente usando Jest y Enzyme to React Testing Library. Estoy usando el componente Select de Material UI y sé que, para abrir el menú desplegable, tenemos que activar el evento mouseDown en el div correspondiente. Así es como lo hice en Enzyme (trabajando):
wrapper.find('[role="button"]').simulate('mousedown', { button: 0 });Estoy tratando de lograr lo mismo usando React Testing Library de la siguiente manera, que no funciona:
const { container, getAllByRole, getByRole } = renderComponent(mockProps); fireEvent.mouseDown(getByRole('button')); // trigger the mouseDown on div having role=button Después de esto, estoy tratando de acceder al elemento del listbox de lista que es el elemento ul :
getByRole('listbox')que arroja un error y dice:
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 Lo he verificado y el elemento ul está visible (ni él ni su elemento principal no muestran nada ni tienen visibilidad oculta)
ACTUALIZAR - 1
He intentado todos los siguientes enfoques para esperar a que aparezca el elemento en DOM:
-
waitFor -
findByRoleen lugar degetByRole
en ambos casos, arroja un error que Unable to find role="listbox"
¿Qué está mal?
3 Respuestas
Responde la pregunta0
Si el elemento no es accesible en el primer renderizado, podría aparecer este error, puede intentar pasar la opción oculta a la clave de opciones en el segundo argumento de getByRole, si esto no funciona, puede intentar usar findByRole, ese método espera el elemento , y si desea estar seguro de la visibilidad del elemento, puede intentar agregar un waitFor dentro de la prueba.
getByRole('listbox', { options: { hidden: true } });0
Asegúrese de que las animaciones no comprometan sus resultados. Si las animaciones cambian de opacidad o visualización y no terminaron antes de la afirmación de broma... es probable que arroje un error.
0
Encontré la causa raíz de este problema. Estoy usando el componente Select de MUI en modo disablePortal , lo que hace que la lista del menú se represente dentro del componente principal en lugar del cuerpo del documento. Pero mientras MUI hace eso, no elimina el atributo aria-hidden del div del componente principal y, debido a esa biblioteca de prueba, no puede ubicar el elemento del listbox de lista (ul) en el interior.
Hay un problema informado aquí: https://github.com/mui/material-ui/issues/19450
Entonces, como solución alternativa, pasé el data-testid al componente del menu ( MenuListProps ) y lo usé para obtener el listbox de lista.