Tengo una biblioteca de componentes para la que estoy escribiendo pruebas unitarias para usar Jest y react-testing-library. En función de ciertos accesorios o eventos, quiero verificar que ciertos elementos no se representen.
getByText , getByTestId , etc. genera un error en react-testing-library si no se encuentra el elemento, lo que hace que la prueba falle antes de que se active la función de expect .
¿Cómo prueba algo que no existe en broma usando la biblioteca de pruebas de reacción?
De DOM Testing-library Docs - Aparición y desaparición
Los elementos de afirmación no están presentes
Los métodos
getByestándar arrojan un error cuando no pueden encontrar un elemento, por lo que si desea afirmar que un elemento no está presente en el DOM, puede usar las APIqueryByen su lugar:const submitButton = screen.queryByText('submit') expect(submitButton).toBeNull() // it doesn't existLa versión de
queryAllAPI devuelve una matriz de nodos coincidentes. La longitud de la matriz puede ser útil para las aserciones después de agregar o eliminar elementos del DOM.const submitButtons = screen.queryAllByText('submit') expect(submitButtons).toHaveLength(2) // expect 2 elements
not.toBeInTheDocumentLa biblioteca de utilidades
jest-domproporciona el.toBeInTheDocument(), que se puede usar para afirmar que un elemento está en el cuerpo del documento o no. Esto puede ser más significativo que afirmar que el resultado de una consulta esnull.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()
Utilice queryBy / queryAllBy .
Como dices, getBy* y getAllBy* arrojan un error si no se encuentra nada.
Sin embargo, los métodos equivalentes queryBy* y queryAllBy* devuelven null o [] :
consulta por
Las consultas
queryBy*devuelven el primer nodo coincidente para una consulta y devuelven unnullsi no coincide ningún elemento. Esto es útil para afirmar un elemento que no está presente. Esto arroja si se encuentra más de una coincidencia (use queryAllBy en su lugar).queryAllBy
queryAllBy*consultas 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 los dos específicos que mencionó, en su lugar usaría queryByText y queryByTestId , pero estos funcionan para todas las consultas, no solo para esos dos.
getBy* arroja un error cuando no encuentra un elemento, por lo que puede verificarlo
expect(() => getByText('your text')).toThrow('Unable to find an element');