※弊社エンジニアの記事になります。

はじめに

突然ですがフロントのテストってどんな感じで書けば良いのでしょうか？

私は特にフロントのテストについて調べないまま我流で今までやってきてました。😅

他のコンポーネントなどの参照を全てモックして各コンポーネントごとに純粋なUnitテストを書くのがいいのか？

Unitテスト以外（Integrationテスト、E2Eテスト）はどの段階で書けばいいのか？どれくらいの量書けばいいのか？

色々と日々の業務で疑問を抱えることが多くなり、フロントのテストについて調べていた時にTesting Trophyという考え方を見つけたのでここでまとめてみたいと思います。

Testing Trophyとは？

Testing Trophyとは、Kent C. Doddsという方が考案したフロントエンドのテストにおける必要十分な各種類のテストの配分を表した概念になります。

（余談ですがこの方はReact Testing Libraryを作った方です。これはためになりそうな予感がしますね）

さてTesting Trophyの詳細を説明する前に、先にみなさんが馴染みがあるであろう概念のTesting Pyramidを紹介します。

上の図がTesting Pyramidを表したものになります。図の下から上に行くほどにテストの実装工数・テスト処理時間などが増えコストが高いものとなっていきます。そのためこの図から分かるようにTesting Pyramidでは一番下のUnitテストを一番多く書き、上に行くほどテスト量を減らしていくことを勧めています。

私もこの図は何度か目にしたことがあり、今までの業務の場面でもほとんどをUnitテストで書き、Unitテストをある程度書いた後に少しのIntegrationとほんの少しのE2Eテストを書く（もしくは書かない😅）というようにしてきました。

それでは次にTesting Trophyの図をみてみましょう。

Testing TrophyではIntegration Testの層が一番厚くなっています。

これは先ほど話した、コスト（実装コストやリソースのコスト）以外のTesting Pyramidで上の層に行くほど高くなるものに起因します。それはテストの信頼度です。

単体テストのみでは単一の機能同士が結合した時に正しく動作をするかの確証を得ることができません。

そのため機能同士の繋がりをテストできるIntegrationテストを一番多く書くことが、コストとテストの信頼度のトレードオフを考える上で一番有用であるとTesting Trophyは示しています。

Reactなどのフレームワークを用いたプロジェクトではコンポーネント同士の繋ぎ合わせでアプリケーションができていますので、この概念はとても腑に落ちますね。

Integration Testってどんなテスト？

さぁ、Testing Trophyに倣うとIntegration Testを多く書けば良いそうです。

ですが、実際Integration Testってどんな感じで書けばいいのでしょうか？

記事の続きは下のリンクをクリック！

https://rightcode.co.jp/blog/information-technology/testing-trophy-syain

【2024年卒】新卒採用エントリー開始しました！

特設ページはこちら：https://rightcode.co.jp/recruit/entry-2024

インターン募集！未経験ok、チャレンジ精神ある方求む

メディア運営：https://rightcode.co.jp/recruit/intern-media

社長と一杯飲みながらお話しませんか？（転職者向け）

特設ページはこちら： https://rightcode.co.jp/gohan-sake-president-talk

もっとワクワクしたいあなたへ

現在、ライトコードでは「WEBエンジニア」「スマホアプリエンジニア」「ゲームエンジニア」、「デザイナー」「WEBディレクター」「エンジニアリングマネージャー」「営業」などを積極採用中です！

有名WEBサービスやアプリの受託開発などの企画、開発案件が目白押しの状況です。

• もっと大きなことに挑戦したい！
• エンジニアとしてもっと成長したい！
• モダンな技術に触れたい！

現状に満足していない方は、まずは、エンジニアとしても第一線を走り続ける弊社代表と気軽にお話してみませんか？

ネット上では、ちょっとユルそうな会社に感じると思いますが（笑）、
実は技術力に定評があり、沢山の実績を残している会社ということをお伝えしたいと思っております。

• ライトコードの魅力を知っていただきたい！
• 社風や文化なども知っていただきたい！
• 技術に対して熱意のある方に入社していただきたい！

一度、【Wantedly内の弊社ページ】や【コーポレートサイト】をのぞいてみてください。

【コーポレートサイト】https://rightcode.co.jp/

【採用募集】https://rightcode.co.jp/recruit（こちらからの応募がスムーズ）

【wantedlyぺージ】https://www.wantedly.com/companies/rightcode