Angular Advent Calendar ６日目の記事です。昨日は @ver1000000 さんでした。
本日は、タイトルの通り、Jestについてです。
なぜ、この記事を書こうと思ったのか背景を少し説明しますね。
今の現場でもうすぐ1年になるのですが、ものすごく丁寧にテスト書いてるんですね。
主にUnit Testなんですが、表示用ComponentはTesting Library、その他のContainer,ComponentStoreなどはJestを使っています。
フリーランスやって長いですが、こんなにテストを書く現場は珍しいです。
そしてテストがしっかり書かれてるので、不具合がほとんどない。
テストをしっかり書くことで開発に集中できるというのを体験できる現場です。
そこで、タイトルのテストが印象深かったので記事にしました。
どんなテストなの？
まず、処理の流れは、こんなイメージ
表示用Componentでボタンクリックする
↓↓↓
親のContainerがそれを受け取って、ComponentStoreのメソッド(API)呼び出す
この処理で親Containerで子Componentのinstanceを作成してemitさせて、親Containerで受け取り側メソッドが呼ばれたかをテストする
何で、そんなテストが必要なの？
例えば、意図せず変更してしまった場合にこのテストがあると安心。
emitで引数がある場合は、VSCode使ってるとエディターにエラーが表示されるので気づくが引数が無いとエラーにならないのでデグレする可能性があるため。
emitに引数ある場合（画面右側がエラーになってる）
emitに引数が無い場合（画面右側がエラーになってない）
テストの書き方
beforeEachのdeclarationsに、親Contaier, 子Componentを記載します。
そして、子Componentのemitは5行目になります。
初見殺し感がすごいですよね。私も最初見た時は驚きました。
実際のコード
Stackblitzはこちらになります。（テストは、sample-container.spec.tsです）
新しく、Terminal開いて、yarn testするとテストが成功してるのも確認できると思います。
最後に
このようなテストまで実施してるので、Unit test書くのは少し大変ですが、お陰でデグレもなく開発に集中できています。
これを読んで、「テスト書くの頑張ってみるか〜」と思って頂ければ嬉しいです。
明日は、@rysiva さんです！
コメント