DEV Community

Cover image for Adiós Karma, Hola Vitest: El Futuro del Testing en Angular
Ricardo Chavarria
Ricardo Chavarria

Posted on

Adiós Karma, Hola Vitest: El Futuro del Testing en Angular

#angular #testing #vitest #webdev

A lo largo de los años, quienes hemos trabajado estrechamente con Angular hemos presenciado una evolución constante, tanto en el framework como en su ecosistema. Con Angular v20, se introduce uno de los avances más relevantes en el ámbito del testing: la adopción experimental de Vitest como nuevo motor de pruebas. Este cambio no solo responde a la necesidad de modernizar la experiencia de desarrollo, sino que también señala el comienzo de una transición gradual lejos de Karma, el sistema de testing que ha acompañado a Angular desde sus inicios.

El Adiós a un Clásico: ¿Qué Pasó con Karma?

Durante más de una década, Karma fue el test runner por defecto en Angular, desempeñando un papel fundamental en el ecosistema. Diseñado para ejecutar pruebas en navegadores reales y adaptarse a múltiples entornos, fue una solución efectiva durante el período en que Webpack era la herramienta predominante en Angular.

Sin embargo, a mediados de 2024, el equipo de Karma marcó oficialmente el proyecto como obsoleto, publicaron un aviso en su repositorio de GitHub indicando que el desarrollo activo se detiene y se recomienda buscar alternativas modernas. Ante esto, el equipo de Angular ha comenzado a ofrecer soporte experimental para Vitest a partir de Angular v20.

Vitest: Testing Moderno para el Ecosistema Web

Vitest es un test runner moderno y ultrarrápido diseñado para integrarse de forma nativa con Vite, el nuevo estándar en herramientas de desarrollo frontend. Inspirado en la experiencia de desarrollo de Jest, pero construido sobre tecnologías modernas como ES Modules, esbuild y Vite, Vitest introduce una nueva forma de escribir y ejecutar pruebas unitarias.

A diferencia de herramientas tradicionales como Karma, que dependen de navegadores reales y procesos más pesados, Vitest está optimizado para el rendimiento, la simplicidad y la experiencia de desarrollador. Su ejecución en memoria, su capacidad para aprovechar el sistema de hot module replacement (HMR) de Vite y su compatibilidad con TypeScript de forma nativa, lo hacen ideal para entornos modernos como Angular, React, Vue y otros.

Beneficios clave de Vitest

  • Rápido desde el inicio: Ejecuta pruebas casi al instante gracias a su arquitectura basada en ESM y Vite.

  • Integración nativa con Vite: Aprovecha el sistema de build moderno de Vite sin configuración adicional.

  • Mejor experiencia de desarrollo: Soporta watch mode, pruebas en caliente y mensajes de error claros.

  • Compatible con Jest: Usa una API similar, facilitando la adopción o migración.

  • Versátil: Funciona en Node y con entornos simulados de navegador (como jsdom).

Configurando Vitest en un proyecto Angular (v20+)

  1. Instala las dependencias necesarias: 
npm install vitest jsdom --save-dev
Enter fullscreen mode Exit fullscreen mode
  1. Configura angular.json 
"test": {
  "builder": "@angular/build:unit-test",
  "options": {
    "tsConfig": "tsconfig.spec.json",
    "buildTarget": "::development",
    "runner": "vitest"
  }
}
Enter fullscreen mode Exit fullscreen mode

Esto indica al Angular CLI que utilice Vitest como runner en lugar de Karma.

  1. Ajusta los imports en tus archivos de prueba:

Ahora debes actualizar tus archivos de prueba para incluir las importaciones correctas.

import { describe, beforeEach, it, expect } from 'vitest';
Enter fullscreen mode Exit fullscreen mode
  1. Ejecuta las pruebas con el comando habitual: 
ng test
Enter fullscreen mode Exit fullscreen mode

Este comando ejecutará Vitest en modo de observación (watch), permitiendo resultados inmediatos ante cada cambio.

Consideraciones y Limitaciones Actuales

Aunque la integración de Vitest en Angular es un avance prometedor, es importante tener en cuenta que el soporte aún se encuentra en fase experimental. Esto implica algunas limitaciones que los desarrolladores deben considerar antes de migrar completamente:

  • Cobertura de código: Aunque Vitest soporta generación de reportes de cobertura (coverage), es necesario configurarlo explícitamente y puede requerir ajustes adicionales en proyectos Angular complejos.

  • Depuración en navegadores reales: A diferencia de Karma, que ejecuta pruebas directamente en navegadores, Vitest simula el entorno mediante jsdom. Esto es suficiente para la mayoría de pruebas unitarias, pero podría no reflejar con exactitud ciertos comportamientos específicos del navegador.

  • Pruebas E2E: Vitest no reemplaza a herramientas de pruebas de extremo a extremo como Cypress o Playwright, por lo que sigue siendo necesario usarlas para flujos de usuario completos.

Conclusión

La integración de Vitest en Angular marca un cambio importante en la forma en que abordamos el testing en Angular. El fin de una era con Karma y la transición hacia herramientas más modernas y rápidas no solo mejora la experiencia del desarrollador, sino que alinea Angular con las prácticas y tecnologías que ya predominan en el ecosistema frontend actual.

A medida que la comunidad lo adopte y el equipo de Angular avance en su estabilización, podemos esperar más mejoras, compatibilidad avanzada con entornos reales de navegador y mayor integración con las herramientas del ecosistema.

Top comments (0)