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が動くようになりました👍