Icono del sitio Profile Software Services

Jasmine vs Jest en Angular: ¿qué herramienta de testing elegir?

Jasmine vs Jest en Angular

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: 

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: 

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: 

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: 

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: 

Inconvenientes: 

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: 

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: 

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: 

Jest: 

Esto impacta directamente en productividad. 

Ventajas y desventajas 

Jasmine 

Ventajas: 

Desventajas: 

Jest 

Ventajas: 

Desventajas: 

¿Cuándo usar Jasmine o Jest en Angular? 

Jasmine: 

Jest: 

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.

Salir de la versión móvil