Bonfire Frontend #5(テーマは「テストと自動化」) に参加！

yj-meetup.connpass.com

に参加してきた。テーマは「テストと自動化」。 フロント側のテストは今の案件での悩みどころの一つだったため、大変参考になった。

発表内容:

  1. 「中期プロジェクトでe2eテストを導入してみて感じたこと」 -> E2E導入の話がメイン speakerdeck.com

  2. 「Vueのテスト手法とVRT(VirtualRegressionTest)のすすめ」 -> VRT推しらしい。Vueのテストの実情が聞けて良かった speakerdeck.com

  3. 「Yahoo! JAPAN トップページ リニューアルとテストについて」
    資料配布見つからず。以下手元のメモから概要記載。

・2019/10/1 YahooJapanトップページリニューアル(https://techblog.yahoo.co.jp/entry/20191203785540/)
・React/TypeScript/Redux/SSRで実施 ・テスト環境はJest + react-testing-library
・storybookを使っていたのでスナップショットテストにはstoryshots & reg-suitを利用

全体のまとめ

  • E2E/スナップショットテスト/VRTの話が多かったが、 十分なユニットテストの存在が前提と全員強調していた
  • E2Eは重要な箇所を局所的に実施(1人目)
  • VRT, スナップショットテストの話を全員がしていた(2, 3人目はメイン扱い)
    • storybook & storyshots & reg-suitの構成が良いらしい(2, 3人目が同じ構成を紹介)
    • storybookのstory単位で見れるため(?)、UnitTest代わり(?)に使うような話もあった (コンポーネントの見た目はstorybookでのVRT, ロジック部分は普通にアサーションを使うテスト)

所感

  • 割と共通する話も多かった。ある程度ベストプラクティスが固まってるのかな？というイメージ。
  • ユニットテストとコンポーネントテストの区分けがよく分からない
  • storybook(& VRT)まともに活用したい！でも挫折率も高そう。

その他小ネタ

  • Reactの発表2名と多かった:)
  • 2人目の発表者は大学生！若い！
    • フロントの勉強会に行くとベテランに混じって1人は大学生が登壇している気がする。
  • ReactでSSRに razzle という選択肢。Next.jsではなく
  • Puppeteerの読み方は「パペティア」。ただ「パペッター」派も結構いた(私も先週までそう思っていた)

以下雑メモ(この先は読まなくてOK！！！)

まとめ

  • とにかくまずはユニットテストが重要。E2Eはその後。
    • 発表自体はE2E以降の話が多かったが、全員前提としてユニットテストの充実を挙げていた。
  • VRT(Virtual Regression Test)推し多数。発表者3人ともが話題にしていた。(1人は今後触れたい技術として紹介のレベル)
    • story book / story cap / reg-suit の組み合わせでやるのが良いらしい(3人中2人がこの構成を推していた)
    • story bookで行うことで、コンポーネント単位の見た目のチェックができる
    • スナップショットテストみたいなもの？(実際3人目の人はスナップショットテストと表現していた)

メモ

中期プロジェクトでe2eテストを導入してみて感じたこと

  • 「フロントエンド 側のユニットテストは終わり」「開発も落ち着きE2Eテストに。。。」
  • React & TypeScript！鉄板構成
  • テストはJest Emnzyme puppeteer
  • E2Eではよりクリティカルなところだけ自動化
  • テストピラミッドの重視は重要
  • UnitTestingが土台で肝
  • Integration ロジックとViewをつなぎ合わせる
  • UI: UI
  • 基本ユニットテストだよねー。
  • Unit: 70%、Integration: 20%、e2e: 10% くらいの割合でピラミッド構成にするとバランスが良いのでお薦め
  • Celeniumは辛い。。。

