Angular Academy · レッスン

TestBedとコンポーネントフィクスチャ

Q: 「TestBedとコンポーネントフィクスチャ」で何を学びますか？

テストでコンポーネントを設定・作成します ブラウザで直接実行するハンズオンコードでAngular Academyを演習し、24時間対応のAIチューターがレッスンを進める中での質問に答えます。

テストでコンポーネントを設定・作成します

「TestBedとコンポーネントフィクスチャ」はCoddyKit上の無料Angular Academyレッスンです。これはレッスン1/4です。下記で完全なレッスンを無料で読むことができます。その後、ブラウザ内の組み込みコードエディタと24時間対応のAIチューターでハンズオン演習できます。これはAngular Academy学習パスの一部であり、ウェブとCoddyKitアプリ全体で進捗が同期されます。 Angular Academyコースには全4レッスンが含まれています。

TestBed が存在する理由

Angular コンポーネントは、依存性の注入、変更検知、テンプレートコンパイラーなどのフレームワーク機能に依存しています。これらを分離してテストするには、小さな Angular 環境が必要です。TestBed は、テストごとにこの環境を構築する Angular の主要なテストユーティリティです。

一時的な NgModule を設定してコンポーネントをコンパイルし、コンポーネントを操作するためのハンドルを提供します。

configureTestingModule

TestBed.configureTestingModule() では、テストに必要なもの（テスト対象のコンポーネント、プロバイダー、インポート）を宣言します。スタンドアロンコンポーネントの場合は、コンポーネント自体を imports に指定します。

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

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

コンポーネントフィクスチャの作成

TestBed.createComponent(CounterComponent) は ComponentFixture を返します。フィクスチャはリモコンのようなもので、コンポーネントインスタンス、ネイティブ DOM 要素、変更検知の仕組みをまとめて扱えます。

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

let fixture: ComponentFixture<CounterComponent>;

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

コンポーネントインスタンスへのアクセス

fixture.componentInstance は実際のクラスインスタンスです。通常の TypeScript と同じように、メソッドを呼び出したりプロパティを直接読み取ったりできます。

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

detectChanges による描画の実行

新しく作成したフィクスチャは、まだ描画されていません。fixture.detectChanges() を呼び出すと、変更検知とコンポーネントの ngOnInit が実行され、データが 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 と debugElement

fixture.nativeElement は生の DOM ノード（HTMLElement）です。fixture.debugElement は Angular のより高機能なラッパーで、ディレクティブによる検索、注入されたサービスの読み取り、バインディングの検査ができます。

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

テストモジュールのプロバイダー

コンポーネントがサービスを注入する場合は、providers を通じてサービスを提供します。実際のサービスでもテストダブルでも構いません。ここでは単純な例として実際のサービスを提供します。

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

外部テンプレート用の compileComponents

Angular CLI のテスト設定を使わずにインラインではない templateUrl/styleUrls を使用する場合、テンプレートは非同期でコンパイルする必要があります。await TestBed.compileComponents() を呼び出してください。CLI を使う場合、通常は自動的に行われます。

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

完全な最小テスト

設定、作成、変更検知、アサーションを順に行います。これは、ほぼすべての 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

設定済みのプロバイダーを取得するには、TestBed.inject(Token) を使います。これは非推奨になった TestBed.get() に代わる現在の方法です。

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

テスト間のリセット

TestBed は各テストの前にモジュールを自動的にリセットするため、プロバイダーやコンポーネントの状態が漏れることはありません。そのため、グローバルで一度だけ設定するのではなく、beforeEach 内で設定します。

クイックチェック

createComponent の直後に何が起きるかを確認しましょう。

まとめ

テストの基本を学びました。TestBed.configureTestingModule() で環境を構築し、createComponent() で ComponentFixture を取得し、detectChanges() で描画します。クラスには componentInstance、DOM には nativeElement/debugElement、サービスには TestBed.inject() を使います。

よくある質問

「TestBedとコンポーネントフィクスチャ」レッスンは無料ですか？

はい。「TestBedとコンポーネントフィクスチャ」の完全なテキストはこのウェブで無料で読めます。インタラクティブに演習し（組み込みコードエディタと24時間対応のAIチューター）、Angular Academyコースの残りをアンロックするには、CoddyKit PROにアップグレードしてください。 Angular Academyコースには全4レッスンが含まれています。

「TestBedとコンポーネントフィクスチャ」で何を学びますか？

テストでコンポーネントを設定・作成しますブラウザで直接実行するハンズオンコードでAngular Academyを演習し、24時間対応のAIチューターがレッスンを進める中での質問に答えます。

Angular Academyを始めるのに経験は必要ですか？

事前経験は必要ありません。CoddyKitのAngular Academyは初級者から上級者向けに構成されているため、ここから始めるか最初から始めて、自分のペースで進むことができます。これはレッスン1/4です。

「TestBedとコンポーネントフィクスチャ」レッスンにはどのくらい時間がかかりますか？

ほとんどのCoddyKitレッスンは約5～10分かかります。各レッスンはコンパクトでインタラクティブなので、着実に進歩し、ウェブとアプリ全体で正確に前回の場所から再開できます。

このAngular Academyレッスンでコードを書いて実行できますか？

はい。すべてのAngular Academyレッスンに組み込みコードエディタが含まれているため、ブラウザでリアルコードを書いて実行し、即座のAIフィードバックを取得できます。ローカル設定は不要です。

このコースのすべてのレッスン

← Angular Academyに戻る