AngularのユニットテストとE2Eテスト

高品質なWebアプリケーションを継続的に開発・運用していくためには、テストの自動化が不可欠です。
Angularでは、Jasmine/Karmaを用いたユニットテスト環境がデフォルトで整備されており、さらにCypressなどのツールを活用すれば、E2E（エンドツーエンド）テストも容易に実装できます。
本章では、ユニットテストとE2Eテストの基本を実例を交えて解説します。

1. Jasmine/Karmaによるコンポーネントテスト

Angular CLIで生成されるコンポーネントには、テストファイル（.spec.ts）が付属しています。Jasmineはテスト構文を提供し、Karmaがブラウザ上でのテスト実行を担当します。

■ 基本構成

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

  beforeEach(async () => {
    await TestBed.configureTestingModule({
      declarations: [ ComponentName ]
    }).compileComponents();
  });

  beforeEach(() => {
    fixture = TestBed.createComponent(ComponentName);
    component = fixture.componentInstance;
    fixture.detectChanges();
  });

  it('should create', () => {
    expect(component).toBeTruthy();
  });
});

■ DOMの表示をテスト

it('タイトルが表示されるべき', () => {
  const compiled = fixture.nativeElement as HTMLElement;
  expect(compiled.querySelector('h1')?.textContent).toContain('タイトル');
});

2. HttpClientやServiceのテスト

HttpClientを使ったサービスのテストでは、AngularのHttpTestingControllerを利用することで、実際のAPI通信を行わずにリクエストとレスポンスを模擬できます。

■ サービステストの例

import { TestBed } from '@angular/core/testing';
import { HttpClientTestingModule, HttpTestingController } from '@angular/common/http/testing';
import { DataService } from './data.service';
describe('DataService', () => {
  let service: DataService;
  let httpMock: HttpTestingController;
  beforeEach(() => {
    TestBed.configureTestingModule({
      imports: [HttpClientTestingModule],
      providers: [DataService]
    });
    service = TestBed.inject(DataService);
    httpMock = TestBed.inject(HttpTestingController);
  });
  it('should fetch data', () => {
    service.getData().subscribe(data => {
      expect(data).toEqual({ result: 'ok' });
    });
    const req = httpMock.expectOne('/api/data');
    req.flush({ result: 'ok' });
  });
  afterEach(() => {
    httpMock.verify();
  });
});

3. CypressによるE2Eテスト

Cypressは、実際のブラウザ環境でアプリの動作を再現しながらUIをテストできる強力なE2Eテストツールです。
Angular CLIで初期構築時に--e2eを指定するか、手動でインストールして使います。

■ インストール

npm install cypress --save-dev

■ 起動

npx cypress open でGUI起動
npx cypress run でCLIから自動実行

■ 基本テスト例（e2e/spec.cy.ts）

describe('Todoアプリ', () => {
  it('タスクを追加できる', () => {
    cy.visit('http://localhost:4200');
    cy.get('input[name="task"]').type('買い物');
    cy.get('button.add-task').click();
    cy.contains('買い物').should('exist');
  });
});

このように、Cypressでは実際のブラウザでのユーザー操作を自動で検証でき、UIの回帰テストに非常に効果的です。

まとめ

Angularのテスト環境は、ユニット・統合・E2Eそれぞれに対応しており、高品質なアプリ開発を支える仕組みが整っています。
Jasmine/Karmaによるユニットテスト、HttpClientテスト、そしてCypressによるE2Eテストを導入することで、保守性・信頼性の高いアプリケーションを実現できます。