Upgrade to Pro — share decks privately, control downloads, hide ads and more …

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

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

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

More Decks by レバレジーズTechアカウント

Other Decks in Technology

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