Upgrade to Pro
— share decks privately, control downloads, hide ads and more …
Speaker Deck
Features
Speaker Deck
PRO
Sign in
Sign up for free
Search
Search
Storybook v7で取り組む フロントエンドテスト
Search
Tech Leverages
June 30, 2023
Technology
0
5.2k
Storybook v7で取り組む フロントエンドテスト
Storybook v7で取り組む フロントエンドテスト
Tech Leverages
June 30, 2023
Tweet
Share
More Decks by Tech Leverages
See All by Tech Leverages
古き良き Laravel のシステムは関数型スタイルでリファクタできるのか
leveragestech
1
1k
リファクタリングいつやるの? 〜依存の整理〜
leveragestech
0
77
ディメンショナルモデリングを軽く語る
leveragestech
1
3.8k
アクターモデルによる効率的な分散システム設計
leveragestech
0
3.6k
Terraform による運用効率化の取り組みと最新のテストアプローチの紹介
leveragestech
0
3.6k
OpenFGAで拓く次世代認可基盤 〜予告編〜
leveragestech
0
3.6k
リソース・管理効率の向上だけでない、分散システムとしてのTiDBの魅力
leveragestech
0
3.6k
作ってわかる!非同期ランタイム
leveragestech
0
3.6k
レバテック開発部 技術広報 これまでとこれから
leveragestech
0
180
Other Decks in Technology
See All in Technology
【5分でわかる】セーフィー エンジニア向け会社紹介
safie_recruit
0
26k
Amazon ECS & AWS Fargate 運用アーキテクチャ2025 / Amazon ECS and AWS Fargate Ops Architecture 2025
iselegant
16
5.5k
CI/CD/IaC 久々に0から環境を作ったらこうなりました
kaz29
1
170
Agentic Workflowという選択肢を考える
tkikuchi1002
1
500
あなたの声を届けよう! 女性エンジニア登壇の意義とアウトプット実践ガイド #wttjp / Call for Your Voice
kondoyuko
4
440
生成AI活用の組織格差を解消する 〜ビジネス職のCursor導入が開発効率に与えた好循環〜 / Closing the Organizational Gap in AI Adoption
upamune
2
950
Javaで作る RAGを活用した Q&Aアプリケーション
recruitengineers
PRO
1
110
5min GuardDuty Extended Threat Detection EKS
takakuni
0
140
OpenHands🤲にContributeしてみた
kotauchisunsun
1
430
Snowflake Summit 2025 データエンジニアリング関連新機能紹介 / Snowflake Summit 2025 What's New about Data Engineering
tiltmax3
0
310
データプラットフォーム技術におけるメダリオンアーキテクチャという考え方/DataPlatformWithMedallionArchitecture
smdmts
5
630
Кто отправит outbox? Валентин Удальцов, автор канала Пых
lamodatech
0
340
Featured
See All Featured
Gamification - CAS2011
davidbonilla
81
5.3k
Save Time (by Creating Custom Rails Generators)
garrettdimon
PRO
31
1.2k
JavaScript: Past, Present, and Future - NDC Porto 2020
reverentgeek
48
5.4k
Reflections from 52 weeks, 52 projects
jeffersonlam
351
20k
The Success of Rails: Ensuring Growth for the Next 100 Years
eileencodes
45
7.4k
Creating an realtime collaboration tool: Agile Flush - .NET Oxford
marcduiker
30
2.1k
Site-Speed That Sticks
csswizardry
10
660
jQuery: Nuts, Bolts and Bling
dougneiner
63
7.8k
Building a Modern Day E-commerce SEO Strategy
aleyda
42
7.3k
Code Review Best Practice
trishagee
68
18k
ピンチをチャンスに:未来をつくるプロダクトロードマップ #pmconf2020
aki_iinuma
124
52k
4 Signs Your Business is Dying
shpigford
184
22k
Transcript
Storybook v7で取り組む フロントエンドテスト NALYSYSグループ 松本悠太郎
発表の目的? 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を書くモチベーション向上につながっていたら嬉しい です。
ご清聴ありがとうございました。