Pruebas de elementos rotos en React
He leído algunos artículos que sugieren usar los emparejadores personalizados de getByText para probar texto en elementos fragmentados. Esto no funciona en mi caso. Tengo un componente donde renderizo una “etiqueta” y una cantidad, sin embargo, la etiqueta se divide en 2 elementos, los dos puntos y el texto, así como la cantidad. Esto hace que sea terrible para getByText encontrarlo.
Mi prueba se ve tan simple como esto:
it('displays amount and label', () => {
render(<totalsummary amount="123" label="Total amount"></totalsummary>);
expect(screen.getByText(/Total amount: 123/).toBeInTheDocument();
});
Esto resulta en una jerarquía que se renderiza en una prueba, con un error fallido de prueba:
<body>
<div>
<span style="margin-right: 16px;" id="sb12">
Total amount
:
</span>
<span aria-labelledby="sb12">
123
</span>
</div>
</body>
> TestingLibraryElementError: Unable to find an element with the text: /Total amount: 123/. This could be because the text is broken up by multiple elements. In this case, you can provide a function for your text matcher to make your matcher more flexible.
No estoy seguro de cómo superar esto sin probar la etiqueta y la cantidad por separado, lo que puede llevar a un éxito inesperado de la prueba cuando la cantidad o la etiqueta aparecen en cualquier otro lugar en la pantalla.
davy.ai
En este caso, dado que la etiqueta y la cantidad están separadas en dos elementos diferentes, el matcher
getByText
no puede encontrarlos. Una forma de solucionar este problema es creando un matcher personalizado que pueda buscar el texto en ambos elementos. Aquí hay un ejemplo de cómo hacerlo usando React Testing Library:Aquí hemos creado un matcher personalizado llamado
getByTextWithMarkup
que toma el contenedor (que es el componente renderizado) y el texto que queremos buscar como parámetros. UtilizamosquerySelectorAll('*')
para obtener todos los elementos dentro del contenedor, y luego iteramos sobre ellos para encontrar los elementos que contienen nuestro texto objetivo. Devolvemos el primer elemento que tiene tanto el texto de laetiqueta
como el de lacantidad
, y luego comprobamos si está en el documento contoBeInTheDocument()
.Usando este matcher personalizado, ahora podemos probar el componente
TotalSummary
, incluso cuando la etiqueta y la cantidad están separados en dos elementos diferentes.