Storybookのインタラクションテストで UIの仕様をテストする

Transcript

1. Storybookのインタラクションテストで UIの仕様をテストする 石田健太郎 2026年1月30日
2. 自己紹介 石田 健太郎（いしだ けんたろう） 2002年生まれの23歳 株式会社kubell 新卒2年目のフロントエンドエンジニア 「Chatwork」のブラウザ版・デスクトップ版の 開発を担当
3. 今回のテーマはStorybook
4. Storybook UIコンポーネントのカタログツール コンポーネントを独立した環境で開発・表示 ドキュメント化と視覚的な確認が可能 チーム全体でコンポーネントの状態を共有 こんなことに使える コンポーネントの視覚的な確認 Propsのバリエーション管理 デザインシステムのドキュメント化
5. 今回はデモがあります
6. デモアプリ こんなアプリを作ってきました
7. デモタイム
8. デモアプリ ざっくりこんな感じ プロフィールを編集できるアプリ インライン編集的なことができるコンポーネントがコア これをStorybookで見てみましょう
9. デモタイム
10. コンポーネントの仕様 仕様はざっくりこんな感じ 編集ボタンを押すと編集モードに移行する 編集モードではテキストを編集できる 編集モードでキャンセルを押すと破棄される 編集モードで保存を押すとテキストが更新される 保存されたらフィードバックが表示される 3秒後にフィードバックが消える
11. コンポーネントの仕様 もし仕様変更があったら？ 編集ボタンを押すと編集モードに移行する 本文をクリックでも編集モードに移行したいな〜 編集モードではテキストを編集できる 編集モードでキャンセルを押すと破棄される 確認ダイアログ出したいな〜 編集モードで保存を押すとテキストが更新される 保存されたらフィードバックが表示される 3秒後にフィードバックが消える 短いから5秒にしたいな〜
12. テスト、したくないですか？
13. できます！ （しかも結構簡単に）
14. インタラクションテスト for Storybook Storybook上でユーザー操作をシミュレートして、UIの動作を検証できる機能 何が嬉しいのか ストーリー（表示例）がそのままテストになる Play関数で操作を書くだけ Storybook UI上で実行結果が見える 詳しくは公式をご覧ください https://storybook.js.org/docs/writing-tests/interaction-testing
15. デモタイム
16. 便利！
17. どうやって書くの？
18. Play関数の基本 主に3つのAPIを利用 1. within() 対象要素のスコープを指定 コンポーネント内の要素を検索 2. userEvent ユーザー操作のシミュレーション click, type, hover など 3. expect() 検証 UIの状態が期待通りか確認
19. Play関数のコード こんな感じ export const WithInteractionTest = { play: async ({ canvasElement }) => { const canvas = within(canvasElement); // 編集ボタンをクリック await userEvent.click(canvas.getByText('編集')); // テキストを入力 await userEvent.type(canvas.getByRole('textbox'), 'New Text'); // 保存ボタンをクリック await userEvent.click(canvas.getByText('保存')); // 保存成功メッセージを検証 await expect(canvas.getByText('保存しました！')).toBeInTheDocument(); } }
20. CIでも動かせる
21. テストの自動実行 @storybook/addon-vitest を導入して以下のコマンドを実行するだけ vitest run 何が起こるか ストーリーがそのままテストケースになる playで記述したテストが実行される テスト結果が表示される ストーリーで書いたインタラクションがそのままテストとして機能
22. まとめ
23. まとめ Storybookのインタラクションテストを使えばUIの仕様をテストできる Play関数でユーザー操作をシミュレート within , userEvent , expect の3つのAPIで記述 ストーリーがそのままテストケースになる ドキュメントとテストの一石二鳥 CIで自動実行できる @storybook/addon-vitest を導入するだけ ストーリーで書いたインタラクションがテストとして機能 ぜひ使ってみてください
24. 終わりに デモアプリをGitHubで公開しています https://github.com/ishida-0622/storybook-play-demo 今回紹介した内容はVitest環境を前提としています 参考 Storybook https://storybook.js.org/docs/writing-tests/interaction-testing https://storybook.js.org/docs/writing-tests/integrations/vitest-addon