Cuando trabajas con Angular en proyectos reales, hay un momento en el que todo cambia: el código deja de ser algo que simplemente “funciona” y pasa a ser algo que debe mantenerse, escalar y evolucionar sin romperse. En ese punto, entender la comparativa Jasmine vs Jest en Angular se vuelve clave para tomar buenas decisiones técnicas.
Ahí es donde entra el testing. Al principio, es habitual ignorarlo o dejarlo en segundo plano. Pero en cuanto el proyecto crece —más componentes, más servicios, más lógica— los tests pasan de ser un extra a convertirse en una pieza clave del desarrollo.
Dentro del ecosistema Angular, el testing ha estado históricamente ligado a Jasmine, que viene integrado por defecto con Angular CLI. Sin embargo, en los últimos años Jest se ha convertido en una alternativa muy popular, especialmente en proyectos modernos o equipos que buscan mejorar rendimiento y experiencia de desarrollo.
La pregunta ya no es si deberías escribir tests, sino qué herramienta encaja mejor con tu proyecto y tu equipo.
La idea es sencilla: Angular proporciona las herramientas base para testing (TestBed, utilidades, estructura).
Jasmine es la solución tradicional integrada con Angular.
Jest es una alternativa más moderna, rápida y flexible.
Jasmine vs Jest en Angular: principales diferencias
Aunque ambos frameworks permiten escribir tests unitarios con una sintaxis muy parecida, su enfoque es distinto.
Jasmine funciona normalmente junto a Karma, que ejecuta los tests en un navegador real, mientras que Jest es un entorno completo que ejecuta los tests en Node usando un DOM simulado.
Esto tiene implicaciones importantes:
- Jest es significativamente más rápido.
- Jasmine depende de un navegador (Chrome, normalmente).
- Jest simplifica la configuración en proyectos grandes.
- Jasmine encaja perfectamente con Angular “out of the box”.
A nivel de código, la diferencia es mínima. A nivel de experiencia, es bastante notable.
¿Qué es Jasmine?
Jasmine es un framework de testing basado en BDD (Behavior Driven Development) que Angular incluye por defecto. Cuando creas un proyecto con: ng new mi-app, automáticamente tienes todo preparado para usar Jasmine junto con Karma.
Sus características principales:
- Sintaxis simple basada en describe, it y expect
- No requiere librerías externas para assertions
- Integración directa con Angular CLI
- Gran estabilidad en proyectos consolidados
Ejemplo básico:
describe('Counter', () => {
it('should increment value', () => {
let value = 0;
value++;
expect(value).toBe(1);
});
}); El flujo típico es:
ng test
Karma abre un navegador , se ejecutan los tests.
Este enfoque funciona bien, pero puede volverse lento a medida que el proyecto crece.
¿Qué es Jest?
Jest es un framework desarrollado por Meta Platforms que incluye todo lo necesario para testing en un solo paquete.
A diferencia de Jasmine, Jest no necesita Karma ni navegador. Utiliza jsdom para simular el entorno del DOM.
Esto le permite:
- Ejecutar tests mucho más rápido
- Correr tests en paralelo
- Simplificar configuración
- Mejorar la experiencia del desarrollador
Ejemplo equivalente:
describe('Counter', () => {
it('should increment value', () => {
let value = 0;
value++;
expect(value).toBe(1);
});
}); Como puedes ver, la sintaxis es prácticamente idéntica.
Cómo funciona el testing en Angular (independientemente del framework)
Angular proporciona herramientas propias para testing, independientemente del framework que uses.
La más importante es TestBed, que permite:
- Crear módulos de testing
- Inyectar dependencias
- Simular componentes
- Renderizar templates
Un flujo típico: Configurar TestBed > Crear componente o servicio > Ejecutar acciones > Verificar resultados
Ejemplo:
beforeEach(() => {
TestBed.configureTestingModule({
declarations: [CounterComponent],
});
}); Esto es común tanto para Jasmine como para Jest.
Configuración por defecto con Jasmine en Angular
Angular CLI incluye todo lo necesario (Jasmine, karma y archivos de configuración)
Para ejecutar: ng test
Ventajas:
- No necesitas configurar nada
- Funciona desde el minuto uno
- Documentación oficial alineada
Inconvenientes:
- Más lento
- Dependencia de navegador
- Configuración menos flexible
Cómo migrar un proyecto Angular de Jasmine a Jest
Migrar a Jest implica algunos pasos adicionales, pero no es especialmente complejo.
Instalar dependencias
npm install --save-dev jest jest-preset-angular @types/jest
Configurar Jest
module.exports = {
preset: 'jest-preset-angular',
setupFilesAfterEnv: ['<rootDir>/setup-jest.ts'],
}; Crear setup-jest.ts
import 'jest-preset-angular/setup-jest';
Actualizar configuración de TypeScript
Eliminar Karma, a partir de aquí: npx jest. En muchos equipos, esta migración se hace gradualmente.
Testing de componentes en Angular con TestBed
En Angular, gran parte del valor está en testear componentes reales.
Ejemplo:
describe('CounterComponent', () => {
let component: CounterComponent;
let fixture: ComponentFixture<CounterComponent>;
beforeEach(() => {
TestBed.configureTestingModule({
declarations: [CounterComponent],
});
fixture = TestBed.createComponent(CounterComponent);
component = fixture.componentInstance;
fixture.detectChanges();
});
it('should render value', () => {
const compiled = fixture.nativeElement;
expect(compiled.querySelector('.counter-value').textContent).toContain('0');
});
}); Aquí no solo testeas lógica, sino también la vista.
Testing de servicios y lógica de negocio
Los servicios suelen ser más simples de testear porque no tienen DOM.
describe('CounterService', () => {
let service: CounterService;
beforeEach(() => {
service = new CounterService();
});
it('should increment value', () => {
service.increment();
expect(service.value).toBe(1);
});
}); Este tipo de test es rápido y muy útil para lógica crítica.
Mocks, spies y control de dependencias
Aquí es donde empiezan las diferencias reales.
Con Jasmine:
spyOn(service, 'getData').and.returnValue(of([]));
Con Jest:
jest.spyOn(service, 'getData').mockReturnValue(of([]));
Jest ofrece ventajas importantes:
- Mejor control de mocks
- Reset automático
- Mayor capacidad de inspección
Esto es especialmente útil en aplicaciones complejas.
Cobertura de código (coverage)
La cobertura indica qué porcentaje del código está testeado.
Con Angular:
ng test --code-coverage
Con Jest:
npx jest --coverage
Ambos generan informes, pero Jest suele ser más rápido y fácil de integrar en pipelines.
Integración en CI/CD
En proyectos reales, los tests se ejecutan automáticamente en pipelines.
Ejemplos:
- GitHub Actions
- GitLab CI
- Azure DevOps
Flujo típico: Instalar dependencias > Ejecutar tests > Generar coverage > Bloquear merge si fallan. Aquí Jest tiene ventaja por no depender de navegador.
Debugging y experiencia de desarrollo
Este punto suele marcar la diferencia en el día a día.
Jasmine + Karma:
- Debug en navegador
- Más lento
- Más pasos
Jest:
- Ejecución rápida
- Debug más simple
- Mejor integración con editores
Esto impacta directamente en productividad.
Ventajas y desventajas
Jasmine
Ventajas:
- Integración nativa
- Configuración mínima
- Estable
Desventajas:
- Más lento
- Dependencia de navegador
- Menos flexible
Jest
Ventajas:
- Muy rápido
- Todo en uno
- Mejor experiencia de desarrollo
- Ideal para CI/CD
Desventajas:
- Configuración inicial
- No es el default en Angular
¿Cuándo usar Jasmine o Jest en Angular?
Jasmine:
- Proyectos pequeños
- Equipos que empiezan
- Necesidad de simplicidad
Jest:
- Proyectos grandes
- Equipos con CI/CD
- Necesidad de velocidad
- Testing avanzado
Conclusiones
En Angular, tanto Jasmine como Jest son herramientas válidas, pero responden a necesidades distintas. Jasmine es la opción clásica: estable, integrada y sencilla, por otro lado, Jest es la opción moderna: rápida, flexible y pensada para escalar.
En la práctica, puedes empezar con Jasmine sin fricción para luego mejorar rendimiento con Jest y, sobre todo: tener en cuenta que el valor no está solo en la herramienta, sino en el hábito de escribir tests.
Porque cuando el proyecto crece, los tests no son un extra. Son lo que te permite seguir avanzando sin romper lo que ya funciona.
Si quieres ampliar información sobre desarrollo de software síguenos lee nuestro blog y suscríbete a nuestro de YouTube.
