enzyme はメンテナンスされておらず、react 18 をサポートしていないため、1750 以上の既存の単体テストを react-testing-library global-jsdom# に移行しようとしています。 ## を実行して、アプリケーションが最新バージョンの React を引き続き実行できるようにします。すべてのテストは mocha、chai、enzyme を使用して記述されており、移行をできるだけ簡単にしたいと考えています。言い換えれば、私は jest のようなまったく新しいフレームワークで 1750 以上のテストを書き直すつもりはありません。
私は、
を使用して反応コンポーネントを単体テストする例に従おうとしています。 React.createElement を使用するときに 'div' や 'input' のような単純な要素を使用すると正常に動作しますが、マテリアル UI コンポーネントを使用するときは、エラーが発生します:
内dummyComponent.js上記のエラーは <Styled(div)> コンポーネントで発生しました:
リーリーエラー境界をツリーに追加して、エラー処理動作をカスタマイズすることを検討してください。エラー境界の詳細については、https://reactjs.org/link/error-boundaries にアクセスしてください。 スタック トレースは正確ではありませんが、
h(Box, {},...)(mui 要素の作成) を実行しようとすると失敗します。
これは、レンダリングしようとしている
です:
リーリー
これは mocha 単体テストです:
MUI コンポーネントがレンダリングできるようにするためのコンテキストが不足しているように感じますが、何が問題なのか、これが実際に問題なのかどうかがわかりません。この特定のエラーに関する Google の検索結果はあまりありません。何か案は？
![[Web フロントエンド] Node.js クイック スタート](https://img.php.cn/upload/course/000/000/067/662b5d34ba7c0227.png)
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 から他の関数をチェーン呼び出しします。