Angular テストを効率化：Karma と Jasmine を使用して単一のテストファイルを実行する

2024-04-02

Angular で単一のテストファイルを実行する

Angular CLI と Jasmine を使用して単一のテストファイルを実行するには、以下の手順に従います。

テストファイルの選択

テストしたいファイルを選択します。通常、テストファイルは spec.ts という拡張子が付けられています。

コマンドの実行

以下のコマンドを実行します。

ng test --grep "testFileName"

testFileName は、テストしたいファイル名に置き換えます。

例:

my-component.spec.ts というファイルを実行したい場合は、以下のコマンドを実行します。

ng test --grep "my-component.spec"

テストの実行

コマンドを実行すると、選択したテストファイルのみが実行されます。テスト結果が出力されます。

Karma を使用して単一のテストファイルを実行する

Karma は、Angular アプリケーションのテストスイートを実行するためのテストランナーです。Karma を使用して単一のテストファイルを実行するには、以下の手順に従います。

karma.conf.js ファイルを編集し、テストしたいファイルパスを指定します。
ng test コマンドを実行します。

IDE またはテストランナーを使用する

多くの IDE やテストランナーは、単一のテストファイルを実行する機能を提供しています。詳細は、使用している IDE またはテストランナーのドキュメントを参照してください。

単一のテストファイルを実行する利点

テストを迅速に実行できる
問題の箇所を特定しやすい
テストスイート全体のデバッグ時間を短縮できる

import { Component, OnInit } from '@angular/core';
import { By } from '@angular/platform-browser';

@Component({
  selector: 'my-component',
  templateUrl: './my-component.component.html',
  styleUrls: ['./my-component.component.css']
})
export class MyComponent implements OnInit {

  constructor() { }

  ngOnInit() {
  }

}

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

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

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

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

  it('should have a title', () => {
    const titleElement = fixture.debugElement.query(By.css('h1'));
    expect(titleElement.nativeElement.textContent).toBe('My Component');
  });
});

このコードは、MyComponent というコンポーネントのテストコードです。

テストファイルを実行するには、以下のコマンドを実行します。

ng test --grep "my-component.spec"

このコマンドを実行すると、my-component.spec.ts ファイルのみが実行されます。

テスト結果

テストが成功すると、以下の出力が表示されます。

√ Running test: MyComponent
  ✓ should create (3ms)
  ✓ should have a title (4ms)

Finished in 0.01s

1 test, 2 assertions, 0 failures, 0 errors

テストコードの解説

describe と it を使用してテストケースを定義しています。
beforeEach を使用して、テストケースの前に実行されるコードを記述しています。
expect を使用して、テスト結果を検証しています。

このサンプルコードは、Angular で単一のテストファイルを実行する方法の基本的な例です。詳細については、Angular テストガイドを参照してください。

Angular で単一のテストファイルを実行する他の方法

karma.conf.js ファイルを開き、以下のコードを追加します。

module.exports = function(config) {
  config.set({
    // ...

    singleRun: true,
    singleRun: {
      include: [
        'path/to/my-component.spec.ts'
      ]
    }
  });
};

path/to/my-component.spec.ts は、テストしたいファイルパスに置き換えます。