AngularでJestを使えるようにする
はじめに
最近React触るついでにJestをやってみたところ非常に快適だったためAngularでもやってみる。
とりあえず動くとこまで試してみる。
TL;DR.
セットアップ
いつも通りプロジェクトを作るとこから……の前に必要なパッケージをインストールしておく。
セットアップは下記で完了。
$ npm install -g @briebug/jest-schematic # あとはいつも通りプロジェクトを作って $ ng new ng-jest > 聞かれるのはお好みで $ cd ng-jest # さっきインストールしたパッケージを使ってjestに変える $ ng g @briebug/jest-schematic:add $ ng add @briebug/jest-schematic > karma用のファイルが削除され、jest用のファイルが作成される
tsconfig.spec.jsonの修正
typesにあるjasmine
をjest
に変更。
変更しなくても一応動くっぽい。
... "types": [ "jest", "node" ], ...
動かしてみる
ここまでやればnpm test
でJest
を使ったテストが走るようになる。
$ npm test > > ng-jest@0.0.0 test .../ng-jest > > jest > PASS src/app/app.component.spec.ts > AppComponent > ✓ should create the app (132ms) > ✓ should have as title 'ng-jest' (30ms) > ✓ should render title in a h1 tag (28ms) > Test Suites: 1 passed, 1 total > Tests: 3 passed, 3 total > Snapshots: 0 total > Time: 2.808s, estimated 5s > Ran all test suites.
ちなみにng test
では動かない。
デフォではkarma
を使おうとして失敗する。
$ ng test > An unhandled exception occurred: Cannot find module 'karma' > Require stack: > ...
おまけ:どうしてもng test
で動かしたい場合
パッケージのインストールとangular.json
の修正が必要。
インストールとangular.json
の修正は下記の通り。
# @types/jestはなくても可 $ npm i -D jest @angular-builders/jest @types/jest ... "test": { // @angular-devkit/build-angular:karmaを下記に変更 "builder": "@angular-builders/jest:run", ...
snapshotテストをやってみる
Jest
使うのでせっかくだからsnapshotテストもやってみる。
とりあえずsnapshotテストの項目を追加して実行してみる。
it('snapshot test', () => { const fixture = TestBed.createComponent(AppComponent); fixture.detectChanges(); const compiled = fixture.debugElement.nativeElement; expect(compiled).toMatchSnapshot(); });
__snapshots__
フォルダにapp.component.spec.ts.snap
というファイルができていればOK。
ファイルの中身は下記の通り。
// Jest Snapshot v1, https://goo.gl/fbAQLP exports[`AppComponent snapshot test 1`] = ` <div id="root3" ng-version="8.2.9" > <div style="text-align:center" > <h1> Welcome to ng-jest! </h1> <img alt="Angular Logo" src="data:image/svg+xml;base64,PHN2ZyB4bWxucz0iaHR0cDovL3d3dy53My5vcmcvMjAwMC9zdmciIHZpZXdCb3g9IjAgMCAyNTAgMjUwIj4KICAgIDxwYXRoIGZpbGw9IiNERDAwMzEiIGQ9Ik0xMjUgMzBMMzEuOSA2My4ybDE0LjIgMTIzLjFMMTI1IDIzMGw3OC45LTQzLjcgMTQuMi0xMjMuMXoiIC8+CiAgICA8cGF0aCBmaWxsPSIjQzMwMDJGIiBkPSJNMTI1IDMwdjIyLjItLjFWMjMwbDc4LjktNDMuNyAxNC4yLTEyMy4xTDEyNSAzMHoiIC8+CiAgICA8cGF0aCAgZmlsbD0iI0ZGRkZGRiIgZD0iTTEyNSA1Mi4xTDY2LjggMTgyLjZoMjEuN2wxMS43LTI5LjJoNDkuNGwxMS43IDI5LjJIMTgzTDEyNSA1Mi4xem0xNyA4My4zaC0zNGwxNy00MC45IDE3IDQwLjl6IiAvPgogIDwvc3ZnPg==" width="300" /> </div> <h2> Here are some links to help you start: </h2> <ul> <li> <h2> <a href="https://angular.io/tutorial" rel="noopener" target="_blank" > Tour of Heroes </a> </h2> </li> <li> <h2> <a href="https://angular.io/cli" rel="noopener" target="_blank" > CLI Documentation </a> </h2> </li> <li> <h2> <a href="https://blog.angular.io/" rel="noopener" target="_blank" > Angular blog </a> </h2> </li> </ul> </div> `;
テストに失敗する or テストコードの警告を消したい場合
import 'jest'
を追記すればOK.
ちゃんとした解決法じゃないのかもしれないけど、一旦これで解決できるので良しとする。
まとめ
AngularでJestを使えるようにした。
snapshotもできるしメッセージもわかりやすい(と思っている)ので、
これからはJestを使っていきたいところ。
それでは今回はこの辺で。