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で単体テストを行うことができます。
しかしながら。。。
。。。
設定が非常に面倒くさい。。。
そう。非常に面倒くさいのです。
どれだけ面倒というと、
require('jest-preset-angular/ngcc-jest-processor');
module.exports = {
preset: 'jest-preset-angular',
setupFilesAfterEnv: ['<rootDir>/[angular project root]/src/setup-jest.ts']
};
こういうファイルをコピペでつくり、
import 'jest-preset-angular/setup-jest';
こういうファイルをコピペでつくり、
"test": {
"builder": "@angular-builders/jest:run",
"options": {
"configPath": "./jest.config.js"
}
}
angular.jsonに上記の追記をコピペし、
"types": [
"jest"
]
tsconfig.spec.jsonに上記の追記をコピペしなければいけません。
参考: https://blog.lacolaco.net/2021/06/angular-jest-setup/
明らかに面倒ですね?
ソリューション
お待たせしました。ソリューションです。
これを使えば、
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、
昔はあったみたいなんですが更新がめっきりされなくなっていたので、作りました。
まとめ
Angularの単体テストをJestに設定する作業を一発でできるようにするSchematicsができました。
使い方に関してはREADME.mdをご覧ください。
株式会社CauchyEはAngularエコシステムにも貢献していく所存です。
CauchyE は一緒に働いてくれる人を待ってます!
ブロックチェーンやデータサイエンスに興味のあるエンジニアを積極的に採用中です!
以下のページから応募お待ちしております。
Discussion