Qué es React Testing Library y cómo funciona con Jest
Gabriel Jiménez | Hace alrededor de 1 mes
Este artículo aprenderemos, qué es React Testing Library y algunos de sus conceptos claves que todo desarrollador debería de saber. Además, desarrollaremos un ejemplo práctico para conocer como se usa Jest con React Testing Library.
¿Qué es React Testing Library?
React Testing Library es un conjunto de funciones enfocadas en mejorar la experiencia de escribir pruebas dentro de un entorno React.
Estas funciones se clasifican en dos tipos: Queries y User Actions.
Funciones de tipo Query
Son funciones que permiten seleccionar uno o más elementos dentro de una página. Los queries se componente de la siguiente estructura:
[Tipo de búsqueda] [Cantidad de elementos a buscar] [Forma de buscar el elemento]
Tipo de búsqueda
Como se obtiene un elemento.
Se clasifica en tres tipos:
- get. Busca un elemento, en caso de no encontrarlo, devuelve un error.
- query. Busca un elemento, si no lo encuentra, devuelve un valor por defecto.
- find. Busca un elemento asíncrono, si lo encuentra regresa una promesa satisfactoria o en caso contrarío, una promesa rechazada.
Cantidad de elementos a buscar
Define si esperas uno o más elementos.
Existen dos tipos:
- By. Regresa un elemento.
- AllBy. Devuelve un arreglo de elementos.
NOTA: Al usarse “By” y “AllBy” con el tipo de búsqueda “query”, devuelve “null” y un arreglo vacío, respectivamente.
Forma de buscar el elemento
La estrategia para buscar el elemento.
Existen ocho diferentes formas:
- Role. Busca por un rol
- LabelText. Busca por etiqueta de formulario.
- PlaceholderText. Busca por placeholder.
- Text. Busca por texto visible.
- DisplayValue. Busca inputs, textareas y selects por el valor que se muestra.
- AltText. Busca imágenes o inputs de tipo imagen por su texto alternativo “alt”.
- Title. Busca elementos que tengan el atributo title (por ejemplo, iconos o SVGs)
- TestId. Buscar por la propiedad data-test-id.
Al combinar los tipos de búsqueda, cantidad de elementos a buscar y formas de buscar, obtenemos un total de 48 “queries”.
Funciones de tipo User Action
Son funciones que permiten simular la interacción de un usuario con los elementos dentro de una página. Por ejemplo, tenemos funciones para simular como si estuviéramos escribiendo en un campo de tipo texto dentro de un formulario.
Un user action se componente de dos partes importantes:
- El tipo de evento
- El elemento con el que queremos interactuar.
- El valor que queremos asignar al elemento.
Algunos de los tipos de eventos que tenemos disponibles son:
- Change
- Click
- Submit
- Blur
- KeyDown
- Focus
Si quieres saber toda la lista de eventos disponibles, puedes revisarla aquí: https://github.com/testing-library/dom-testing-library/blob/main/src/event-map.js
Cómo funciona React Testing Library con Jest
Como sabemos, Jest es un framework de tipo testing para escribir, ejecutar y evaluar nuestras pruebas en un entorno Javascript, mientras React Testing Library, solo son utilidades para mejoran la experiencia al escribir pruebas en un entorno React.
Podríamos pensar en React Testing Library como esa librería que le da superpoderes a Jest para poder crear pruebas en un entorno React.
Ejemplo práctico de React Testing Library con Jest
Para nuestro ejemplo práctico usaremos la herramienta Create React App, porque ya viene Jest y React Testing Library configurados por defecto.
Sin embargo, si estas interesado en conocer como instalar Jest correctamente en tu entorno, te envío a que leas mi artículo: ¿Qué es Jest y cómo funciona con React?
Seleccionar un elemento usando React Testing Library
Para este caso práctico, seleccionaremos un campo por placeholder mediante los diferentes tipos de búsqueda: get, query y find.
Ejemplo usando getBy
// Se busca un único elemento con "valor1" por placeholder
const valor1 = screen.getByPlaceholderText('Valor1')
// Si existe busca el elemento “valor2”, en caso contrario, arroja error
const valor2 = screen.getByPlaceholderText('Valor2')
// Busca el elemento “valor3”, si existe más de uno, arroja error
const valor3 = screen.getByPlaceholderText('Valor3')
Ejemplo usando queryBy
// Busca un único elemento con placeholder "Valor1"
// Si no lo encuentra, devuelve null (no lanza error)
const valor1 = screen.queryByPlaceholderText('Valor1')
// También busca el elemento con placeholder "Valor2"
// Si no existe, simplemente devuelve null
const valor2 = screen.queryByPlaceholderText('Valor2')
Ejemplo usando findBy
// Espera que el input se renderice después del hacer una petición al backend
const input = await screen.findByPlaceholderText('Buscar usuario')
Seleccionar varios elementos usando React Testing Library
Para seleccionar varios elementos usemos el mismo ejemplo que el anterior.
Ejemplo usando getAllBy
// Se busca los elementos con el placeholder “Productos" por placeholder
const productos = screen.getAllByPlaceholderText('Productos')
// Si existe busca los elementos “Categorias”, en caso contrario arroja error
const categorias = screen.getAllByPlaceholderText(‘Categorias’)
Ejemplo usando queryAllBy
// Busca los elementos con placeholder "Productos" // Si no lo encuentra, devuelve un arreglo vacío (no lanza error) const productos = screen.queryAllByPlaceholderText(‘Productos') // También busca los elementos con placeholder "Categorias" // Si no existe, simplemente devuelve un arreglo vacío const categorias = screen.queryAllByPlaceholderText(‘Categorias')
Ejemplo usando findAllBy
// Espera que los inputs "Productos" se rendericen después de hacer una petición al backend
const productos = await screen.findAllByPlaceholderText('Productos')
Escribir en un elemento usando React Testing Library
Para este ejemplo, vamos a suponer que necesitamos escribir en una reseña en un elemento de tipo textArea.
// Busca el textarea con el placeholder "Comentario"
// Si no lo encuentra, lanza un error y la línea siguiente no se ejecuta
const comentario = screen.getByPlaceholderText('Comentario')
// Cambia el valor del textarea a "Este producto es excelente"
fireEvent.change(comentario, { target: { value: 'Este producto es excelente' } })
Conclusión
React Testing Library no remplaza a Jest, ni viceversa, al contrario son herramientas que trabajan perfectamente en conjunto para mejorar la forma en la que trabajamos nuestras pruebas en un entorno React.
