Reactのテストのハマりどころ1選

この記事はSTORES Advent Calendar 2025の2日目の記事です。

こんにちは。Webエンジニアをしているotariidaeです。

フロントエンドのテストを取り巻く環境は充実してきています。最近ではVitest Browser Modeの安定版リリースが記憶に新しいですね。STORES 社内ではVitestとTesting Libraryの組み合わせた構成がよく用いられています。

さてこの記事では、私がReactのテストを書く中でハマったポイントとその解決策を1つご紹介します。

ハマりどころ：テストケース間で状態が分離されていない

テストケースは互いに独立しているべきです。しかし前のテストのデータや状態がリセットされずに共有されてしまい、次のテストに影響を与えてしまうことがしばしばあります。

この問題は、グローバルな状態管理やキャッシュを利用するライブラリで発生しがちです。私が実際に経験した2つのライブラリの具体例を見てみます。

SWR

なにもしないとテストケース間でキャッシュが共有されてしまいます。

解決策：<SWRConfig> で囲う

import { SWRConfig } from "swr"

const screen = await render(
  <SWRConfig value={{ provider: () => new Map() }}>
    <YourComponent />
  </SWRConfig>
)

参照：Cache – SWR

Jotai

なにもしないとプロバイダーレスモードとなりテストケース間で状態が共有されてしまいます。

解決策：<Provider> で囲う

import { Provider } from "jotai"

const screen = await render(
  <Provider>
    <YourComponent />
  </Provider>
)

参照：Provider — Jotai, primitive and flexible state management for React

おわりに

解決策はとてもシンプルなものの意外と気付きづらいハマりどころについてご紹介しました。 単体だと通るけれど全体で流すと落ちるテストは、状態が分離できているか疑ってみると良いかもしれません。

意図せぬ状態の共有に気をつけてみなさんも健康的なテスト生活を！