En este capítulo, vamos a enfocarnos en escribir nuestras primeras pruebas unitarias usando DOM Testing Library. Las pruebas unitarias permiten verificar pequeñas partes de tu código de manera aislada, asegurando que cada componente funcione como se espera.

Crear un Componente Simple

Para empezar, vamos a crear un componente básico en HTML y JavaScript:

Archivo index.html:

html

Archivo index.js:

javascript

Escribir una Prueba Unitaria

Vamos a escribir una prueba unitaria para verificar que el botón se renderiza correctamente en el DOM.

Archivo button.test.js:

javascript

Entendiendo la Prueba

1. Configuración Inicial:

   • beforeEach: Se ejecuta antes de cada prueba, creando un contenedor div y añadiéndolo al body.
   • afterEach: Limpia el DOM eliminando el contenedor después de cada prueba.

2. Escribiendo la Prueba:

   • Llamamos a la función renderButton pasando el contenedor.
   • Usamos la función getByText de DOM Testing Library para encontrar el botón por su texto.
   • Usamos expect de Jest para verificar que el botón está en el DOM.

[Placeholder para imagen explicativa: Diagrama simple que muestre el flujo de la prueba desde la creación del contenedor, renderizado del botón, hasta la verificación]

Pruebas Adicionales

Veamos otras pruebas unitarias que pueden aplicarse al mismo componente.

Verificar la Existencia de un Atributo

Vamos a verificar que el botón tiene el atributo id configurado correctamente.

javascript

Verificar Comportamiento al Hacer Click

Supongamos que queremos agregar un comportamiento de click a nuestro botón.

Archivo index.js (modificado):

javascript

Archivo button.test.js (agregar prueba):

javascript

Conclusión

En este capítulo, hemos aprendido cómo escribir nuestras primeras pruebas unitarias usando DOM Testing Library. Hemos visto cómo verificar la presencia de elementos en el DOM y cómo simular eventos para validar el comportamiento de los componentes.

Estas primeras pruebas unitarias sientan la base para pruebas más avanzadas que veremos en los próximos capítulos, donde exploraremos cómo probar componentes más complejos y sus interacciones.