現在、npm モジュールを同期的loadable.libにロードするために使用されていた約 20 個の新しいファイルに対して、遅延ロードを使用しています。変更はドラフト PR で待機中ですが、渡されたモジュールがロードされるreact-toastifyのを待機しないため、単体テストが壊れているようです。loadable.lib

予想された結果

以前とまったく同じように動作するようにモックできloadable.libますが、指定されたライブラリを同期的にロードします。単体テストでは、loadable.lib結果のコンポーネントの子がそのライブラリにアクセスできるため、最初のレンダリングでこれが正常に実行されます。

実績

古いスナップショット (タグとネストされたものと小道具でいっぱい) と新しいスナップショット ( null) は一致しません。これらは機能しません:

一部のライブラリがロードされるのを待つ代わりに、関数をモックloadable.libしてその子をレンダリングすることが可能である場合、コードが使用する未定義の変数をどのように埋めることができるかわかりません。の上。

webpackPrefetchやなどの WebPack のヒントがいくつかあることを読みましたがwebpackPreload、それが良い道であるかどうかはわかりません。

私が試したことに関する関連リンク

1. 私が取り組んでいるコード (そして、このようなファイルが他に 19 個あります): https://github.com/silviubogan/volto/blob/1d015c145e562565ecfa058629ae3d7a9f3e39e4/src/components/manage/Actions/Actions.jsx (現在作業中です)読み込みreact-toastify中はloadable.lib常に。)

2. https://medium.com/pixel-and-ink/testing-loadable-components-with-jest-97bfeaa6da0b - その記事のコードと同様のことをしようとしましたが、うまくいきません:

ちょっとしたコード

上記のリンクから取得した、これは私が現在react-toastify（という名前LoadableToast）を使用する方法です：

結論

言い換えれば、動的インポートをモックするにはどうすればよいですか? テストが値を受け取るのを待たせるのではなく、jest を遅延読み込みに移行させて値を提供するにはどうすればよいですか?

ありがとうございました！

更新 1

次の新しいコードでは、まだ機能していません:

システムに大きなアプリからのクローンがあります。実行した後npm install、これは私のログです:

その後、実行したときnpm startのログは次のとおりです。

私はプロジェクトが混乱していることを知っています。

私の反応プロジェクトは Razzle.js を使用して作成され、最近リポジトリからダウンロードしました。このプロジェクトを実行しようとしていますyarn startが、この画面で立ち往生しています。ソースがコンパイルされ、サーバーが で実行されていることを示していますが、サーバーが起動しlocalhost:3000ません。