Storybook 8.3 で導入された Vitest 対応を React と Next.js で試す

Storybook 8.3 のリリースつについて 先日 Storybook 8.3 がリリースされました。 このリリースでの目玉機能は、なんといっても、待望の Vitest 対応ではないでしょうか。 以下は、7月末に一部公開されていたスクリーンキャスト。 とはいえ、何故か大々的に告知されていなかったり、Changelog には以下のようにあるのですが、 ⚡️ First-class Vitest integration to run stories as component tests 🔼 Next.js-Vite framework for Vitest compatibility and better DX 🗜️ Further reduced bundle size for a smaller install footprint 🌐 Experimental Story glo

[sh19910711]

"Storybook の Story が手軽に Vitest で実行できる / headless を無効化する事で、borwser.name で指定しているブラウザで http://localhost:5173/#/ を開いた状態で起動"

[shingo-sasaki-0529]

Storybook を使った単体テスト、Story 側で期待値を満たすための細かいパターンを網羅しなきゃならないけど、Story の変更が単体テストに影響を及ぼすロックイン状態になるからどうなんだろうなぁって最近はなってる。