【Jest】AngularでJestを使用する - 開発覚書はてな版

Angular で Jest を使用してユニットテストを実行するサンプルを作成しました。

ユニットテストを全て実行していくと、プロジェクトが肥大化していくにつれてスローテスト問題にぶつかります。
CI実行が５～１０分が当たり前になり、プルリクエストがCI待ちになるケースがあります。
Jestにすることでテスト実行時間が大幅に改善されます。

Jestを実行するにあたって、ライブラリやテスト設定まわりの変更が必要になります。
ただ、基本的にはテストコードについてはそのまま流用可能です。

以下に主観ですが、メリット・デメリットを記載します。

Angularプロジェクトに以下の設定をしていきます。基本的には以下の記事通りに設定することで対応可能です。

jest と jest-preset-angular を追加する。

src/setupJest.ts を追加。ファイルの内容は以下の通りです。

import 'jest-preset-angular';
import './jestGlobalMocks';

src/jestGlobalMocks.ts を追加。ファイルの内容は以下のURLの通りです。

以下の設定を package.json に追加する。

{
  "jest": {
    "preset": "jest-preset-angular",
    "setupTestFrameworkScriptFile": "<rootDir>/src/setupJest.ts"
  }
}

yarn jest を実行することで単体テストを実行します。

f:id:kakkoya:20190126144258p:plain