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

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

Transcript

1. Storybook v7で取り組む
   フロントエンドテスト
   NALYSYSグループ　松本悠太郎
   

   View Slide

2. 発表の目的？
   
   
   
   Storybook ・・・
   ・・・・・・
   Storybook書きたい！！！
   

   View Slide

3. Storybookとテスト
   ● VRT（Visual Regression Testing、画像回帰テスト）
   ○ UIの品質
   ● インタラクションテスト
   ○ ユーザーとシステムの双方向性の品質
   ● アクセシビリティテスト
   ○ どんな特徴を持った人でも同等に利用可能かの品質
   

   View Slide

4. VRT（Visual Regression Testing）
   ● UIの予期せぬ変化は検知しづらい
   ● 実装によるUIの差分を検出してくれる
   ○ 予期しないUIの変更に気付ける
   

   View Slide

5. インタラクションテスト
   ・入力
   ・ボタンクリック
   

   View Slide

6. Play functionを利用したインタラクションテスト
   ● Story単位でplay関数を定義
   

   View Slide

7. Test runner
   ● Storyをテストとして実行
   ● play関数がない場合、Storyがエラーなくレンダリングされるかを検証
   ● play関数がある場合、play関数にエラーがないか（テストがpassするか）を
   検証
   

   View Slide

8. カバレッジレポート
   ● Stmts：命令網羅率
   ● Branch：分岐網羅率
   ● Funcs：関数網羅率
   ● Lines：行網羅率
   

   View Slide

9. アクセシビリティテスト（勉強中）
   ● 日本でもアクセシビリティが義務化される？？
   ○ 障害者差別解消法の改正（ 2021年）と、施行（2024年4月）
   

   View Slide

10. 最後に
    ● 今回発表するためにstorybookについて調べてみて、学習時間を投資する
    価値は十分にあるのではと思いました。
    ● 誰か一人のstorybookを書くモチベーション向上につながっていたら嬉しい
    です。
    

    View Slide

11. ご清聴ありがとうございました。
    

    View Slide