はじめに
最近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を使っていきたいところ。
それでは今回はこの辺で。