Angularで一発でJest化するSchematicsを作った

株式会社CauchyE CEO, CTOの 木村優 です。
Angularで一発でJest化するSchematicsを作ったのでご紹介。

Schematicsって？

AngularにはSchematicsという便利な仕組みがあります。
公式の@angular/cliに備わっている@schematics/angularの機能により、ボイラープレートコードを一括で自動生成いわゆる「スキャフォールディング」ができるだけでなく、自分たちで独自にSchematicsを作って拡張することができるのです。

AngularとJest

Angularではデフォルトで単体テスト用のパッケージとしてKarmaとJasmineが採用されています。
Karmaはテストランナー、Jasmineはテストフレームワークとしての役割を持ちます。

しかしながら、Karmaはブラウザベースでの実行となるため(Headlessブラウザを使えばCI環境でも使えはしますが)いかんせん起動に時間がかかります。

対して、テストフレームワークJestはブラウザベースでの実行ではなくNode.JSベースでの実行であるため、Karmaと比べて起動がはやく、またJest自体のユーザーが多いため様々なJestエコシステムの資源を利用したりすることができます。

そのJestを、KarmaとJasmineの代わりに、Angularで使えないか？
それを実現したのが、すでにある@angular-builders/jestとjest-preset-angularです。

課題感

@angular-builders/jestとjest-preset-angularを使えば、AngularプロジェクトにてJestで単体テストを行うことができます。

しかしながら。。。

。。。

設定が非常に面倒くさい。。。

そう。非常に面倒くさいのです。

どれだけ面倒というと、

[angular project root]/jest.config.js

require('jest-preset-angular/ngcc-jest-processor');

module.exports = {
  preset: 'jest-preset-angular',
  setupFilesAfterEnv: ['<rootDir>/[angular project root]/src/setup-jest.ts']
};

こういうファイルをコピペでつくり、

[angular project root]/src/setup-jest.ts

import 'jest-preset-angular/setup-jest';

こういうファイルをコピペでつくり、

angular.json

"test": {
  "builder": "@angular-builders/jest:run",
  "options": {
    "configPath": "./jest.config.js"
  }
}

angular.jsonに上記の追記をコピペし、

tsconfig.spec.json

"types": [
  "jest"
]

tsconfig.spec.jsonに上記の追記をコピペしなければいけません。

参考: https://blog.lacolaco.net/2021/06/angular-jest-setup/

明らかに面倒ですね？

ソリューション

お待たせしました。ソリューションです。

@angular-jest/schematics

これを使えば、

ng add @angular-jest/schematics

これをやるだけで、Jestに必要なパッケージのインストールと、ルートプロジェクトでのJestの利用に必要な設定が完了します。

Angularワークスペース内の既存のプロジェクトにてJest化をしたいときは

ng g @angular-jest/schematics:add-jest {{YOUR_PROJECT_NAME_GOES_HERE}}

これをやれば一発です。

さらになんと、Angularワークスペース内の既存のプロジェクトにて、Karma・Jasmine関連ファイルを削除したいときは

ng g @angular-jest/schematics:remove-karma {{YOUR_PROJECT_NAME_GOES_HERE}}

これをやれば一発です。Karma・Jasmineを利用するプロジェクトがワークスペース内に存在しないことを検知した場合、Karma・Jasmine関連のパッケージをアンインストールするオプションも備わっています。

こういうJest化用のSchematics、

jest-schematic

昔はあったみたいなんですが更新がめっきりされなくなっていたので、作りました。

まとめ

Angularの単体テストをJestに設定する作業を一発でできるようにするSchematicsができました。

使い方に関してはREADME.mdをご覧ください。

@angular-jest/schematics

株式会社CauchyEはAngularエコシステムにも貢献していく所存です。

CauchyE は一緒に働いてくれる人を待ってます！

ブロックチェーンやデータサイエンスに興味のあるエンジニアを積極的に採用中です！
以下のページから応募お待ちしております。
https://cauchye.com/company/recruit