Angular 20: Vitest nativo sin zonas para Jasmine/Karma

Pendant des années, les projets Angular ont utilisé Karma et Jasmine comme solution de test par défaut. Aún hoy muchos equipos siguen con ese stack, aunque la experiencia suele ser lenta y poco agradable. Algunos han probado con Jest, pero su soporte oficial en Angular sigue siendo limitado.

Con Angular 20 llega una nueva etapa: ahora se puede reemplazar Karma de forma nativa por un runner completo, y ese runner es Vitest, un framework moderno basado en Vite que aporta velocidad, simplicidad y una experiencia de desarrollador muy superior.

En la práctica, la velocidad de ejecución y la facilidad de configuración sorprenden: por fin unos tests unitarios tan fluidos como el propio desarrollo.

Por qué elegir Vitest • Ejecución ultra rápida de tests, adiós a las esperas interminables • Compatibilidad nativa con Vite • Sintaxis moderna e intuitiva, muy cercana a Jest • Soporte TypeScript integrado • Candidato natural para reemplazar Karma a la espera de la decisión oficial en Angular 21

Prerrequisitos • Angular v20 o superior • Node.js v20.19 o superior Estas versiones garantizan compatibilidad con Vite y por tanto con Vitest.

Paso 1 — Instalar Vitest Ejecuta en tu proyecto npm install --save-dev vitest jsdom Con esto basta. No necesitas presets comunitarios ni paquetes adicionales; Angular 20 permite integrar Vitest de forma nativa.

Paso 2 — Crear src/test.ts con globals y providers por defecto Objetivo del archivo • Declarar los globals de Vitest para TypeScript y tu IDE • Definir providers de test compartidos, por ejemplo zoneless Contenido recomendado /// reference types=vitest/globals / import { provideZonelessChangeDetection } from @angular/core; export default [ provideZonelessChangeDetection() ]; Por qué importa • La directiva de referencia expone describe, it, expect y demás a TypeScript y al IDE • El array exportado será leído por el builder de tests para aplicar estos providers a todas las pruebas • provideZonelessChangeDetection activa la detección de cambios sin zone.js Más adelante podrás ampliar con provideNoopAnimations, provideHttpClientTesting y otros según tus necesidades.

Paso 3 — Configurar angular.json con el builder unit-test de Vitest Edita la target test y establece • builder en @angular/build:unit-test • runner en vitest • buildTarget en ::development • tsConfig en tsconfig.spec.json • providersFile en src/test.ts Qué consigue esta configuración • Activa el nuevo sistema de pruebas capaz de ejecutar Vitest • Permite alternar runner entre vitest y karma si lo necesitas • Reutiliza el perfil de build de desarrollo; crea ::testing si deseas aislarlo • Carga tus providers globales y expone los globals de Vitest al IDE

Paso 4 — Eliminar Karma y Jasmine 1. Desinstala los paquetes relacionados npm remove --save-dev karma karma-chrome-launcher karma-coverage karma-jasmine karma-jasmine-html-reporter jasmine-core @types/jasmine @types/jasminewd2 2. Borra los archivos de Karma • karma.conf.js • El antiguo src/test.ts de Karma si existía, no lo confundas con el src/test.ts creado en el paso 2 3. Limpia TypeScript • Asegúrate de que tsconfig.spec.json ya no incluye jasmine en compilerOptions.types

Paso 5 — Ejecutar los tests Usa el comando ng test Obtendrás una ejecución muy rápida, salida legible y un DOM simulado gracias a jsdom.

Conclusión Con Angular 20 puedes usar Vitest de forma nativa con una instalación mínima, un archivo src/test.ts para globals y providers zoneless, la configuración del builder @angular/build:unit-test en angular.json y un simple ng test para arrancar la suite. Sin presets comunitarios, con una configuración sobria, clara y sostenible en el tiempo.

En Q2BSTUDIO impulsamos equipos y proyectos con testing moderno y buenas prácticas de ingeniería. Si buscas aplicaciones a medida y software a medida de alto rendimiento con arquitecturas escalables, automatización de procesos y pipelines de CI que integren pruebas veloces, somos tu aliado. Descubre cómo abordamos proyectos end to end en desarrollo de aplicaciones y software multiplataforma.

Además, somos especialistas en inteligencia artificial e IA para empresas, agentes IA, ciberseguridad y pentesting, servicios cloud AWS y Azure, y servicios de inteligencia de negocio con Power BI. Integramos modelos de IA, análisis avanzado y prácticas de seguridad de primer nivel en cada entrega. Si te interesa explorar casos de uso con visión por computador, NLP o asistentes inteligentes, visita nuestra página de inteligencia artificial y cuéntanos tu reto.

¿Tienes dudas, quieres compartir experiencias o necesitas una guía avanzada sobre cobertura, reporter UI o CI con Vitest en Angular 20 sin zone.js Si te interesa, prepararemos un tutorial detallado con configuración de coverage, estrategias de mocks, tiempos de arranque, test environment y optimización en monorepos. Escríbenos y lo publicamos.