Vueのテスト手法とVRTのすすめ

  • 大学生！若い。フロントの勉強会はだいたい大学生が出てくるような？
  • storybook reg-suit storycapの組み合わせが良いらしい
  • コンポーネントテスト(=単体テスト)
    • Vueだとvue-test-utilがある！(ReactでいうところのEnzyme?)
  • E2Eが欲しい箇所
    • ロジックが多い
    • 権限周り
    • サイトよりアプリ
  • QAがいるならE2Eいらないんじゃね？
  • VRT Vueでは？
    • storybookのstory単位でやる
  • Reg-suit / storycap -> storybookのスクショを比較してくれる
    • storybookのアドオン
  • VRT(Virtual Regression Test) 「他のテストと違ってStoryさえ書いていればいい」！
  • VRTが適するところ
  • 向いていない
  • VRTはとても良い選択肢

Yahoo! JAPAN トップページ リニューアルとテストについて

  • 2019/10/1 YahooJapanトップページリニューアル
  • React/Reduxを採用！TypeScriptの採用！
  • SSRも採用。Next.js?と思いきやrazzle(https://github.com/jaredpalmer/razzle)を利用
  • テスト環境はJest + react-testing-library
    • EnzymeはReactHooks込みのテストに弱かった！らしい。
  • storybookを使っていたのでスナップショットテストにはstoryshots & reg-suitを利用

  • まとめは以下の3点

    • Reactのテストにはjestやreact-testing-library
    • Storybookやregsuitでレンダリング後の見た目のテスト
    • テストも自動化必要

  • razzleは初めて聞いた

  • Enzyme鉄板かと思っていたが、react-testing-libraryも良いらしい
  • VRT?スナップショットテスト?には、storybook & storyshots & reg-suit
  • リニューアルされたYahooJapanトップページリニューアル
  • 2019/10/1 YahooJapanトップページリニューアル
  • React/Reduxを採用！ TypeScriptの採用！
  • SSRも導入！
    • razzleを採用
    • webpack.configを自動生成＆ビルド楽
    • ペライチのサイトにNextはオーバースペック
  • 詳しくは。。。 [Yahoo! JAPAN トップページを Atomic Design と React・Redux・TypeScript で作り変えたお話 - Yahoo! JAPAN Tech Blog] (https://techblog.yahoo.co.jp/entry/20191203785540/)
  • E2Eよりユニット
  • UIコンポーネントテストもカバレッジ100は目指さない
  • Jest razzle test -> jest実行される
  • Jest スナップショットテストが可能 test-runnner, mock, coverage, assertionの全てが揃っている！
  • ts-jestというものもあるらしい。jestをtypescriptで！
  • razzle testを使うとReact用のtransformが自動設定。便利。
  • react-testing-libraryを使った EnzymeはReactHooks込みのテストに弱かった！らしい。
  • スナップショットテスト storybookを利用しているので、storyshotsを利用している
  • コンポーネントテストとStorybookの両方 コンポーネント側のテストはロジックのアサーションに集中できる
  • reg-suitにより、UI変更の差分をけんち StorybookをPuppeteerでキャプチャし自動的に比較してくれる
  • reg-suit
    • 予期せぬ変更が検知される
    • 時系列で変わるデータ

気になったこと

VRT? Snapshotテスト? おそらくほぼ同じものと思って良さそう。少なくとも今回の文脈では。 以下サイト参考

スナップショットテスト実戦投入 / Practical Snapshot Testing - Speaker Deck 「スナップショットテスト」はより一般的には、「画像ベーステスト」や「ビジュアルれグレッションテスト」と呼ばれています

以下2つで同じようなツールを使って似たようなことをしているが、使っているツールは同じ(story-book, reg-suit) Reactコンポーネントのデザイン変更検出をVisualRegressionTestにて楽しよう - Qiita

Storybook とスナップショットテストで API開発の完成を待たないフロント開発フロー - Qiita

フロントのユニットテストはどうする？

  • 今後の要調査項目。
  • ただYahooの方が、「ロジックはアサーションテストで、見た目はsnapshot(storybook)で」とおっしゃっていた。 これは参考になるかも？