Ahora que tenemos una comprensión básica de cómo escribir pruebas unitarias, es hora de avanzar a probar componentes DOM más complejos. Veremos cómo utilizar DOM Testing Library para verificar la estructura, el contenido y el comportamiento de componentes que interactúan entre sí en el DOM.

Crear un Componente Complejo

Para este ejercicio, crearemos un componente de formulario simple con un campo de entrada y un botón que, al hacer clic, muestra un mensaje.

Archivo index.html:

html

Archivo index.js:

javascript

Escribir Pruebas para el Componente

Vamos a escribir varias pruebas que verifiquen diferentes aspectos del componente: su estructura inicial, la entrada del usuario y el comportamiento del formulario al enviarse.

Archivo form.test.js:

javascript

Entendiendo las Pruebas

1. Prueba de Renderizado Inicial:

   • getByLabelText se usa para buscar el input por su etiqueta asociada.
   • getByText se utiliza para encontrar el botón por su texto.

2. Prueba de Envío de Formulario:

   • fireEvent.change simula la entrada del usuario al campo de texto.
   • fireEvent.click simula un clic en el botón de envío del formulario.
   • Verificamos que el mensaje se actualiza correctamente después del envío.

[Placeholder para imagen explicativa: Diagrama que muestra el flujo de interacciones del usuario con el formulario, desde la entrada hasta el envío y la actualización del mensaje]

Pruebas Adicionales

Podemos escribir pruebas adicionales para cubrir más escenarios, como la validación del formulario o la prueba del manejo de eventos.

Validación del Campo de Entrada

Supongamos que queremos que el formulario muestre un mensaje de error si el campo de entrada está vacío al enviar el formulario.

Archivo index.js (modificado):

javascript

Archivo form.test.js (agregar prueba):

javascript

Conclusión

En este capítulo, has aprendido cómo escribir pruebas para componentes DOM más complejos usando DOM Testing Library. Hemos cubierto varios aspectos, desde verificar la estructura inicial hasta simular interacciones del usuario y validar el comportamiento del componente.

Estas técnicas te permitirán asegurar que los componentes de tu aplicación funcionen como se espera, y te prepararán para escribir pruebas más avanzadas que involucran múltiples componentes y sus interacciones.