問題タブ [react-error-boundary]
For questions regarding programming in ECMAScript (JavaScript/JS) and its various dialects/implementations (excluding ActionScript). Note JavaScript is NOT the same as Java! Please include all relevant tags on your question; e.g., [node.js], [jquery], [json], [reactjs], [angular], [ember.js], [vue.js], [typescript], [svelte], etc.
javascript - ErrorBoundary のフォールバック コンポーネントをテストするにはどうすればよいですか?
私はこのコンポーネントを持っています:
存在しない SVG が渡された状態をテストして、<ErrorBoundary />フォールバックをレンダリングしようとしています。ErrorBoundary はブラウザーで機能しますが、私のテストでは機能しません。
これは失敗したテストです:
次のエラー メッセージが表示されます。
TestingLibraryElementError: Unable to find a element by: [data-testid="icon-notdef"]".
テストで ErrorBoundary フォールバック UI にアクセスするにはどうすればよいですか?
編集
<ErrorBoundary />コンポーネントのコードは次のとおりです。
…そして、これは私がテストのために得たDOMの完全なエラーです:
最後に、私の SVG モック:
reactjs - Try AgainボタンでReact Error Boundaryの状態をリセットするにはどうすればよいですか?
私の Pokemon アプリケーションは、次のライブラリを使用しています: React Hook Form、React Query、および React Error Boundary。
リクエストが行われていないNo Pokemon Yet, Please Submit a Pokemon.場合はレンダリングされます。エラーが発生した場合はTry Again、代わりにボタンがレンダリングされますNo Pokemon Yet, Please Submit a Pokemon。Try Againボタンをクリックすると、がNo Pokemon Yet, Please Submit a Pokemon再び表示され、検索入力がリセットされ、ユーザーは再びクエリを作成できるようになります。
ただし、私の実装は機能していません。最初はNo Pokemon Yet, Please Submit a Pokemon、ユーザーがクエリを送信する前にレンダリングされていません。また、一致するものがないクエリを入力すると、エラー境界がトリガーされず、ユーザーに何が起こったのかが通知されず、Try Againボタンをクリックした後にクエリを再送信できません。DevTools Network タブで 404 が表示されます。
imgReact Error Boundary は、 fromがコメント解除されている場合にのみトリガーされPokemonInfoます。レンダリングしCannot read property 'front_default' of undefinedます。
私が間違っていることを教えてください。