Testing de Aplicaciones con Vitest y React

Antes de escribir una sola línea de test, necesitas preparar tu entorno correctamente. Configurar Vitest como test runner en un proyecto React es el primer paso para garantizar que tus pruebas funcionen sin fricciones y tu equipo pueda detectar errores antes de que lleguen a producción.

¿Cómo clonar e instalar el proyecto base para testing?

El proyecto de práctica se llama Platzi Order, una aplicación de gestión de pedidos que servirá como base para aplicar distintas técnicas de testing. Para comenzar, abre tu terminal y clona el repositorio con git clone seguido de la URL del proyecto [0:40]. Luego accede a la carpeta e instala las dependencias.

Si usas Yarn, ejecuta yarn directamente. Si prefieres npm, el comando equivalente es npm install [0:52]. Una vez completada la instalación, abre el proyecto en tu editor de código.

¿Qué dependencias de desarrollo necesitas instalar?

El siguiente paso es agregar las librerías necesarias para el entorno de pruebas. Ejecuta yarn add -d seguido de los paquetes requeridos [1:13]. La bandera -d es fundamental porque indica que estas dependencias son exclusivamente para el ambiente de pruebas y no se incluirán en producción.

Al revisar tu package.json, encontrarás cinco dependencias clave en devDependencies [1:30]:

• @testing-library/dom: virtualiza un DOM en el ambiente de testing.
• @testing-library/jest-dom: provee matchers adicionales para validar elementos del DOM.
• @testing-library/react: ofrece utilidades específicas para hacer testing en componentes de React.
• jsdom: trae utilidades necesarias para simular un entorno de navegador.
• vitest: el test runner que ejecutará todas las pruebas del proyecto.

Vitest funciona de manera similar a como lo hacía Create React App con Jest, pero con la ventaja de que está diseñado para proyectos modernos basados en Vite, ya que Create React App se encuentra deprecado [2:18].

¿Cómo crear el archivo de configuración vitest.config.ts?

Con las dependencias listas, crea un archivo en la raíz del proyecto llamado vitest.config.ts [2:30]. Dentro de este archivo importa la función defineConfig desde el módulo vitest/config:

typescript import { defineConfig } from 'vitest/config';

export default defineConfig({ test: { environment: 'jsdom', globals: true, setupFiles: ['./src/setupTest.ts'], }, });

Esta configuración define tres propiedades esenciales dentro de la key test [2:55]:

• environment: establecido como jsdom para virtualizar el DOM en las pruebas.
• globals: con valor true, hace que los matchers estén disponibles de forma global sin necesidad de importarlos en cada archivo de test [3:12].
• setupFiles: un array que apunta al archivo de configuración inicial ubicado en ./src/setupTest.ts [3:25].

¿Qué contiene el archivo setupTest.ts?

El archivo setupTest.ts todavía no existe en la carpeta src, así que debes crearlo manualmente. Un consejo práctico: copia y pega el nombre exacto del archivo que definiste en setupFiles para evitar errores por typos [3:42].

Dentro de setupTest.ts, solo necesitas una línea:

typescript import '@testing-library/jest-dom';

Esta importación carga los matchers personalizados de jest-dom, como toBeInTheDocument() o toHaveTextContent(), que serán esenciales para validar la presencia y el estado de elementos en el DOM durante las pruebas [4:00].

¿Cómo ejecutar los tests desde la terminal?

El último paso de configuración es agregar el script de ejecución en el package.json. Dentro de la sección scripts, añade [4:18]:

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

Al ejecutar yarn test en la terminal, verás un mensaje de error: "No test files found" [4:30]. Esto es completamente esperado y confirma que la configuración funciona correctamente. Vitest está buscando archivos de prueba, pero aún no has creado ninguno.

Con el entorno preparado, las dependencias instaladas y los archivos de configuración listos, el siguiente paso es crear los primeros archivos de test y empezar a escribir pruebas reales. ¿Ya tienes tu proyecto configurado? Comparte en los comentarios si encontraste algún detalle adicional durante el proceso.