Storybook+Vitestで超便利なコンポーネントテスト手法が登場!
KENのモダンWeb開発ラボ KENのモダンWeb開発ラボ
120 subscribers
117 views
5

 Published On Sep 27, 2024

この動画単体でも新しい機能はわかりますが、以下の動画で作ったStoryを使っているため、合わせて見てみると理解が深まるかもしれません!
   • React + Storybook + MSW + Vitestで作る堅牢...  
   • Storybookで書くInteraction Testを実装してみよう!  

Storybook v8.3の新機能、Vitest Pluginがフロントエンド開発のテスト方法を一変させるかもしれません。Storyを直接テストに変換し、実際のブラウザ環境で高速にテストを実行。SmokeテストからInteractionテストまで、より効率的で信頼性の高いテスト環境を提供します。従来のテスト方法と比較して大幅な時間短縮を実現し、開発ワークフローを加速させる画期的なツールの紹介をします!

参考リンク
Storybook Vitest Plugin: https://storybook.js.org/docs/writing...

00:00 イントロ
01:32 前提となるStorybookの復習
02:30 Vitest Pluginのセットアップ
04:12 Storybookアップグレードでつまずき
05:04 Vitest Pluginの自動セットアップ
06:25 Vitest Pluginを手動でセットアップ
11:37 テスト実行
13:25 テストを検証
14:26 テストのカバレッジ
17:11 所感
18:32 VSCodeの拡張機能
21:20 test-runnerとの比較
22:28 テストの独立性について
24:19 まとめ

show more

Share/Embed