Bonfire frontend#5の登壇資料です
Vueのテスト手法とVRTのすすめBonfire frontend#5おとべ（株式会社ゆめみ）
View Slide
自己紹介させてください
おとべですinstagramtwitternotegithub{,,,,} .com/unotovive
おとべです・フロントエンド・デザイン・ゆめみでバイトしてる大学 生です。
本題
テスト書いてますか？フロントエンドで
テストについて初歩的な話今日はおすすめのVRテストとを話します
そもそもテストいる？フロントエンドで
弊社のフロントエンドエンジニアSさん
場合による
重い案件が重い・実装が重い
案件の重さとテストの重さショボい案件単体テストVRテストE2Eテスト
案件の重さとテストの重さ ショボい案件単体テストVRテストE2Eテスト
バランスが必要ショボい案件単体テスト
バランスが必要デカくてムズい案件単体テストVRテストE2Eテスト
バランスだけじゃ駄目でも
どんなテストが必要か考えて取捨選択する
どんなテストがあってどういう特徴で何に適しているのか
Vueのテスト手法いろいろテストを知る
単体テスト（コンポーネントテスト）
どんなテスト？・機能や関数、コンポーネントなどの小さい単位で行うテスト・小さい単位なので軽く高速であるべき・常に１００％を目指すべき
Vueでは？
Vueの単体テスト・内部の実装（関数など）にフォーカスしすぎない・コンポーネントのインターフェースをテストする・@vue/test-utilsを使ってコンポーネントをマウントする
vue-test-utils
ブラックボックス？Props RenderActionscomponentcomputed filtermethods
ブラックボックス？Props RenderActionscomponentcomputed filtermethods入り口と出口だけを気にする
https://www.youtube.com/watch?v=OIpfWTThrK8
ブラックボックス内に子コンポーネントがある…
単体テストなので子コンポーネントを一緒にチェックとかはしたくない
とか
子コンポーネントなので渡しているPropsを変えてテストしたい
子コンポーネントなのでイベントが発行されているかをテストしたい
全部Vue Test Utilsで出来ます！！！
単体テストが適するところ・ロジックが多い大型案件（自社サービスに多めな印象）・権限周りとかで表示出し分けが複雑になってる所・サイトと言うよりはアプリケーションと呼ばれるような物
単体テストが適さない所・ペライチLP作ってください〜・要るわけがない・複雑でないミニマルなアプリケーション（バランスを見て）
E2E Test（インテグレーションテスト）
どんなテスト？・実際にブラウザを通して一連の操作を行ってみるテスト・ブラウザを通すしストーリーがあるので都度とても長い・開発の終盤にQAチームとかが手動でやったりもする
Vueでは？・Vueと言うよりも出来てるアプリケーションで行うテスト・そのためVue独自の何か、がある訳ではない・正直なところ僕は大体QAチームに丸投げ
ということで詳しいことはスキップSeleniumとか使うみたい
e2eテストが適するところ・ 品質がとても大事な案件・QAチームを通す予定が無いもの・継続的に機能改良などを続けていく大型の案件・ 品質がとても大事な案件・QAチームを通す予定が無いもの・継続的に機能改良などを続けていく大型の案件
e2eテストが適さない所・QAさんがいる ・ある程度の信頼性が担保されてればまあ良い所
Visual Regression Test（画像差分テスト）今日の推し
Visual Regression Test（画像回帰テスト）みんな使って
どんなテスト？・今のスクショと前のスクショを比較してくれる ・1pxのズレも見逃さない・予期せぬスタイル崩れとかを予防できる！・開いてスクショトルのでソコソコに重い＋遅い
こんなかんじ
Vueでは？・Storybookのストーリー単位で見れる(Reg-suit+storycap)・PR時にCIで動作し、GitHubやSlackにレポートを送信・僕の事を救ってくれたテストランキング第一位
Storybook・ コンポーネント単位でUIを確認できる・デザイナーとの疎通などが楽になる・コンポーネントカタログ的な使い方ができる
Storybook
Reg-suit・「よしなに」VRTをやってくれる・レポートをS3とかに上げて自動共有・ドキュメントがとても充実してる
VueでVRTを使ってみる超かんたん
カンタン３STEP1.Storybookを入れて設定する2.Reg-suitとStorycapを入れて設定3.CIrcleCIの設定を書く（CIなら何でもいいけど）
これだけ！
せっかくなのでTips:・CIで動かすDockerは公式のイメージを使うとイイ・日本語の表示はDockerにフォントのインストールが必要
ほかのテストと違ってStoryさえ書いてれば良い
VRTが適するところ・中規模以上のアプリケーション・大量にコンポーネント分けしてる場合・新規Joinのメンバーが来たりする場合
VRTが適さない所・さっさと作って終わり！メンテも改善も無し！みたいなの・単一画面とかコンポーネント分けがされてない所（無くても・PRを眺めただで関係ない所のCSSの問題が見抜ける神がいる
まとめテストの種類が分かったので
バランスが大事テストを実装するかどうかは
取捨選択をするテストの種類が分かったので
UnitテストVRテストE2Eテスト規模やアプリケーションの形態に応じて使い分ける高い信頼性が必要なときや工数に余裕があるときにプラス選択の指標
Vue Test Utilsを使っとけば間違いないしカンタンVueのテストは
VRTはフロントエンドとしてとても良い選択肢認知度低めの
平和なエンジニアライフを目指しましょう何が必要か考えて
最後に宣伝
Yumemi.vue#62/2 (木)Roppongi.vue＃５2/25 (火)
おわりまさかり歓迎です。優しく投げて下さい。
unotovive
trapezoid
niftycorp
treastrain
skanehira
always_allokay
qnighy
ffjlabo
ryunen344
misatokii
hitsuji1991
zakky21
kastner
philhawksworth
carmenintech
cassininazir
eileencodes
phodgson
dougneiner
keathley
jnunemaker
ammeep
keithpitt
myddelton