スポンサーリンク

[Angular] デフォルトのテストコードで基本を覚える

概要

ng new [アプリ名]で作ったときに、デフォルトで入っているテストのコード「app.component.spec.ts」を解読しながら、テストの基礎的な書き方を覚えていきます。

デフォルトプロジェクトのテストコード

ソースコードを丸ごと持ってきたのが以下の通りです。

import { TestBed } from '@angular/core/testing';
import { RouterTestingModule } from '@angular/router/testing';
import { AppComponent } from './app.component';

describe('AppComponent', () => {
  beforeEach(async () => {
    await TestBed.configureTestingModule({
      imports: [
        RouterTestingModule
      ],
      declarations: [
        AppComponent
      ],
    }).compileComponents();
  });

  it('should create the app', () => {
    const fixture = TestBed.createComponent(AppComponent);
    const app = fixture.componentInstance;
    expect(app).toBeTruthy();
  });

  it(`should have as title 'defaultApp'`, () => {
    const fixture = TestBed.createComponent(AppComponent);
    const app = fixture.componentInstance;
    expect(app.title).toEqual('defaultApp');
  });

  it('should render title', () => {
    const fixture = TestBed.createComponent(AppComponent);
    fixture.detectChanges();
    const compiled = fixture.nativeElement as HTMLElement;
    expect(compiled.querySelector('.content span')?.textContent).toContain('defaultApp app is running!');
  });
});

このコードを上から順にみていきます。

解説

describe

describe('AppComponent', () => {

describe関数は、関連するテストケースをまとめたものをグループ化して、それに名前を付けています。
第1引数が名前で、第2引数にテストケースの関数です。

beforeEachとasync

beforeEachは、テストケースを実行する前の初期化処理をこの中で書きます。
asyncは非同期処理が終わるまで、次の処理に進まないように指示しています。

TestBed.configureTestingModuleとawait

TestBed.configureTestingModuleでは、テストで使用するモジュールや、テスト対象のコンポーネントを指定したりします。その後、コンパイルで利用できるようにします。

awaitは非同期処理に対して先頭に付けて、その非同期処理が終わるまで、次の処理に進まないようにしている。

it

itは、1つのテストケースを表現します。第1引数にテストケースの名前や内容、第2引数にテストケースを処理するコードを書きます。

TestBed.createComponent

createComponentは、指定したコンポーネントのインスタンスのようなものを作ります。
その後の処理のfixture.componentInstanceがインスタンスのプロパティです。

expect(app).toBeTruthy()

これは、appがTrueとなる値になっているかを判断し、TrueであればこのテストケースがOKであることになります。
expectには様々なテスト結果を確認する関数があり、それを使って、結果が想定と一致しているかを確認します。