- この記事を書いた時の @mui/x-data-grid のバージョン: 5.5.1
問題
MUI の DataGrid を Jest でテストする場合に、jsdom 上で全てがレンダリングされない問題が発生することがあります。一部の行がレンダリングされなかったり、カラムについても一部だけがレンダリングされたりすることがあります。
そのため react testing library の findByText などで表示されるはずのエレメントを探してもテストが落ちるとか、toMatchSnapshot で記録されるスナップショットファイルの中に表示されるべき列が記録されないといった問題が発生します。
- 表示されているはずの列が Jest 上の testing-library から見つからない
- スナップショットを撮ってみると、その中に一部の行や列が含まれていないので正しくリグレッションテストができない
- Storybook での表示とスナップショットが一致しない
解決方法
この問題を解決する方法は簡単で、DataGrid の disableVirtualization プロパティを true に設定すると、一部が欠けること無くレンダリングされるようになります。
しかし、プロダクションの動作ではこのプロパティを true にはしない方がいいと思いますので、ラップしているコンポーネントがある場合には、そのコンポーネントにも disableVirtualization プロパティを持たせて、Dそこから DataGrid に引き継ぐようにして、テストの時だけそれを true に設定するようにしたら良いでしょう。
参考
disableVirtualizationプロパティを使用して仮想化を完全に無効にすることができます。jsdom やヘッドレスブラウザでグリッドをテストできるようにするには、オフにすることをお勧めします。
注：仮想化を無効にすると、DOMのサイズが大きくなり、パフォーマンスが大幅に低下します。テスト目的または小さなデータセットでのみ使用してください。
感想
MUI では、DataGrid に限らず jsdom で挙動が変わる物が結構あるように思います。あるはずのエレメントが見つからないとか、イベントがうまく処理されないとか。
そういうのも含めて付き合っていかないといけないのかなと思っています。