92. コンポーネントのテスト — TestBedで部品を組み立てて表示を検証

コンポーネントのテストでは、TestBed という道具でテスト用の小さなアプリを組み立てます。standalone コンポーネントは imports に入れて登録し、TestBed.createComponent で生成します。返ってくる fixture が操作の起点で、fixture.detectChanges() で画面を描画し、fixture.nativeElement から実際のDOMを取り出して文言を検証します。

Input を持つコンポーネントには fixture.componentRef.setInput('名前', 値) で外から値を流し込めます。親コンポーネントを用意しなくても「この Input を渡したらこう表示される」を単体で確認できるのが強みです。サービスに依存する部品は、DIの応用(『DIと差し替えやすさ』のレッスン)で見たとおり providers でフェイクに差し替えます。

初学者がつまずくのは detectChanges() の呼び忘れです。TestBed はコンポーネントを作っただけでは描画せず、detectChanges() を呼んで初めてテンプレートがDOMに反映されます。「値を変えたのに表示が変わらない」ときは、まず detectChanges() を呼んだか確認しましょう。

サンプルコード(フレームワーク環境が必要なため表示のみ)

import { TestBed } from '@angular/core/testing';
import { Greeting } from './greeting';

describe('Greeting', () => {
  it('渡した名前が表示される', () => {
    // standalone コンポーネントは imports に入れて組み立てる
    TestBed.configureTestingModule({ imports: [Greeting] });

    const fixture = TestBed.createComponent(Greeting);
    // Input を外から流し込む
    fixture.componentRef.setInput('name', '田中');
    // 描画を実行(これを忘れるとDOMは空のまま)
    fixture.detectChanges();

    // 実際のDOMから文言を検証する
    const el: HTMLElement = fixture.nativeElement;
    expect(el.textContent).toContain('こんにちは、田中さん');
  });
});

サンプルコードで身につける(5本) →

学んだ概念を、素朴な例から実務寄りの例まで5つの具体例で確認します。

公式ドキュメントで詳しく ↗