Testing de Aplicaciones con Vitest y React
Contenido del curso
Testing de Aplicaciones con Vitest y React
Contenido del curso
Fernando José Aguilar Rivas
Gustavo Adolfo Torres Quintana
Wilmer Garzon Cabezas
Team Platzi
Elioenai Garcia
Paula Velosa
Bastian Maurico Landskron Silva
JuanFe Peralta
Team Platzi
Juan Diego Mejia Maestre
Joseph Darwin Carhuaz Villagomez
Wilmer Garzon Cabezas
Team PlatziAdjunto el comando de instalacion de dependiencias
NPM:
npm i @testing-library/dom @testing-library/jest-dom @testing-library/react jsdom vitest -D
YARN
yarn add -D @testing-library/dom @testing-library/jest-dom @testing-library/react jsdom vitest -D
Hola + tengo este mensaje: git@github.com: Permission denied (publickey).
fatal: Could not read from remote repository.
Hola Gustavo! maybe sea un tema de config en las keys de tu maquina, intenta hacer el clone via https y nos comentas -> git clone
https://github.com/platzi/react-testing
jsdom es una biblioteca que simula un entorno DOM (Document Object Model) en Node.js, lo que permite ejecutar pruebas de código que interactúa con el DOM sin necesidad de un navegador. Al configurar "jsdom" como el environment en Vitest, puedes probar componentes de React como si estuvieran en un navegador real, asegurando que tus pruebas manejen correctamente el DOM virtual. Esto es crucial para realizar pruebas efectivas en aplicaciones React, ya que permite un entorno controlado para evaluar el comportamiento de los componentes.
Justo a tiempo este Curso ajkaj es como si Platzi supiera que es lo que necesito
Yo sé que Wilmer dijo que más adelante lo explicaba, pero por si acaso les mata la curiosidad como a mi 🫢:
Un matcher es una función o herramienta utilizada en pruebas para verificar si un resultado coincide con un valor esperado. En el contexto de Testing Library y Jest, los matchers permiten hacer aserciones sobre el estado de los componentes de React, como verificar si un elemento está presente en el DOM, si tiene un texto específico o si cumple con ciertas condiciones. Estos matchers facilitan la escritura de pruebas unitarias al proporcionar una forma clara y concisa de validar el comportamiento del código.
🧪 Estrategias de Testing con Vitest & React
La implementación de pruebas no es un "extra", es el seguro de vida de tu código. Evita desastres financieros y fallos de confianza en el usuario final.
🚀 Preparación del Entorno
Antes de testear, necesitamos clonar el proyecto y preparar las dependencias de desarrollo.
git clone <url-del-repo>npm install o yarn install📦 Instalación de Herramientas de Pruebas
Es vital usar el flag --save-dev o -D porque estas herramientas solo sirven mientras desarrollamos, no deben ir al bundle de producción.
Comando recomendado:
npm install --save-dev @testing-library/react @testing-library/dom @types/react @types/react-dom vitest jsdomyarn add -D @testing-library/react @testing-library/dom @types/react @types/react-dom vitest jsdom💡 Dato Interesante: @testing-library se basa en una filosofía simple: "Cuanto más se parezcan tus pruebas a la forma en que se usa tu software, más confianza te darán". No testea la implementación (el "cómo"), sino el resultado (el "qué").
🛠 Configuración Maestra
Para que Vitest entienda que estamos en un entorno de navegador (y no solo Node.js), configuramos vitest.config.ts:
import { defineConfig } from 'vitest/config'; export default defineConfig({ test: { environment: 'jsdom', // Simula el navegador en la consola globals: true, // Permite usar 'describe' y 'it' sin importarlos setupFiles: ['./src/setuptest.ts'] } });
En src/setuptest.ts, añade: import '@testing-library/jest-dom'; (Para tener matchers humanos como .toBeInTheDocument()).
🏃♂️ Ejecución de Pruebas
Agrega el motor de ejecución en tu package.json:
"test": "vitest" -> Ejecuta las pruebas una vez."test:watch": "vitest watch" -> Re-ejecuta automáticamente al guardar cambios.🔍 ¿Por qué Vitest y no Jest?
Aunque Jest es el rey histórico, Vitest es preferido en proyectos modernos con Vite porque:
Veo que Wilmer crea el archivo vitest.config.ts, ¿siempre debe ser .ts? Todo mi proyecto react es .js por eso estaba creando vitest.config.js y (recién estoy entrando al mundo react)
Joseph, el archivo vitest.config.js es 100% válido. La extensión .ts se usa cuando trabajas con TypeScript, pero para proyectos en JavaScript, usar .js esta perfect. 💚