- ■イベント：
- CodeZine Night アーカイブ動画まとめ
- ■講演日時：
- 2023年05月10日（水）19:00 ～ 20:30
- ■講演者 ：
- 吉井健文氏（@takepepe）
- ■タグ
- フロントエンド テスト・品質
講演資料
動画
セッション概要
第1回は、4/24刊行の『フロントエンド開発のためのテスト入門 今からでも知っておきたい自動テスト戦略の必須知識』の著者、吉井さんをお招きしました。
フロントエンドを含むWebアプリケーションの「テスト」に対する関心は年々高まっているものの、自信を持って「テストを実践できている」という現場はまだまだ多くないのが事実。フロントエンドのテストを根付かせるためにも、吉井さんは「テストには目的が大切」と語ります。
今回のセッションでは、『フロントエンド開発のためのテスト入門』で紹介したテストに関するトピックのなかでも、StorybookやWebアクセシビリティなど比較的新しいものを中心に、デモを交えながら紹介します。また本セッションを通じ「テストを書く目的」の大切さを伝えることで、テストを実践するきっかけとなる場を目指します。
参加者の方からの質問の回答（開催中に回答しきれなかったもの）
──テストコードを書きやすくするために、普段の開発のためのコードで意識されていることや参考にされていることはありますか？
関数をうまく使い、抽象化することです。書籍では7章で「セットアップ関数」というテクニックを紹介しています。関数をうまく使いこなす事で、プロダクションコードだけでなく、テストコードのメンテナンス性が高まります。
──テストツールの守備範囲で出てきた表の横軸は、どういった観点で棲み分けがされているのでしょうか。また、テストサイズ（Large、Middle、Small）で言うと、それぞれどのサイズに当てはまるのでしょうか。
横軸はフロントエンドの主要なテストタイプになります。それぞれのテストツールでは、カバーできるテストタイプが異なります。右に行くほどテストサイズが大きいものになり、実ブラウザを使用するテストツールが必要になります。
──フロントエンドのテストツールもいくつかあると思いますが、どのような観点で選ぶとよいでしょうか？
テストツールにはそれぞれ「できる事・できない事」と「得意な事・不得意な事」があります。それぞれのテストツールの特徴を理解し、目的を達成するためのツールを選ぶと良さそうです。
──Storybookがない場合は、Storybookの導入からですか？
はい。既存プロジェクトにインストールする場合、コマンドひとつで導入できるCLIツールが提供されていますので、公式ドキュメントのインストールセクションを参照してください。
──ブラウザごとのテストをStorybookを使用して行うことは可能でしょうか？
はい、Firefox、Chromiumから選べます。
──Storybookでのテストでコンポーネントがstoreを参照している場合、Storybook側でStoreをモックしたりすることが必要になるでしょうか？
はい。ReactのContextAPIをStoreとした場合の例を、書籍の8章3節で紹介しています。その他のStoreライブラリを使用している場合、各々のドキュメントでテストに関するセクションを参照してください。Storeのテスト実施方法がStorybookにも転用できる場合があります。
──Storybook＋Storycapで画面のキャプチャを撮ると、タイムアウトエラーが起きてしまったり、APIエラーが起きてしまうのですがtakepepeさんはどんな調整しているでしょうか？
APIサーバーを起動して検証している前提でしょうか？ MSW Storybook Addonを使用すればStorybookサーバープロセスのみでAPIサーバーを再現できるので、安定するかもしれません。
──スナップショットテストのツールは色々ありますが、JSDOM＋RTLを使えばよいでしょうか？
はい。スナップショットテストはjestから標準機能として提供されています。RTLを使用するとUIコンポーネントのレンダリング結果をHTML出力できるため、そのHTML文字列をスナップショットとして保存（Git管理）します。
──Playwrightって、リアルブラウザ使ってテストしているのですか？
はい。Webkit、Firefoxから選べます。
──フロントのデバイスを跨いだテストの自動化を行いたいのですが、おすすめのツールはあるでしょうか？ Playwitght？
Playwrightは、ブラウザではWebKit、Firefoxから、またiPhoneなどのデバイスを選択することができるためお薦めです。
──コンポーネントのパフォーマンステスト、レジリエンステストなど、本書で取り上げてないものについてどう考えておられますか？
フロントエンドの非機能テストはLighthouse CIでさまざまな検証ができるためお薦めです。Playwrightを使用したE2Eテストでは、playwright-lighthouseを使用することで統合できます。
──VRTツールのreg-suitとChromaticについて、どちらを選択した方がいいか判断する基準はありますか？
reg-suitは任意のホスティング環境を選べたり、CIを使用せずとも手元の検証としても使用できるため、柔軟です。Chromaticはreg-suitのようにバケットを用意する必要がないため、手軽に始めることができます。
──Chart.jsを使用しているのですが、グラフなどのcanvas要素のおすすめのテスト方法を教えて欲しいです。
ビジュアルリグレッションテストがおすすめです。Storybookでpropsを与えたコンポーネントを登録し、コンポーネント単位でリグレッション防止に努めると良さそうです。
──システムの規模が大きくなってくると、モックではなくテスト用のバックエンドを構築しますか？特にデータベースが関係してくると自動テストの難易度が高いと感じています。
データベースが関連する自動テスト（E2Eテスト）は保守運用難易度が高く、実行速度が遅いです。自動化するE2Eテストはデータベースが関連する機能に絞るようこころがけ、データベースがなくても検証できる機能はモックを使用すると良さそうです。
またQAエンジニアによる手動テストや外形監視が充実している場合、E2Eテスティングフレームワークによる自動テストが本当に必要かも検討してみてください。
──GPTを使った技術が進化し続けている今、テストコードはGPTに投げて（必要に応じてリファクタリングなどもして）テスト運用しているのですが、このテスト運用フローについてどう思われますか？
自分もChatGPTを使用したテストコードの記述、およびテストコードからコードを書き起こせる事を確認しました。十分に書けていると感じたこともある反面、不十分に感じる時もあります。テストを書くときのパートナーとして、どんどん活用できれば良さそうに思います。
講演者プロフィール
吉井健文（よしい・たけふみ）
Twitter：@takepepe
2022～ WEB+DB PRESS 年間連載「フロントエンドコンポーネント駆動開発」寄稿
2021 WEB+DB PRESS 特集「いまどきNext.js」寄稿
2019 単著『実践 TypeScript 〜BFF とNext.js&Nuxt.jsの型定義〜』執筆
フロントエンド開発現場の実践的ノウハウを趣味で寄稿（https://zenn.dev/takepepe）。
本業ではフロントエンド・アーキテクトとして、社内横断組織に従事。
