react-test-renderer + react-lazyloadでjestのsnapshotテストをしたいっ!

タイトルにテストをしたい!と書きましたが、実際は元々React17では動いていたんですが、React18にしたら動かなくなったので動かしたいっ!です。
React18はreact-lazyloadを使わなくても、React.lazy() / Suspenseで、似たようなことはできるんですが書き換えが多いので、とりあえずjest通してから少しずつ書き換えて行こうと思います。

コンポーネントは適当ですが、LazyLoadを使っています。

const Hoge: React.FC = () => {
  return (
    <LazyLoad>
      <Foo />
    </LazyLoad>
  );
};

これのテストをjest(react-test-renderer)で書いていました。

it('render', () => {
  const tree = renderer.carete(
    <Hoge />
  );

  expect(tree.toJSON()).toMatchSnapshot();
});

Unable to find node on an unmounted component.

実行すると、renderer.careteでエラーになるようです。

本来はforceVisible()を追加したら動く気はするんですが、、

it('render', () => {
  const tree = renderer.carete(
    <Hoge />
  );

  forceVisible();

  expect(tree.toJSON()).toMatchSnapshot();
});

エラーが変わらずなので、以下に修正。

// mockを追加
jest.mock('react-lazyload', () => ({ children }) => <div children={children} />);

it('render', () => {
  const tree = renderer.carete(
    <Hoge />
  );

  expect(tree.toJSON()).toMatchSnapshot();
});

testの目的としてlazyloadが正しく動くかどうかではなく、lazyloadの結果の方をチェックしたかったのでLazyLoadコンポーネントはそのまま中身(children)を返すようにmockしました。
これで無事にjestが動くようになりました👍

参考

Testing with jest. · Issue #120 · twobin/react-lazyload