¿Qué sucede cuando ejecutamos nuestras pruebas?
Cada vez que ejecutamos nuestras pruebas, se ejecutan en un entorno Node.js. No hay ningún navegador como Chrome o Firefox involucrado. Si renderizamos nuestro componente llamando a esa función de renderizado, una biblioteca llamada jsdom crea un entorno de navegador falso.
Después de renderizar nuestro componente, podemos acceder a los elementos que se han colocado o renderizado aquí usando este objeto ‘screen’.
Nosotros importamos ese objeto ‘screen’ de la biblioteca React Testing.
// Manipulate the component or find an element in it
const inputs = screen.getAllByRole('textbox');
const button = screen.getByRole('button');
Es extremadamente habitual en casi todas las pruebas que escribimos renderizar un componente, y luego, intentaremos encontrar algunos elementos que sean producidos por el componente. Una parte muy importante de las pruebas es encontrar los elementos que ha creado nuestro componente.
React Testing Library Query System
Las Query functions serán utilizadas para encontrar elementos que son producidos por el renderizado de componentes. Pero, pueden ser un poco tediosas de usar a veces.
Hay una colección de aproximadamente de 48 funciones que se utilizan para encontrar elementos, pero no es necesario que las memorices.
ARIA ROLES
En el código que se muestra arriba, puede ver que usamos las funciones getAllByRole y getByRole, la palabra rol se refiere a algo llamado ARIA Role.
En la web developer.mozilla.org puedes obtener toda la información necesaria para entender su funcionamiento y objetivo. Podemos destacar un par de puntos.
- Los Arial Roles aclaran el propósito de un elemento HTML.
- Utilizado tradicionalmente por los lectores de pantalla (software para ayudar a las personas a comprender el contenido de la pantalla).
- Muchos elementos HTML tienen un rol ‘implícito’ o asignado automáticamente.
- A los elementos se les puede asignar manualmente un rol (a veces, las personas más experimentadas lo hacen incorrectamente).
Como no somos ingenieros experimentados en esta materia, no vamos a hacer asignaciones manuales con demasiada frecuencia. Realmente vamos a depender del rol implícito de los diferentes elementos.
El sistema de roles es la forma principal o preferida de encontrar elementos que han sido representados por nuestros componentes. React Testing Library, realmente nos empuja en esta dirección (si no deseas usar roles , hay muchas otras formas en que podemos encontrar elementos que el componente haya renderizado).
React Testing Library: ayuda con las funciones de búsqueda (queries)
Estamos renderizando nuestro componente, pero ahora necesitamos averiguar cómo podemos saber el número de filas que se han renderizado. Las funciones de consulta nos permiten encontrar elementos que han sido renderizados por nuestro componente.
Es posible que simplemente no sepas cómo escribir una función de consulta para encontrar todas estas filas diferentes. Afortunadamente, hay una buena herramienta. Podemos usar un pequeño truco para ayudarnos a entender cómo encontrar elementos en concreto.
screen.logTestingPlaygroundURL()
Para la depuración mediante testing-playground, el objeto ‘screen’ expone este práctico método que registra y devuelve una URL que se puede abrir en un navegador.
Este método toma el HTML actualmente renderizado por el componente y crea un enlace para ver ese HTML en la herramienta ‘Testing Playground’. Esta herramienta te ayuda a escribir consultas (funciones para encontrar elementos).
Una imagen vale más que mil palabras, puedes ver cómo funciona en el video en la parte superior de esta página.
Dejar un comentario
¿Quieres unirte a la conversación?Siéntete libre de contribuir!