Storybook v7で取り組む フロントエンドテスト

Storybook v7で取り組む フロントエンドテスト

Transcript

1. Storybook v7で取り組む フロントエンドテスト NALYSYSグループ　松本悠太郎
2. 発表の目的？ Storybook ・・・ ・・・・・・ Storybook書きたい！！！
3. Storybookとテスト • VRT（Visual Regression Testing、画像回帰テスト） ◦ UIの品質 • インタラクションテスト ◦ ユーザーとシステムの双方向性の品質 • アクセシビリティテスト ◦ どんな特徴を持った人でも同等に利用可能かの品質
4. VRT（Visual Regression Testing） • UIの予期せぬ変化は検知しづらい • 実装によるUIの差分を検出してくれる ◦ 予期しないUIの変更に気付ける
5. インタラクションテスト ・入力 ・ボタンクリック
6. Play functionを利用したインタラクションテスト • Story単位でplay関数を定義
7. Test runner • Storyをテストとして実行 • play関数がない場合、Storyがエラーなくレンダリングされるかを検証 • play関数がある場合、play関数にエラーがないか（テストがpassするか）を 検証
8. カバレッジレポート • Stmts：命令網羅率 • Branch：分岐網羅率 • Funcs：関数網羅率 • Lines：行網羅率
9. アクセシビリティテスト（勉強中） • 日本でもアクセシビリティが義務化される？？ ◦ 障害者差別解消法の改正（ 2021年）と、施行（2024年4月）
10. 最後に • 今回発表するためにstorybookについて調べてみて、学習時間を投資する 価値は十分にあるのではと思いました。 • 誰か一人のstorybookを書くモチベーション向上につながっていたら嬉しい です。
11. ご清聴ありがとうございました。