はじめに
こんにちは。フロントエンドエンジニアのすずきです。
今回は今年読んだ本の一冊である「フロントエンド開発のためのテスト入門 今からでも知っておきたい自動テスト戦略の必須知識」について書こうと思います。
この記事はエモーションテックアドベントカレンダー 2023の10日目の記事です。
きっかけ
私はエモーションテックに入社して、初めて仕事でユニットテストのコードを書きました。
それまではチュートリアルの簡単なものしか書いたことがなかったので、入社後は日々勉強しながら実際のプロジェクトでテストを書いています。
入社してしばらく経ち、もう少しフロントエンドのテスト全体について知りたいと思いチームのメンバーに相談したところ、勧めてもらったのが「フロントエンド開発のためのテスト入門」です。
会社の本棚にあるとのことで、早速借りて帰りました。
内容
本の目次は下記の通りです
第1章 テストの目的と障壁
第2章 テスト手法とテスト戦略
第3章 はじめの単体テスト
第4章 モック
第5章 UIコンポーネントテスト
第6章 カバレッジレポートの読み方
第7章 Webアプリケーション結合テスト
第8章 UIコンポーネントエクスプローラー
第9章 ビジュアルリグレッションテスト
第10章 E2E テスト
感想
全体的に実務に応用できそうなサンプルコードが豊富でした。特に結合テストの章からはサンプルアプリケーションも登場し、より一層理解が深まりました。
ビジュアルリグレッションテストや E2E も手順が細かく書いてあり、独力で一通りのテストを試すことができます。
テストを書き始めた頃に読みたかった基礎的な内容から、今後試したいと思っていた手法まで網羅的に学ぶことができました。
また、単にテストコードの書き方が紹介されているわけではなく、テストの目的やその目的に合わせた戦略の立て方についても書かれており、学びが多い一冊でした。
特に印象に残った内容は今業務で書いているユニットテストの部分が多かったですが、VRT や E2E の仕組みは既にプロジェクトにあるので、自分でもコードを書いてみたいですし、その時にまたこの本を読み直したいと思います。
ここからは特に印象に残った部分について少し詳しく書いていきます。
第1章 テストの目的と障壁
第1章にはなぜテストを書くのか、テストを書く上でどんなことが壁になるのかが書かれています。
この中では、テストを書く文化がチームに根付くか否かは初期設計段階で決まるという考えが書かれています。
前例となるテストコードを早いうちから書いておくことが重要とのことです。
あまり意識したことはありませんでしたが、たしかに私もテストはメンバーが書いてくれたものを見ながら勉強しましたし、すでに書いてある方が自分が変更を加えたときもテストを書こうという気持ちになります。
プロダクト作り始めの時期は忙しいことが多く、とにかく機能を作って後からまとめてテストを書く戦略もありますが、作り始めこそテストをちゃんと書こうと改めて思いました。
第2章 テスト手法とテスト戦略
第2章ではテストの手法とその目的が、テストピラミッドなど戦略モデルの紹介とともに書かれています。
この章の最後に「テストを書きすぎていないかの見直しを」というコラムが載っているのですが、その中に書かれている「思い切って減らしていくことも大切」という言葉が印象的でした。
テストが書けるようになってきた頃、書く楽しさが先行してしまい、必要以上にテストを書いてしまった時期もありました。また、テストのおかげで壊れたことに気付いたという経験をすると、テストを書かないと不安になります。
ですが、プロジェクトに与えられた時間は有限ですし、テストを書くのにはそれなりに労力が要ります。
弊社には QA エンジニアもいますし、時にはテストを減らす勇気を持って、チームのみんなでテストのコストパフォーマンスに向き合っていきたいなと思ったコラムでした。
第3章 はじめの単体テスト
第3章では基本の単体テストの書き方がサンプルコードとともに紹介されています。
テストを書き始めた頃は非同期処理のテストに躓くことが多かったのですが、この本にはサンプルコードがたくさん載っているので、テストを書き始めた頃に読みたかったなと思いました。
非同期処理のテストでも特に Reject を検証するテストの書き方が印象に残っています。
try…catch による例外スローを検証するときに、 expect.assertions() を宣言してアサーションが実行されること自体を検証するという方法だったのですが、これは初めて知りました。
try ブロックで例外を発生させ、catch ブロックにアサーションを書く方法は私も使うのですが、テストをパスしたと思ったら catch ブロックのアサーションに到達せず終了しただけということがよくあります。
アサーションの期待値をテストが落ちるものに変更してそこに到達しているか確認していたのですが、忘れてしまうこともあるし、メンバーのコードをレビューしていて catch ブロックのアサーションに到達していないテストを見かけることもあります。
expect.assertions() を宣言することでミスが防げるのは嬉しいなと思いました。
この方法は早速使っています。
第5章 UIコンポーネントテスト
第5章では UI コンポーネントのテストについて、主に testing-library を使った書き方が紹介されています。
testing-libraray は最近使い始めたので全体的に勉強になったのですが、特に新しく知ることが多かったのはアクセシビリティを考慮したテストの書き方です。
なるべく role を参照するクエリを使ってテストを書くようにはしていますが、そのようなテストを書く時に使える技がこの章に載っています。
logRoles 関数を使ってロールやアクセシブルネームを調べる方法や、aria 属性値を使った絞り込みの方法は知らなかったので、大変勉強になりました。
第6章 カバレッジレポートの読み方
第6章ではカバレッジレポートの見方が説明されています。
私はここでカスタムレポーターというものを初めて知りました。
デフォルトのレポートしか見たことがなかったので、本に載っているカスタムレポーターの他にもいろいろ調べてみたのですが、各レポートに様々な機能が備わっていて、いろんな種類を試してみたいと思いました。
また、見た目のバリエーションも豊富で、カスタムレポーターを導入することでテストを書くモチベーションの向上にもつながるのでは、と思いました。
おわりに
ちょうどこの本を読む前に、著者である吉井健文さんがご登壇されていた「Quramy×Takepepeが語る、フロントエンドテストの最前線」というイベントの配信をチームで見て話し合う会がありました。 この本を読んであの頃より少しは手法や戦略について詳しくなれたと思いますし、選択肢が増えたと思うので、これからもチームのみんなと一緒にテストの戦略について考え続けていきたいと思います。
エモーションテックでは顧客体験、従業員体験の改善をサポートし、世の中の体験を変えるプロダクトを開発しています。プロダクトに興味のある方、この記事や他の記事を見て少しでも弊社に興味をもっていただけましたら、ぜひ採用ページからご応募をお願いいたします。
