SWR を使用したコンポーネントのテストで msw を使うとテストが失敗する
に公開背景
testing library で SWR を使用するコンポーネントのテストを作成していました。
ネットワークリクエストのレスポンスによって表示が変わることをテストするために、レスポンスごとのテストを作成し、msw の server.use() を使ってレスポンスを mock していました。
しかし、それぞれのテストを１つずつ実行する場合は成功しますが、すべてを通して実行しようとしたときに、最初のテストだけ成功して、後続のテストが失敗してしまっていました。
解決方法
render 時に <SWRConfig value={{ dedupingInterval: 0 }}> でラップする。
<SWRConfig value={{ dedupingInterval: 0 }}>
<TestComponent id=“foo” />
</SWRConfig>補足
SWR は一定期間の間に同じキーのリクエストが発生した場合、重複とみなしてリクエストを排除します。（デフォルトで 2000 ms）
テストでは同じキーを使い短時間でリクエストを行っていたため、ネットワークリクエストが排除されてしまい、msw による mock が行われていませんでした。
SWRConfig で dupingInterval を指定することで同じキーを重複とみなす間隔を指定することができ、0 を指定して重複の排除を無効化することで各テストで mock が行われるようになります。