react-test-renderer + react-lazyloadでjestのsnapshotテストをしたいっ!
2023年7月15日
タイトルにテストをしたい!と書きましたが、実際は元々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が動くようになりました👍