Angular Academy · Lección

TestBed y fixtures de componentes

Configurar y crear componentes en las pruebas

TestBed y fixtures de componentes es una lección gratuita de Angular Academy en CoddyKit. Esta es la lección 1 de 4. Puedes leer la lección completa abajo gratuitamente — luego la practicas en el navegador con un editor de código integrado y un tutor de IA 24/7. Forma parte de la ruta de aprendizaje de Angular Academy, y tu progreso se sincroniza en la web y la app de CoddyKit. El curso de Angular Academy incluye 4 lecciones en total.

Por qué existe TestBed

Los componentes de Angular dependen del framework: la inyección de dependencias, la detección de cambios y el compilador de plantillas. Para probarlos de forma aislada necesita un pequeño entorno de Angular. TestBed es la principal utilidad de pruebas de Angular para crear este entorno en cada prueba.

Configura un NgModule temporal, compila el componente y le proporciona una referencia para interactuar con él.

configureTestingModule

TestBed.configureTestingModule() declara lo que necesita la prueba: el componente que se va a probar, sus proveedores y las importaciones necesarias. En el caso de componentes independientes, incluya el propio componente en imports.

import { TestBed } from '@angular/core/testing';
import { CounterComponent } from './counter.component';

beforeEach(() => {
  TestBed.configureTestingModule({
    imports: [CounterComponent],
  });
});

Crear un accesorio de componente

TestBed.createComponent(CounterComponent) devuelve un ComponentFixture. El accesorio es su mando a distancia: envuelve la instancia del componente, su elemento DOM nativo y el mecanismo de detección de cambios.

import { ComponentFixture, TestBed } from '@angular/core/testing';

let fixture: ComponentFixture<CounterComponent>;

beforeEach(() => {
  fixture = TestBed.createComponent(CounterComponent);
});

Acceder a la instancia del componente

fixture.componentInstance es la instancia real de la clase. Puede llamar directamente a sus métodos y leer sus propiedades, igual que en TypeScript normal.

it('creates the component', () => {
  const fixture = TestBed.createComponent(CounterComponent);
  const component = fixture.componentInstance;
  expect(component).toBeTruthy();
  expect(component.count).toBe(0);
});

detectChanges activa el renderizado

Un accesorio recién creado aún NO se ha renderizado. Llame a fixture.detectChanges() para ejecutar la detección de cambios y el método ngOnInit del componente, vinculando los datos al DOM.

it('renders initial value', () => {
  const fixture = TestBed.createComponent(CounterComponent);
  fixture.detectChanges(); // now bindings are applied
  const el = fixture.nativeElement as HTMLElement;
  expect(el.textContent).toContain('0');
});

nativeElement frente a debugElement

fixture.nativeElement es el nodo DOM sin procesar (un HTMLElement). fixture.debugElement es el envoltorio más completo de Angular, que permite consultar por directiva, leer servicios inyectados e inspeccionar enlaces.

const native = fixture.nativeElement;       // HTMLElement
const debug = fixture.debugElement;         // DebugElement
console.log(debug.componentInstance === fixture.componentInstance); // true

Proveedores en el módulo de pruebas

Si el componente inyecta servicios, proporciónelos mediante providers. Puede utilizar servicios reales o sustitutos de prueba. Aquí proporcionamos un servicio real para un caso sencillo.

TestBed.configureTestingModule({
  imports: [CounterComponent],
  providers: [
    { provide: LoggerService, useValue: { log: () => {} } },
  ],
});

compileComponents para plantillas externas

Al utilizar templateUrl/styleUrls no insertados en línea sin la configuración de pruebas de Angular CLI, las plantillas deben compilarse de forma asíncrona. Llame a await TestBed.compileComponents(). Con CLI, esto suele hacerse automáticamente.

beforeEach(async () => {
  await TestBed.configureTestingModule({
    imports: [ProfileComponent],
  }).compileComponents();
});

Una prueba mínima completa

Todo junto: configurar, crear, detectar y comprobar. Esta es la estructura canónica de casi todas las pruebas de componentes de Angular.

describe('CounterComponent', () => {
  let fixture: ComponentFixture<CounterComponent>;

  beforeEach(() => {
    TestBed.configureTestingModule({ imports: [CounterComponent] });
    fixture = TestBed.createComponent(CounterComponent);
    fixture.detectChanges();
  });

  it('starts at zero', () => {
    expect(fixture.componentInstance.count).toBe(0);
  });
});

TestBed.inject para servicios

Para obtener un proveedor configurado, utilice TestBed.inject(Token). Es el reemplazo moderno del método obsoleto TestBed.get().

const logger = TestBed.inject(LoggerService);
expect(logger).toBeDefined();

Restablecer entre pruebas

TestBed restablece automáticamente su módulo antes de cada prueba, por lo que los proveedores y el estado de los componentes no se filtran entre pruebas. Por eso debe configurar el entorno dentro de beforeEach en lugar de hacerlo una sola vez de forma global.

Comprobación rápida

Compruebe qué sucede justo después de createComponent.

Resumen

Aprendió los fundamentos de las pruebas: TestBed.configureTestingModule() crea el entorno, createComponent() devuelve un ComponentFixture y detectChanges() lo renderiza. Utilice componentInstance para la clase, nativeElement/debugElement para el DOM y TestBed.inject() para los servicios.

Preguntas frecuentes

¿La lección «TestBed y fixtures de componentes» es gratis?

Sí — el texto completo de «TestBed y fixtures de componentes» es gratis para leer aquí en la web. Para practicarla de forma interactiva (editor de código integrado y tutor de IA 24/7) y desbloquear el resto del curso de Angular Academy, actualiza a CoddyKit PRO. El curso de Angular Academy incluye 4 lecciones en total.

¿Qué aprenderé en «TestBed y fixtures de componentes»?

Configurar y crear componentes en las pruebas Practicas Angular Academy con código real que ejecutas directamente en el navegador, y un tutor de IA 24/7 responde tus preguntas mientras trabajas en la lección.

¿Necesito experiencia previa para empezar Angular Academy?

No se requiere experiencia previa. Angular Academy en CoddyKit está estructurado para principiantes hasta estudiantes avanzados, así que puedes empezar aquí o desde el inicio y avanzar a tu ritmo. Esta es la lección 1 de 4.

¿Cuánto tiempo toma la lección «TestBed y fixtures de componentes»?

La mayoría de las lecciones de CoddyKit toman alrededor de 5–10 minutos. Cada una es compacta e interactiva, así que avanzas constantemente y retomas exactamente por donde dejaste en la web y la app.

¿Puedo escribir y ejecutar código en esta lección de Angular Academy?

Sí. Cada lección de Angular Academy incluye un editor de código integrado, así que escribes y ejecutas código real directamente en tu navegador y obtienes retroalimentación instantánea de IA — sin configuración local necesaria.

Todas las lecciones de este curso

← Volver a Angular Academy