https://coralcapital.connpass.com/event/218552/ での登壇資料

1. ReactでVisual Regression Testingした話
スタートアップ React LT
presented by

2. だれですか？
@IgnorantCoder
IgnorantCoder
● Rust / C++ / C# / TypeScript / Python
● CTO of Handii, Inc.
● エンジニア募集中！！！

3. 少しだけサービスのご紹介

4. ● 法人クレカの審査がとおらない…
● 枠がほしいんじゃなくて決済したいだけなのに…
● できあがったものも利便性がうんちゃかかんちゃか…

5. ● 決済でお困りの法人様！
● 決済で困ってない法人様も！
● エンジニア募集中！（二度目）

7. 今日も新機能を
デプロイするぞ！

8. 次はどんな機能を
作るべきか！
ユーザー体験を
追求するんだ！
機能ではない！
価値を提供するんだ！

10. カードがなくなってる！

11. なにがおこっていたのか…
➔ styled-components の version up でセミコロンのついてない行がスタイ
ル不正として無効になってしまった
➔ position: relative が無効になってしまい、カードが全部重なってしまった
…

12. snapshotテストは行っていたが…
ライブラリアップデートのプロジェクトだったため、diffがめ
ちゃくちゃ多かった…

13. snapshotテストは行っていたが…
ライブラリアップデートのプロジェクトだったため、diffがめ
ちゃくちゃ多かった…

14. そこでVisual Regression Test を検討
A visual regression test checks what the user will see after any code
changes have been executed by comparing screenshots taken before and
after code changes.
https://www.browserstack.com/guide/visual-regression-testing

16. やってみます

17. 導入自体は超簡単…？
❖ storybookを導入してない場合、めちゃコスト高いね
❖ 実際にプロダクションで使うようなサイズで走らせると死ぬほど時間が
かかる

18. CIはどんなかんじ？

19. CI設定時に気をつけること
❖ storybookを立ち上げちゃうと、jobが終わらない
➢ loki test --reactUri file:./storyook-static
❖ actions/upload-artifactだと、diff画像群がzipに
➢ 画像群をs3とかにアップロードしてPRにコメント

20. まとめ
➔ Visual Regression Test は手元で試してみるとめっちゃよさそう
➔ しかし、本番運用しようとおもうと超えなくてはいけないハードルが結構
ある…

21. エンジニア募集中！！！！！
@IgnorantCoder
https://github.com/IgnorantCoder/react-visual-regression-test