diff --git a/tests/utils/LHNTestUtils.js b/tests/utils/LHNTestUtils.js
index 25df3fb01885..c00c69c3532a 100644
--- a/tests/utils/LHNTestUtils.js
+++ b/tests/utils/LHNTestUtils.js
@@ -168,37 +168,21 @@ function getAdvancedFakeReport(isArchived, isUserCreatedPolicyRoom, hasAddWorksp
* @param {String} [currentReportID]
*/
function getDefaultRenderedSidebarLinks(currentReportID = '') {
- // An ErrorBoundary needs to be added to the rendering so that any errors that happen while the component
- // renders are logged to the console. Without an error boundary, Jest only reports the error like "The above error
- // occurred in your component", except, there is no "above error". It's just swallowed up by Jest somewhere.
- // With the ErrorBoundary, those errors are caught and logged to the console so you can find exactly which error
- // might be causing a rendering issue when developing tests.
- class ErrorBoundary extends React.Component {
- // Error boundaries have to implement this method. It's for providing a fallback UI, but
- // we don't need that for unit testing, so this is basically a no-op.
- static getDerivedStateFromError(error) {
- return {error};
- }
+ // A try-catch block needs to be added to the rendering so that any errors that happen while the component
+ // renders are caught and logged to the console. Without the try-catch block, Jest might only report the error
+ // as "The above error occurred in your component", without providing specific details. By using a try-catch block,
+ // any errors are caught and logged, allowing you to identify the exact error that might be causing a rendering issue
+ // when developing tests.
- componentDidCatch(error, errorInfo) {
- console.error(error, errorInfo);
- }
-
- render() {
- // eslint-disable-next-line react/prop-types
- return this.props.children;
- }
+ try {
+ // Wrap the SideBarLinks inside of LocaleContextProvider so that all the locale props
+ // are passed to the component. If this is not done, then all the locale props are missing
+ // and there are a lot of render warnings. It needs to be done like this because normally in
+ // our app (App.js) is when the react application is wrapped in the context providers
+ render();
+ } catch (error) {
+ console.error(error);
}
-
- // Wrap the SideBarLinks inside of LocaleContextProvider so that all the locale props
- // are passed to the component. If this is not done, then all the locale props are missing
- // and there are a lot of render warnings. It needs to be done like this because normally in
- // our app (App.js) is when the react application is wrapped in the context providers
- render(
-
-
- ,
- );
}
/**