https://speakerdeck.com/sho0226 2026-04-30 04:10:07 -0400 Reactコンポーネントのテストで広く使われるJSDOMは、ブラウザ環境の代用品であり、レイアウト・イベント・非同期処理などで実ブラウザと差異があります。「テストは通るのに本番で動かない」問題が起こり得ます。 Vitest Browser Modeは実ブラウザ上でテストを実行するアプローチです。本トークでは、Testing Libraryからの移行を通じて見えた技術的な違いを深掘りします。 非同期アサーション: expect.element()とリトライ設計の関係 userEventのAPI設計: setup()が不要になった背景 イベント処理の違い: JSDOMで見逃される実ブラウザ特有の挙動 レンダリングと副作用: DOM APIやイベントループにより異なるuseEffectの振る舞い JSDOMの限界、実ブラウザテストのトレードオフ、選択基準を実例とともにお話しします。 Reactコンポーネントのテストで広く使われるJSDOMは、ブラウザ環境の代用品であり、レイアウト・イベント・非同期処理などで実ブラウザと差異があります。「テストは通るのに本番で動かない」問題が起こり得ます。 Vitest Browser Modeは実ブラウザ上でテストを実行するアプローチです。本トークでは、Testing Libraryからの移行を通じて見えた技術的な違いを深掘りします。 非同期アサーション: expect.element()とリトライ設計の関係 userEventのAPI設計: setup()が不要になった背景 イベント処理の違い: JSDOMで見逃される実ブラウザ特有の挙動 レンダリングと副作用: DOM APIやイベントループにより異なるuseEffectの振る舞い JSDOMの限界、実ブラウザテストのトレードオフ、選択基準を実例とともにお話しします。 Thu, 30 Apr 2026 00:00:00 -0400 https://speakerdeck.com/sho0226/jsdomnoxian-jie-toshi-burauzatesuto-vitest-browser-modeshi-jian https://speakerdeck.com/sho0226/jsdomnoxian-jie-toshi-burauzatesuto-vitest-browser-modeshi-jian