AngularでJasmineを使ってユニットテストをやってみた！

2021 12/11

2020年3月5日 2021年12月11日

悩んでいる男の子

AngularでJasmine(ジャスミン)を使ってみたいんだけど、使い方が分からないから教えてもらえないかな？
具体的なソースコードもあると嬉しいな。

こんな悩みを解決します。

本記事の内容

Jasmineとは
Jasmineの使い方
Jasmineの具体的なソースコード

本記事の執筆者

プロフィール

長身ガリガリ自称イケメン(1993/4/1生)
元エンジニア(歴7年)、資格保有数約20個(IT系以外も含む)
副業(物販)5か月目で月利30万円⇒脱サラ
物販、システム開発、アフィリエイト、投資を細々とやっています。
物販は彼女と楽しみながらやってます！

プロフィールページへ

今回は、AngularでJasmineを使ってユニットテストをやってみます。

Jasmineを使うにあたって

実験用のアプリが必要なので、Angularアプリを用意してください。

いずみん

実験用のアプリがあれば何でもOKです！

AngularでのJasmineの使い方

Angularでは、デフォルトでJasmineが組み込まれているので実行も簡単です。

ng test

上記のコマンドでJasmineを実行できます。

Jasmineで実行されるテストファイル

テスト対象となるファイルは「…spec.ts」というファイルです。

specファイルは「ng g c」コマンドでコンポーネントを作成すると自動的にされます。

specファイルに記載されているテストがJasmineによってすべて実行されます。

実際にJasmineを使ってみた

僕の作ったアプリは説明の都合上、「app.component.spec.ts」のみにしています。

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

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

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

});

デフォルトから不要なテストケースを削除した状態です。

「コンポーネントがちゃんと作成されているか？」のテストだけが記載されています。