StorybookとVitestの連携機能でMSWが使えなくなる事がある
StorybookとVitest、MSWを組み合わせてテストを実行するとき以下のようなエラーが起こる場合がある。
Error: Package subpath './browser' is not defined by "exports" in ~/xxx/node_modules/msw/package.json imported from ~/xxx/node_modules/msw-storybook-addon/dist/index.browser.js
あんまり深くは追ってないものの、@storybook/experimental-addon-test 8.4.6 以上を利用していて、 Storybook と Vitest を組み合わせて environment に happy-dom もしくは jsdom を指定した場合に発症する。
happy-dom や jsdom などの仮想環境で実行されているときはあくまで Node.js で動作しているものなので、そこでモジュールの解決がうまくできなくなってしまうものと思われる。
パッケージのエイリアスなどを駆使すると迂回できる可能性があるが、メンテナンス性を損なうのでなるべくそういう手段は取りたくないね…というお気持ち
回避方法
【オススメ】Playwright を使用して本物のブラウザを利用してテストする
@storybook/experimental-addon-test 8.4.5 を使用する
8.5 beta でも同様だったので可能であれば推奨されている Playwright を使った方は良さそう
関連
Modules: Packages | Node.js v23.5.0 Documentation
CIでVitestの実行が止まってしまうときは
実行環境のリソースが渋くてテストランナーがフリーズしてしまう場合は合わせて対策すると幸せになれるかもしれない