フロントエンド開発のためのテスト入門を読み終えたので、読んでいく中ですごい学びになった考え方や内容、こんな書き方もできるんだとということまで、 自身のメモがてら書いていきたいと思います。

１章 テストの目的と障壁

この章では、本書で扱うテスト手法や使用するライブラリ、ツールについての紹介がされていました。 この章では特に、「なぜテストを書くのか」「どうすればテストを書く習慣ができるのか」といったテストを導入するにあたってぶつかる問題が解説されていました。
最近ではテストを導入するのが「当たり前」みたいな流れがあり、「なぜそのテストを導入するのか」みたいなことは考えずに「とりあえず入れるか」といったことも多いのではないでしょうか？ 私自身もテストを導入する時にあまり「なぜ」を考えてこれておらず、「とりあえず入れてみる」側だったので、この章を読んで自身・チームの今置かれている状況に応じた、テスト戦略を立てるために何を担保したいのかを考える上で非常に重要なことなんだと再認識できました。 内容は割愛しますが、主なポイントは以下でした

• 事業の信頼のため
• 健全なコードを維持するため
• 実装品質に自信を持つため
• 円滑なコラボレーションのため
• リグレッションを防ぐため

また、テストを書く習慣・全員が書けるには？というところではまずは土台となるものを用意して、「前例があればテストに不慣れでも参考でかける」ということが書かれており、 実際に私がPHPのテストを書く時は他のテストコードを参考にしていたりするので、確かにーと思いました。

２章　テスト手法とテスト戦略

この章では、テストで担保したい範囲とその目的が紹介されていました。 私自身は、フロントエンドのテストでは、「ユーザーの操作による画面上のフィードバックを担保できていればいい」とこの本を読むまでは思っていました。 しかし、それだけでは不十分で、アクセシビリティテストなど非機能要件に対するテストも最近では熱くなっているということを知りました。

３章 はじめの単体テスト

この章では、主にどのようにテストを始めたらいいのかといった導入部分について解説されていました。 内容は割愛しますが、各パターンでどのようにテストすればいいのか、サンプルコード付きで詳細に解説されており、導入としては非常に優しく入りやすい印象を受けました。

４章 モック

この章では、どのような時にモックを使用するとよいか、恩恵を受けやすいかといったことが解説されています、 例えば、テスト環境に対するAPIリクエストの成功・失敗パターンのテストをしたいときなどは、モックを使用したいですね。 ここのモックのお話はおそらく、後ほど登場するMSWの伏線にもなっているんだろうなーと読みながら思いました。

5章 UIコンポーネントテスト

この章では、そもそものフロントエンドにおけるUIコンポーネントとは、MPA・SPAとはといった基礎的な内容からそれをどのようにテストするのかが解説されていました。

カラムに書かれていた、クエリーの優先順位のお話は特に覚えておきたい内容で、Testing Libraryのコーディング原則に「ユーザー操作を限りなく再現する」とあるように、要素取得するAPIは優先順位通りに使用することが望ましいです。 他にも、こういう書き方ができたのか！といった内容がいくつかあったのでメモしておきたいと思います。
まずは、TextBoxの要素を取得する時の方法です。僕は今まで、Labelから取得していたのですが、getByRoleの第２引数にnameを指定して取れるということを初めて知りました。

次に、formに対するロールのネーム付けです。
HTMLの要素のid属性が一意である必要があることと、React18から追加されたuseIDを利用して、idを自動生成して管理するという方法です。 formのにaria-labelledbyと他要素にidを付与することでformロールが適用されて、テストでも使えるという点です。 アクセシビリティ的にもいいですし、テスト観点でも使いやすくなるのでこれは使っていきたいなと思いました。

６章 カバレッジレポートの読み方

主に、カバレッジレポートの概要と導入の仕方、読み方などが解説されていました。 カバレッジレポートはあくまで100%を目指すものではなく、どの実装範囲にテストが足りてなさそうかの指標にしたら良さそうだなと思っていましたが、似たようなことが書かれていました。

7章 Webアプリケーション結合テスト

この章あたりから、基礎的な内容はもちろん、実践向けに使えるちょっとしたテクニックみたいなものも織り交ぜられていてなかなか読み応えがありました。

React Hook Formの導入の所で、Presentation層ではなくいわゆるContainer層のポジションにonSubmitやonValidなどの処理を委譲しているのがいいなと思いました。 その他にもインタラクションテストのための準備や書き方が一覧されており、またMSWとの組み合わせ方も参考になりました。 個人的にはNextのページ単位でMSWでmockしてかつStorybookで確認までしたいなーと思っているので、ちょっと試してみたいと思いました。

8章 UIコンポーネントエクスプローラー

この章では、Storybookを活用したUIコンポーネントの確認とテストの解説でした。 近年ではフロントエンド開発には必須となりつつあるStorybookですが、そこにさらにインタラクションテストを加えてよりブラウザに近い環境でテストをしようという流れがあります。 Storybookには、純粋にUIコンポーネントとして表示する機能と、Play functionを利用してユーザーの操作を擬似的に再現してそれをテストに再利用するという内容です。 難しいのが、Storybookだけでテストも行えるし(Test runner)、それをjestで再利用してテストするという選択肢も取れるというところです。 この章でも解説されていましたが、テストの目的や何を担保したいのか、エンジニアの工数や経験値的にどちらがよいか など、いろんな観点を加味して選択すればよさそうです。

9章VRT、１０章 E2Eテスト

VRTとE2Eテストについては、読んではいるもののまだ実戦でどう導入しようか・活用しようかみたいなところが詰めれていないところもあったりするので、再度読み直してからここを自身の考えも込めて書きたいと思い、空白としておきます。 (未来の自分に書くことを託す)