StroybookのインタラクションテストでTanstack Queryのキャッシュをクリアする

前提

• Stroybookのインタラクションテストの課題
• MSW /Tanstack Queryを活用

課題

Stroybookのインタラクションテストを活用してテストを実行していると、テストケースごとにデータのパターンを切り替えたいことがあると思います。
MSW /Tanstack Queryを活用していると、Tanstack Queryのキャッシュが原因でCIで実行した場合にテストデータが切り替わらないという問題にはまりました。

解決方法

テストケースごとにQueryClientProviderを適用させてあげることで解消しました。
Storybookではdecoratorsで各ストーリーにProveiderをラップさせることができます。
以下のようにdecorators関数を用意して、適用させています。

decorators: decorators({StoryFn: <Component />, queryClient: new QueryClient({defaultOptions: queryConfig})}), // 共通のqueryConfigをimport
  parameters: {
    msw: {
      handlers: [],　// storyごとに切り替えたいhandlersを指定する
    },
  },
  play:~~

// decorators関数
const withQueryClientProviders =
  ({StoryFn, queryClient}: ProvidersProps): ProvidersReturnType =>
  () =>
    <QueryClientProvider client={queryClient}>{StoryFn}</QueryClientProvider>

export const decorators = ({StoryFn, queryClient}: ProvidersProps): ProvidersReturnType[] => [
  withQueryClientProviders({StoryFn, queryClient}),
]

最後に

リアーキテクチャプロジェクトでインタラクションテストWith MSWを採用しましたが、今回の記事のようにハマったポイントもありつつ、非常に良いテストが書けていると感じています。
実践的なテストが書けること、Storybookで確認するためデザイン不備やassertしていない箇所の不具合に気付くことなど多くのメリットがあるため、導入をお勧めします！