Chromatic VRT 戦略：効果を保ちつつ、コストを抑える方法

Saitama.js vol.6 にて LT した内容。

Transcript

1. Chromatic VRT 戦略： 効果を保ちつつ、コストを抑える⽅法
2. TK と申します👋
3. プレミアリーグ観戦が 趣味です⚽
4. Saitama.js なので
5. ⽗は所沢市出⾝です 󰘆
6. 少し川⼝市に住んでました 🏠
7. 画像元: https://thegate12.com/jp/article/355
8. おすすめスポット：秩⽗三⼤氷柱 ❄
9. 私は⼭梨県出⾝ですが 🗻
11. ⼭梨も海ないので、共感です 🏖
12. Saitama.js 初参加！ 楽しみます 🎉
13. 本題
14. Chromatic VRT 戦略： 効果を保ちつつ、コストを抑える⽅法
15. 結論
16. Page コンポーネントでのみ Snapshot を有効にするこ とで、Chromatic のコストを抑える！
17. 前提知識
18. Storybook UI コンポーネントを分離して開発、テストするためのツール Story という異なるレンダリング状態をキャプチャできる Storybook official doc
19. Chromatic Storybookのためのクラウドベースのツールチェーン Chromatic official doc
20. VRT: 視覚的な側⾯のテスト⼿法 Snapshots を撮影し、以前のバージョンと⽐較することで視 覚的な差異を検出。 Snapshots とは、Story の画像とメタデータのキャプチャ。 Chromatic UI test
21. この話の発端
22. Storybook + Chromatic 使い始めました
23. めちゃくちゃ便利！
24. VRT(Visual Regression Test) も設定なしで使えるとか 神じゃーん
25. しかし、
26. 使い始めたばかりなのに、Snapshots 使い切りそう フリープランではもう限界か。。
27. Chromatic Pricing
28. Snapshotsはどのようにカウントされるか ビルドを実⾏するたびに、各ストーリーに対して1つの Snapshot が取得される。 フリープランの 5,000 Snapshots 100 コンポーネント * 2 ストーリー => 25 回ビルド 🤯 Chromatic docs: Snapshots
29. そして、課⾦プランもなかなかのお値段
30. Chromatic Pricing
31. Snapshots を削減する⽅法は何かないか？
32. 記事へのリンク
33. 記事へのリンク
34. Page コンポーネントでのみ Snapshot を有効にする!
35. 画像参照元: Atomic design by Bradfrost
36. なぜページコンポーネントをターゲットに？
37. ページコンポーネント それぞれのコンポーネントの組み合わせで構成されているた め、結合検証として効率的に多くのコンポーネントをテスト できる！
38. ✅ 画像参照元: Atomic design by Bradfrost
39. 設定
40. // .storybook/preview.js const preview = { parameters: { // Disables Chromatic's snapshotting on a global level chromatic: { disableSnapshot: true }, }, }; export default preview; Step 1: グローバルで Snapshot を無効化 Chromatic doc: Ignore stories
41. // MyComponent.stories.js|jsx import { MyComponent } from './MyComponent'; export default { component: MyComponent, title: 'MyComponent', // Enables snapshotting for the component parameters: { chromatic: { disableSnapshot: false }, }, }; export const StoryName = { args: {} }; Step 2: 個別に Snapshot を有効化 Chromatic doc: Ignore stories
42. これだけ
43. Snapshots の削減に成功 🎉🎉
44. 注意点 🚨
45. 1. 網羅率は下がってしまう 意識的に Story を追加してさまざまなバリエーションを網羅 できるようにする。
46. 2. Chromatic でのレビューで⼯夫が必要になる 👈 “Changeset” に出てこなくなる 画像元: Chromatic docs UI review
47. 注意点はあるものの、有効な戦略！（だと思う）
48. まとめ
49. 課題： Chromatic 便利だけど、⾼い 💸 コスト抑えて、VRT の効果を保つ⽅法はないか？ ページコンポーネントを snapshot 対象とし、 Snapshot の消費を抑える！ ただし、バリエーションの網羅、レビューは⼯夫する。
50. 以上です 👋