Angular Academy · Leçon

TestBed et appareils de test de composants

Configurez et créez des composants dans les tests

TestBed et appareils de test de composants est une leçon Angular Academy gratuite sur CoddyKit. Ceci est la leçon 1 sur 4. Tu peux lire la leçon complète ci-dessous gratuitement — puis la pratiquer en direct dans le navigateur avec un éditeur de code intégré et un tuteur IA 24/7. Elle fait partie du parcours d'apprentissage Angular Academy, et ta progression se synchronise sur le web et l'application CoddyKit. Le cours Angular Academy comprend 4 leçons au total.

Pourquoi TestBed existe

Les composants Angular dépendent du framework : injection de dépendances, détection des modifications et compilateur de modèles. Pour les tester de manière isolée, vous avez besoin d’un petit environnement Angular. TestBed est le principal utilitaire de test d’Angular ; il construit cet environnement pour chaque test.

Il configure un NgModule temporaire, compile votre composant et vous fournit une référence pour interagir avec lui.

configureTestingModule

TestBed.configureTestingModule() déclare ce dont votre test a besoin : le composant testé, ses fournisseurs et les importations nécessaires. Pour les composants autonomes, placez directement le composant dans imports.

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

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

Créer une ComponentFixture

TestBed.createComponent(CounterComponent) renvoie une ComponentFixture. La fixture est votre télécommande : elle encapsule l’instance du composant, son élément DOM natif et le mécanisme de détection des modifications.

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

let fixture: ComponentFixture<CounterComponent>;

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

Accéder à l’instance du composant

fixture.componentInstance est l’instance réelle de la classe. Vous pouvez appeler ses méthodes et lire ses propriétés directement, comme en TypeScript classique.

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

detectChanges déclenche le rendu

Une fixture fraîchement créée n’a pas encore été rendue : NOT. Appelez fixture.detectChanges() pour lancer la détection des modifications et le ngOnInit du composant, afin de lier les données au 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 ou debugElement

fixture.nativeElement est le nœud DOM brut (un HTMLElement). fixture.debugElement est une enveloppe Angular plus riche qui permet d’effectuer des recherches par directive, de lire les services injectés et d’inspecter les liaisons.

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

Fournisseurs dans le module de test

Si le composant injecte des services, fournissez-les via providers. Vous pouvez utiliser de vrais services ou des doublures de test. Ici, nous fournissons un service réel pour un cas simple.

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

compileComponents pour les modèles externes

Lorsque vous utilisez templateUrl/styleUrls non intégrés au composant sans configuration de test Angular CLI, les modèles doivent être compilés de manière asynchrone. Appelez await TestBed.compileComponents(). Avec la CLI, cette étape est généralement automatique.

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

Un test minimal complet

En résumé : configurer, créer, détecter, vérifier. C’est la structure de référence de presque tous les tests de composants 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 pour les services

Pour récupérer un fournisseur configuré, utilisez TestBed.inject(Token). C’est le remplacement moderne de TestBed.get(), désormais obsolète.

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

Réinitialiser entre les tests

TestBed réinitialise automatiquement son module avant chaque test, afin que les fournisseurs et l’état des composants ne persistent pas d’un test à l’autre. C’est pourquoi vous devez configurer le module dans beforeEach plutôt qu’une seule fois globalement.

Vérification rapide

Testez ce qui se produit juste après createComponent.

Récapitulatif

Vous avez découvert les bases des tests : TestBed.configureTestingModule() construit l’environnement, createComponent() renvoie une ComponentFixture et detectChanges() effectue le rendu. Utilisez componentInstance pour accéder à la classe, nativeElement/debugElement pour le DOM et TestBed.inject() pour les services.

Questions Fréquemment Posées

La leçon « TestBed et appareils de test de composants » est-elle gratuite ?

Oui — le texte complet de « TestBed et appareils de test de composants » est gratuit à lire ici sur le web. Pour la pratiquer de manière interactive (un éditeur de code intégré et un tuteur IA 24/7) et déverrouiller le reste du cours Angular Academy, passe à CoddyKit PRO. Le cours Angular Academy comprend 4 leçons au total.

Qu'est-ce que j'apprendrai dans « TestBed et appareils de test de composants » ?

Configurez et créez des composants dans les tests Tu pratiques Angular Academy avec du code pratique que tu exécutes directement dans le navigateur, et un tuteur IA 24/7 répond à tes questions au fur et à mesure que tu avances dans la leçon.

Dois-je avoir de l'expérience pour commencer Angular Academy ?

Aucune expérience préalable n'est requise. Angular Academy sur CoddyKit est structuré pour les débutants jusqu'aux apprenants avancés, donc tu peux commencer ici ou depuis le début et avancer à ton rythme. Ceci est la leçon 1 sur 4.

Combien de temps prend la leçon « TestBed et appareils de test de composants » ?

La plupart des leçons CoddyKit prennent environ 5–10 minutes. Chacune est courte et interactive, tu progresses régulièrement et tu repiques exactement où tu t'es arrêté sur le web et l'app.

Peux-tu écrire et exécuter du code dans cette leçon Angular Academy ?

Oui. Chaque leçon Angular Academy inclut un éditeur de code intégré, tu écris et exécutes du vrai code directement dans ton navigateur et tu reçois des retours IA instantanés — aucune configuration locale requise.

Toutes les leçons de ce cours

TestBed et appareils de test de composants
Tester les entrées, les sorties et le DOM
Simuler les services et les dépendances
Tester les signaux et le code asynchrone

← Retour à Angular Academy