Angular テストのデバッグを効率化する：特定のテストスペックのみを実行する方法

2024-04-02

Angular CLI で特定のテストスペックのみを実行する方法

テストスペックファイルを直接指定する

ng test コマンドに、テストスペックファイルのパスを直接指定できます。例えば、my-spec.ts というテストスペックファイルのみを実行したい場合は、以下のコマンドを実行します。

ng test my-spec.ts

複数のテストスペックファイルを指定することもできます。

ng test my-spec.ts another-spec.ts

テストスペック名の部分一致を使用する

ng test --grep my

正規表現を使用することもできます。

ng test --grep "my.*spec"

--filter オプションを使用する

ng test --filter "my"

除外したい場合は、--exclude オプションを使用します。

ng test --exclude "my"

テストスイートを作成して、テストスペックをグループ化することができます。テストスイートを指定してテストを実行すると、そのスイートに含まれるテストスペックのみが実行されます。

テストスイートを作成するには、ng generate test-suite コマンドを使用します。例えば、my-suite というテストスイートを作成したい場合は、以下のコマンドを実行します。

ng generate test-suite my-suite

テストスイートにテストスペックを追加するには、--spec オプションを使用します。

ng generate test my-spec --spec-path my-suite

テストスイートを実行するには、ng test コマンドにテストスイートの名前を指定します。

ng test my-suite

Angular CLI では、さまざまな方法で特定のテストスペックのみを実行できます。上記の方法を参考に、自分に合った方法を選択してください。

my-spec.ts

describe('My Spec', () => {
  it('should do something', () => {
    expect(true).toBeTruthy();
  });
});

another-spec.ts

describe('Another Spec', () => {
  it('should do something else', () => {
    expect(false).toBeFalsy();
  });
});

package.json

{
  "name": "my-app",
  "version": "0.0.0",
  "scripts": {
    "test": "ng test"
  },
  "dependencies": {
    "@angular/cli": "^14.0.0",
    "@angular/core": "^14.0.0",
    "jasmine": "^4.0.0",
    "jasmine-core": "^4.0.0",
    "karma": "^6.0.0",
    "karma-chrome-launcher": "^3.0.0",
    "karma-jasmine": "^4.0.0",
    "karma-spec-reporter": "^0.0.32",
    "typescript": "^4.0.0"
  }
}

テストスペックファイルを直接指定する

ng test my-spec.ts

テストスペック名の部分一致を使用する

ng test --grep my

--filter オプションを使用する

ng test --filter "my"

テストスイートを使用する

ng generate test-suite my-suite
ng generate test my-spec --spec-path my-suite
ng test my-suite

実行結果

$ ng test my-spec.ts

PASS ./my-spec.ts
✓ should do something (10ms)

-----------------------
Total: 1 test, 1 assertion, 0 failures, 0 errors
Finished in 0.02s

$ ng test --grep my

PASS ./my-spec.ts
✓ should do something (10ms)

-----------------------
Total: 1 test, 1 assertion, 0 failures, 0 errors
Finished in 0.02s

$ ng test --filter "my"

PASS ./my-spec.ts
✓ should do something (10ms)

-----------------------
Total: 1 test, 1 assertion, 0 failures, 0 errors
Finished in 0.02s

$ ng generate test-suite my-suite
$ ng generate test my-spec --spec-path my-suite
$ ng test my-suite

PASS ./my-spec.ts
✓ should do something (10ms)

-----------------------
Total: 1 test, 1 assertion, 0 failures, 0 errors
Finished in 0.02s