¿Cómo se prueba la inexistencia de un elemento usando jest y react-testing-library?
Tengo una biblioteca de componentes para la que estoy escribiendo pruebas unitarias para usar Jest y reaccionar-testing-library. Según ciertos accesorios o eventos, quiero verificar que ciertos elementos no se estén representando.
getByText, getByTestIdetc. arrojan un error si react-testing-libraryno se encuentra el elemento, lo que provoca que la prueba falle antes de que expectse active la función.
¿Cómo se prueba algo que no existe en broma usando reaccionar-testing-library?
De los documentos de la biblioteca de pruebas DOM: aparición y desaparición
Los elementos afirmativos no están presentes.
Los métodos estándar
getByarrojan un error cuando no pueden encontrar un elemento, por lo que si desea afirmar que un elemento no está presente en el DOM, puede usarqueryByAPI en su lugar:const submitButton = screen.queryByText('submit') expect(submitButton).toBeNull() // it doesn't existLa
queryAllversión de las API devuelve una serie de nodos coincidentes. La longitud de la matriz puede ser útil para afirmaciones después de agregar o eliminar elementos del DOM.const submitButtons = screen.queryAllByText('submit') expect(submitButtons).toHaveLength(2) // expect 2 elements
not.toBeInTheDocumentLa
jest-dombiblioteca de utilidades proporciona el.toBeInTheDocument()comparador, que se puede utilizar para afirmar que un elemento está o no en el cuerpo del documento. Esto puede ser más significativo que afirmar el resultado de una consultanull.import '@testing-library/jest-dom/extend-expect' // use `queryBy` to avoid throwing an error with `getBy` const submitButton = screen.queryByText('submit') expect(submitButton).not.toBeInTheDocument()
Usar queryBy/ queryAllBy.
Como usted dice, getBy*y getAllBy*arroja un error si no se encuentra nada.
Sin embargo, los métodos equivalentes queryBy*y queryAllBy*en su lugar devuelven nullo []:
consultaPor
queryBy*Las consultas devuelven el primer nodo coincidente para una consulta y regresannullsi ningún elemento coincide. Esto es útil para afirmar un elemento que no está presente. Esto se activa si se encuentra más de una coincidencia (use queryAllBy en su lugar).Las consultas queryAllBy
queryAllBy*devuelven una matriz de todos los nodos coincidentes para una consulta y devuelven una matriz vacía ([]) si ningún elemento coincide.
https://testing-library.com/docs/dom-testing-library/api-queries#queryby
Entonces, para las dos consultas específicas que mencionaste, usarías queryByTexty queryByTestId, pero funcionan para todas las consultas, no solo para esas dos.
Espero que esto sea útil.
esta tabla muestra por qué/cuándo errores de función
qué funciones son asincrónicas
¿Qué es la declaración de retorno para la función?
