こんにちは、キカガク for Business のエンジニアをしている 上野 です。
今回はキカガク for Business でのコンポーネントテストの実装方針、および導入を決めたのでその紹介記事になります。コンポーネントテストの導入を検討されている方の参考になれば幸いです。
背景
現状、キカガク for Business のフロントエンドテストは、主に関数で実装されたロジックに単体テストが実装されています。しかし、開発組織が拡大するにつれて、コードベースに触れる人の数は増えています。これまでは、歴が長いチームメンバーの知見により、修正時に影響が出そうな箇所をレビューを通じて対処してきました。しかし、メンバーが常に同じであるとは限りません。退職やチーム異動など、チームの知識と経験は流動的なので、人に依存する開発プロセスでは、将来的にリスクが高いと思います。この背景を踏まえ、プロダクトの安定性を保つために、コンポーネントテストを導入し、より安全に開発ができ、プロダクトの安定性が高い環境を整えたいと考えました。
課題
キカガク for Business は、フロントエンドに Next.js と TypeScript 、DB に Firestore を採用し、バックエンドアプリケーションはなく、フロントエンドから Firestore に直接アクセスする設計になっています。コンポーネントテストを実装するときに、 REST API や GraphQL を使用している場合、 msw を用いてリクエストをインターセプトし、テストケースに応じたデータを返すことで各ケースに対応したテストを容易にすることができます。しかし、Firestore を使用する場合、その挙動を模倣するためにはモックを実装するか、emulator を設定する必要があります。
テスト導入の検討は 2023 年 11 月頃に行われましたが、2024 年 1 月から Firestore から離脱し、 RDB に移行し、バックエンドアプリケーションの構築を計画していました。なので、 Firestore emulator を仮にセットアップしたとしても、半年から 1 年くらいという短期間での利用になります。
この状況を鑑み、 RDB への移行時にテストを実装する方針を固め、それまではテストに使用するツールや技術の選定に時間を割くことにしました。
実装方針
キカガク for Business では、既に Storybook を導入しており、多くのコンポーネントに対して Story が作成されていました。この既存の資産を有効活用したいと思い、 Storybook と jest を組み合わせる実装にすることにしました。
https://www.testingjavascript.com/
テスティングトロフィーに従い、まずは結合テストを実装していくことにしました。テストの範囲については、まずはアプリケーションの各画面に対して、その画面で考えられるユーザーシナリオをベースに、各操作が正常に機能することを確認することから始めることとしました。これにより、ユーザーに提供したい主な機能でバグが起きることを防ぎ、アプリケーションの安定性を向上させられると考えました。
追加で、各コンポーネント（ページ以外のコンポーネント）のヴィジュアルリグレッションテストも行っていく予定です。ヴィジュアルリグレッションテストには、 Storybook を活用し、 UI コンポーネントが期待通りにレンダリングされることを確認します。この方法により、 UI の変更が意図した通りであるかどうかを自動的に検証することができます。さらに、 Storybook における Story の拡充を進めることで、コンポーネントのさまざまな状態を網羅的にテストすることを目指します。これにより、コンポーネントの挙動が仕様に準じていることを保証し、将来的に発生する可能性のある問題を事前に防ぐことができます。
以上のように、ページ単位での結合テストと各コンポーネントのヴィジュアルリグレッションテストによって品質を担保していく方針を立てました。
現在の進捗とこれからの対応
現在の進捗
執筆時点で、Firestoreからの移行が完了した画面のユーザーシナリオについては、テストの実装が完了し、 CI で PR ごとにテストを実行しています。これにより、ユーザーが操作する箇所の動作保証ができるようになりました。また、 Storybook においても、各コンポーネントのさまざまな状態を網羅する Story の実装が進んでいます。
これからの対応
今後も Firestore から移行していく画面は引き続きテストを実装していきます。 また、次の大きなステップとして、ヴィジュアルリグレッションテストの基盤構築も進めていく予定です。
終わりに
キカガク for Business では現在、 Firestore からリレーショナルデータベースへの移行作業と並行して、フロントエンドのコンポーネントテストの拡充を進めています。フロントエンドエンジニアだけでなくバックエンドエンジニアも積極的に募集しています。
ご興味がある方、是非キカガクの採用ページへお越しください！
まずはカジュアル面談で、ざっくばらんにお話しましょう。
