携わっているフロントエンドプロジェクトでのテストの取り組み
こんにちは！
フロントエンドの現場で、初めて結構テストに重きを置いているプロジェクトにアサインされたので使用している技術等の知見の共有をさせていただければと思います。
これからテストを書いていきたいけど、どんなテストやツールを導入したらいいかわからないといった方に参考になれば幸いです。
記事に書いているもの以外にも、便利なツールとかあれば教えていただけると大変嬉しいです！
環境
- vite: 3.1
- vue: 3.2.35
test系
- storybook/vue3: 6.6
- jest: 29.1.2
- testing-library/vue: 6.6.1
- vue/test-utils: 2.0.0
Unit/Integration Test
Jest, vue-test-utils, vue testing libraryを使用して行なっています。
各プラグインの使い分けとして、
当たり前ですが、テスト結果の判定はJest
Vueインスタンスを直接操作してテスト書きたい時に vue-test-utils
実際にDOMを操作して、よりユーザー目線でテストを記述したい時にvue testing libraryを使用しています。
プロジェクト全体として意識しているのは、ユーザーの利用ケースを想定したIntegrationTestを重点的に書くことです。
例えば、下記のようなテストです。
- フォームに値が入っていなかった場合エラーが表示されるか、全て入力項目が入っていれば、POSTリクエストが投げられるか
- 想定しているバリデーションチェックがちゃんと引っかかるか
- 想定しているタイミングでリダイレクトされるか
UIレベルの簡単なテストについては書きません。
(テキストが表示されているか、クリックしたらクリックイベントが実行されるか等)
前提として、Unitテストはとても重要です。
しかし、最終的なアウトプットが期待されているものであれば、IntegrationテストでUnitテストの範囲をカバーできると思っています。
そしてUnitテストも100%書いていこうとなると、いくらテストを書いても書いてもキリがありません。
複雑な関数であれば、テストを記述しますが、そうでない限りは書きません。
後述しますが、私が担当しているプロジェクトではStorybookを採用しています。
StorybookでInteractionTestを記述し、UIの表示と機能の保証が出来ていれば、ある程度Unitテストの重要性が低くなると自分は考えます。
そのため、Unitテストの複合体であるIntegrationTestをプロジェクトでは重点的に書き、Unitテストはあまり書かないという方針を取っています。
Interaction Test
Storybookを使用して実現しています。
Storybookを導入することで、デザイナーさんやレビュアーに対して、より手軽にコンポーネントの動作や見た目の確認をしてもらえるメリットがあります。
このテストでは、UIレベルのコンポーネントで、例えばクリックイベントが実行できるかどうか。やテキストを入力するとイベントが実行されるかどうかのテストを書いています。
Storybookの導入意図に、スタイルの確認も含まれているので、1コンポーネント1Storyのレベルで作成しています。
Storybookのおかげでとてもスムーズに見た目、動作確認が進んでいる実感がありますので、ぜひ余裕があればプロジェクトにStorybookを導入してみて欲しいです。
Visial Regretion Test
通称VRTと呼ばれるものです。Chromaticを使用して実現しています。
このテストのいいところは、コンポーネントの見た目や挙動を修正した時に、その修正した差分を検出してくれるところです。
例えばテキストボックスコンポーネントの見た目を修正するタスクが入った時に、影響が出る恐れのあるページが複数あると思います。
こういったケースに大変役に立ちます。
Chromatic側でページやコンポーネントのスナップショットを用意しています。
その用意されているスナップショットから、変更されるコンポーネントやページのスナップショットで比較します。
Chromatic側でどのように見た目が変わっているのかを見やすく表示してくれるので、どのように見た目が変化しているのかを確認することができます。
これを導入しておくと、より安心してコンポーネントの修正をかけることができます。
MSW(Mock Service Worker)と連携すると、より本番と近い環境での画面の確認を行うことができます。
EtoEテスト
End To Endテストですね。プロジェクト内で「やりたいね〜」くらいで収まっていて、まだ出来ていません。Unit/IntegrationTestと役割が少し被っているからでしょうか。
やはり実際にブラウザで行うテストを自動化できるとなると、開発効率が段違いに高くなりそうですが、まだ出来ていないのが現実です。
もし今後導入することになったら記事を更新したいと思います。
余談
私が担当しているプロジェクトでは、jestにstoryと大変ファイルが増える構成になっています。
UI等の最小限のロジックしかないものについてはtestファイルをないのですが、それでもstoryは作成する必要があるので、非常にめんどくさいです。
そのめんどくささの解消のためのツールとして hygenと呼ばれるライブラリを導入しました。
hygenは、テンプレートをもとに自動でファイルを作成してくれる大変便利なツールになっています。
一回仕組みを作ってしまえば、テストファイルや vueやts, reactファイルを自動で生成してくれます。
導入例は下記の記事をみると細かく解説しています。
これを使用することで、ほとんどstoryファイルを一から書くことが無くなりました。
なんなら、雛形からstoryファイルを作成したままの状態で、ほとんど後から手を加えない時もあります。
めちゃくちゃ作業効率が向上しました。是非このツールもプロジェクトに導入してみて欲しいです。
所感
担当しているプロジェクトのテストの取り組み例を書いてみました。
正直テストに結構な工数を持っていかれますが、全体としての品質は間違いなく向上している実感があります。
書けば書くほどキリがない領域なのでプロジェクトないでしっかり方針を立てて、書く書かないの明確な基準を設定するといいのかなと思いました。
Unit/Integrationテストでカバレッジ率100％を満たさなくてもStorybookを使って、その分を担保すればいいですし。
是非、めちゃくちゃ手軽に導入出来て、周りから絶大に感謝されるHygenを明日から導入してみて欲しいです。。。！！
Hygenを導入することで、自分も幸せプロジェクトメンバーも幸せなので！！
Discussion