Testing de Aplicaciones con Vitest y React

¿Por qué es vital implementar técnicas de testing en tu proyecto?

La falta de testing puede acarrear consecuencias graves para cualquier empresa: desde pérdidas económicas hasta el deterioro de la confianza en el producto. Implementar técnicas de testing en tu proyecto no solo te protege de estos riesgos, sino que también garantiza el funcionamiento óptimo del software.

A lo largo de este curso, trabajaremos con Platzi Order, una aplicación de gestión de pedidos, utilizando diversas técnicas de testing que exploraremos en profundidad.

¿Cómo clonar y preparar tu repositorio para testing?

Para iniciar, es fundamental clonar el repositorio del proyecto Platzi Order. Desde la terminal, ejecuta el siguiente comando:

git clone 

Luego, accede a la carpeta del proyecto y asegúrate de instalar las dependencias necesarias para ejecutar las pruebas. Si utilizas yarn, usa el siguiente comando:

yarn install

Si prefieres npm, entonces ejecuta:

npm install

Una vez instalado todo, estarás listo para configurar y ejecutar las pruebas necesarias.

¿Qué dependencias necesitas para correr pruebas?

Ubicado dentro del proyecto, instala las dependencias específicas para el ambiente de pruebas con el siguiente comando:

yarn add -D 

El argumento -D indica que estas dependencias se instalarán solo en el entorno de desarrollo y no en producción. Las herramientas que utilizaremos son:

• Testing Library DOM: virtualiza un DOM en un ambiente de testing.

• Testing Library Jest DOM: proporciona los matchers necesarios.

• Testing Library React: ofrece utilidades para pruebas en componentes React.

• jsdom: agrega más utilidades para la configuración de pruebas.

• Vitest: nuestro test runner para este proyecto.

El proyecto se construirá sobre el framework Vite. Si no estás familiarizado con él, revisa el curso específico en la sección de recursos.

¿Cómo configurar los archivos para ejecutar tests?

Con las dependencias instaladas, es momento de configurar los archivos del proyecto. En la raíz del mismo, crea un nuevo archivo llamado vitest.config.ts e ingresa la siguiente configuración:

import { defineConfig } from 'vitest/config';

export default defineConfig({
  test: {
    environment: 'jsdom', // Virtualizar el DOM
    globals: true, // Habilitar matchers globales
    setupFiles: ['./src/setuptest.ts'] // Archivo de configuración
  }
});

No olvides crear el archivo src/setuptest.ts, como se especifica en la configuración. Asegúrate de que el nombre sea exacto para evitar errores futuros.

¿Cómo crear y gestionar scripts de testing?

Finalmente, configura un script para ejecutar las pruebas dentro del archivo package.json, en la sección de scripts:

"scripts": {
  "test": "vitest"
}

Guarda los cambios, dirígete a la terminal y ejecuta:

yarn test

Si ves un error indicando que no se encontraron archivos de prueba, no te preocupes. Esto es totalmente normal al no haber configurado aún archivos de prueba.

En la próxima clase abordaremos cómo crear estos archivos y comenzar las pruebas prácticas en tu proyecto.

¡Sigue aprendiendo y mejora tus habilidades! 🚀