React Testing Library を使用して jsdom で MUI コンポーネントをレンダリングすると、Mocha テスト エラーがスローされる

Question

enzyme はメンテナンスされておらず、react 18 をサポートしていないため、1750 以上の既存の単体テストを react-testing-library global-jsdom# に移行しようとしています。 ## を実行して、アプリケーションが最新バージョンの React を引き続き実行できるようにします。すべてのテストは mocha、chai、enzyme を使用して記述されており、移行をできるだけ簡単にしたいと考えています。言い換えれば、私は jest のようなまったく新しいフレームワークで 1750 以上のテストを書き直すつもりはありません。 私は、

react-testing-library

を使用して反応コンポーネントを単体テストする例に従おうとしています。 React.createElement を使用するときに 'div' や 'input' のような単純な要素を使用すると正常に動作しますが、マテリアル UI コンポーネントを使用するときは、エラーが発生します:

TypeError: null のプロパティを読み取ることができません (「登録済み」を読み取ります) C:\Users\user\Documents\project\node_modules@emotion\styled\base\dist\emotion-styled-base.cjs.dev.js:143:53

内

上記のエラーは <Styled(div)> コンポーネントで発生しました:

リーリー

エラー境界をツリーに追加して、エラー処理動作をカスタマイズすることを検討してください。エラー境界の詳細については、https://reactjs.org/link/error-boundaries にアクセスしてください。 スタック トレースは正確ではありませんが、

h(Box, {},...)

(mui 要素の作成) を実行しようとすると失敗します。

これは、レンダリングしようとしている

dummyComponent.js

です: リーリー これは mocha 単体テストです:

リーリー

MUI コンポーネントがレンダリングできるようにするためのコンテキストが不足しているように感じますが、何が問題なのか、これが実際に問題なのかどうかがわかりません。この特定のエラーに関する Google の検索結果はあまりありません。何か案は？

Answer 1

MUI ライブラリの依存関係によると、一部のレンダリング プロセスで @emotion/react および @emotion/styled が使用されていることがわかりました。これは問題があるようです。 MUI v5 では、キャッシュ オブジェクトが変更され、@emotion/react によって提供されたキャッシュ オブジェクトが誤って削除されてしまい、結果として TypeError: Cannot read property 'registered' of unknown エラーが発生しました。 cache.registered は新しいキャッシュに追加されません。

解決策: @emotion/react プロバイダー ({my コンポーネント}) をコンポーネント内でラップすることで、この問題を解決しました。 @emotion.react が提供する例に従ってみてください: https://emotion.sh/docs/cache-provider

また、次のコマンドを実行して、@emotion/react からの依存関係が正しくインストールされていることを確認します: npm install --save @emotion/react または yarn add @emotion/react

コードは次のようになります:

これは、より一般的な JSX 構文を使用した dummyComponent.js です:

リーリー

これは mocha 単体テストです:

リーリー

テスト ケースではいくつかの JSX 構文と const { Expect } = require('chai'); も使用していることに注意してください。これにより、 should と を使用できるようになります。 chai から他の関数​​をチェーン呼び出しします。