Hice un pequeño repositorio para demostrar mi problema: https://github.com/msawatzky75/user-event-input-test
Tengo algunos escenarios diferentes aquí:
cada uno de estos activa una solicitud de recuperación que es manejada por msw . También configuré 2 entornos DOM diferentes para ejecutar estas pruebas en: jsdom y happy-dom .
solo fallan las pruebas que interactúan con los elementos de entrada (casilla de verificación y la entrada de texto) y los resultados son consistentes en todos los entornos DOM.
Cuál es el problema aquí? ¿Es un error con @testing-library/user-event ? si no, ¿cómo se podría arreglar esto?
El problema aquí es cómo se representa el componente. Más específicamente, cómo se adjunta al cuerpo del documento.
el render original es el siguiente:
const root = document.createElement("div"); const { queryByText, getByTestId, debug } = render(BaseApp, { container: root, attachTo: document.body, }); la propiedad attachTo parece comportarse mal, pero se resuelve haciendo esto en su lugar:
const root = document.createElement("div"); document.body.appendChild(root); const { queryByText, getByTestId } = render(BaseApp, { container: root, });esto eleva el número de pruebas aprobadas en este ejemplo de 4/8 a 7/8, y solo falla la prueba de la casilla de verificación happy-dom.