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