Merge pull request #21939 from jayeshmangwani/migrate_LHNTestUtils_functional

feat: Migrate LHNTestUtils.js to function component

Author: srikarparsi

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(<MockedSidebarLinks currentReportID={currentReportID} />);
+    } 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(
-        <ErrorBoundary>
-            <MockedSidebarLinks currentReportID={currentReportID} />
-        </ErrorBoundary>,
-    );
 }
 
 /**