Jestを使ってテストを行う際に、Rechartsが原因で通らなかった時の対処

はじめに

Rechartsを使ったコンポーネントをJestによってテストしていたところ、Recharts以下のコンポーネントを読み取っていないことに気がついた。
例として

<div
    class="recharts-responsive-container"
    style="width: 100%; height: 100%; min-width: 0;"
/>
</div>

のようにJestが認識していた。このためRcharts内の要素を読み取ることが出来ず、テストを失敗していた。

対処

基本的に以下を参考にすることで可能であった。

How to test if BarChart renders with Jest? #2982

具体的にはテストを行うファイルの一番上に

jest.mock('recharts', () => {
   const OriginalModule = jest.requireActual('recharts')
   return {
       ...OriginalModule,
       ResponsiveContainer: ({ children }) => (
           <OriginalModule.ResponsiveContainer width={800} height={800}>
               {children}
           </OriginalModule.ResponsiveContainer>
       ),
   }
})

を追加する必要がある。

また、TypeScriptの場合は

jest.mock('recharts', () => {
  const OriginalModule = jest.requireActual('recharts');
  return {
    ...OriginalModule,
    ResponsiveContainer: ({ children }: { children: React.ReactNode }) => (
      <OriginalModule.ResponsiveContainer width={800} height={800}>
        {children}
      </OriginalModule.ResponsiveContainer>
    ),
  };
});

のように{Children}の型を明記してあげる必要がある。

終わりに

Recahrtsを使ったテストに少し困ったので、自分が行なった対処法を共有したいと思いました。
この記事がお役に立てれば光栄です。