フロントエンド一年生がテストを考える

フロントエンド一年生がテストを考える 2019/12/12 Sendai Frontend Meetup #3 Kenta TSUNEMI /
@tocomi0112

どうも、僕です Kenta TSUNEMI / @tocomi0112 - 栃木県出身東京在住 - 学生時代の4(+1)年間を仙台で過ごす。
- Kスタ(当時)でバイトしてました - 初LTが仙台でできて嬉しい！ # すきなこと野球観戦、競馬、お笑い、ランニング、ゲーム - 2015.04- ERPパッケージ開発主にJava - 2019.10- Webエンジニア転身昔は太ってたんですけど...

話すこと・目的サーバーサイド出身の僕がフロントエンドのコンポーネントテストについてあれこれ考えてみた過程を話します。フロントエンドのテストってよくわかんないって人にテスト書いてみようかって思ってもらえたら嬉しい！ ※Vue.jsを題材として考えています

サーバーサイド出身の僕にとってテストというと...

テストというと... - 単体テスト JUnitテスト、メソッドの戻り値が期待通りになるか - 結合テスト Seleniumとか、決められた操作を問題なく実行できるか

コンポーネントのテストって何？

コンポーネントのテストって “単一のテストケースでは、コンポーネントに提供された入力（ユーザーのやり取りやプロパティの変更）によって、期待される出力（結果の描画またはカスタムイベントの出力）が行われることが示されます。” https://vue-test-utils.vuejs.org/ja/guides/common-tips.html より

コンポーネントのテストってプロパティによってボタンの見た目が変わるとかエラーがあるときだけメッセージを表示するとかそういうのを確かめるものらしい。

どういうテストをすればいいの？

意味のあるテストをする

意味のあるテストをする htmlのテストをしたいわけではない。。

意味のあるテストをする入力による変化は確認できたけど、結局slotの機能をテストしている。。

意味のあるテストをするコンポーネント特有の振る舞いをテストすることができた！

意味のあるテストをするフレームワーク自体をテストしない。ロジックの詳細ではなくコンポーネントの振る舞いをテストする。 Vue NYC - Component Tests with
Vue.js - Matt O'Connell より

どうしたらテストしやすい？

テストしやすい、しにくい “コンポーネントの描画結果が、単にプロパティの値によってのみ決まる場合、異なる引数を用いた関数の戻り値の検証と同じ様に、シンプルに考えることができます。” https://jp.vuejs.org/v2/guide/unit-testing.html より

テストしやすい、しにくい状態管理・DB etc... 親コンポーネント子コンポーネント孫コンポーネント

テストしやすい、しにくい状態管理・DB etc... 親コンポーネント子コンポーネント孫コンポーネント各コンポーネントが状態管理に依存しているので、テストのためにモックを用意する必要がある。

テストしやすい、しにくい状態管理・DB etc... 親コンポーネント子コンポーネント孫コンポーネント親コンポーネントのみが状態管理に依存。子や孫のコンポーネントはプロパティのみでテストできる。

テストしやすい、しにくい # 仮説状態管理に依存するコンポーネントを特定のものだけに抑えて、プロパティベースで動くコンポーネントを多くすればテストも書きやすいのでは。 # 疑問 - コンポーネントが増えると実装が煩雑になりそう
- バケツリレー大変そう

テストしやすさの先にテストがしやすい＝コンポーネントの役割が適切に分かれている、だと思う。テストのしやすさを考えることで自然と設計もきれいになる (と信じている)。

一緒にテスト書きましょう！

フロントエンド一年生がテストを考える

フロントエンド一年生がテストを考える

Kenta TSUNEMI

More Decks by Kenta TSUNEMI

Other Decks in Technology

Featured

Transcript