Hace un par de días que estoy luchando con una prueba que estoy tratando de escribir y pensé que este sería un buen lugar para pedir algunos consejos. Estoy tratando de completar un formulario que usa menús desplegables react-select , y estos formularios están dentro de un mapa que representa 4 de ellos. Sin embargo, al intentar ejecutar el código a continuación en los selectores de cada formulario en un bucle, después de la primera iteración que funciona bien, el elemento de entrada que se encuentra en el formulario para realizar onChange no tiene el controlador onChange y no activa el cambie la función para seleccionar la opción que necesito. El paquete que estoy usando para la selección es react-select-event según la documentación aquí . Todavía soy un principiante con react-testing-library y las pruebas en general, por lo que es muy probable que me haya perdido algo. ¡Cualquier consejo o idea es bienvenida! gracias 🙂
const selectOptionAndAssertValue = async (indicator, field, element, option, inputForm) => { await selectEvent.select(element, option.label, { container: document.body, }); await waitFor( async () => { expect(inputForm).toHaveFormValues({ [${indicator.short_alias}-${field}]: option.value, }); }, { onTimeout: error => console.log(error), } ); };Nota: para encontrar el formulario de entrada, estoy usando findByLabelText y encuentra el elemento.
EDITAR: Problema replicado en este repositorio https://github.com/ildaballiu/select-testing-demo
El problema se resolvió cambiando el contenedor a
container: () => document.body.querySelector('[class$=-menu]')