フロントエンドカンファレンス関西2025
レギュラートーク(30分)
フレームワーク・ライブラリ ツール JavaScript(TypeScript) テスト

堅牢なフロントエンドテスト基盤を構築するために行った取り組み

react_nextjs Shogo Fukami react_nextjs
3

皆さんはフロントエンドテストを書いていますか?
バックエンドテストがあるのに、フロントエンドは手つかず。そんな現場は珍しくありません。

私たちのプロダクトも、テストがあったものの重要な部分はカバーされていない状態からスタートしました。
「何を、どこまでテストすべきか」 が曖昧なままでは、導入は前進しません。

そこで私たちはクリティカルユーザージャーニーに絞った「必要十分」なテスト戦略を策定し、
限られた工数で最小の投資から最大の品質向上を実現し、壊れにくいテスト基盤を構築しました。

本セッションでは、

  • クリティカルパスをどう特定し、優先順位を付けたか
  • Playwright/Vitest などを用いた実装手順
  • CIへの組み込みとメンテナンスコストの抑え方

これらを具体的なコード例とともに紹介し、堅牢なフロントエンドテスト基盤を構築する方法を共有します。