PWA-3339: Header location should set to correct endpoint in case of 301|302

Author: glo11372

packages/peregrine/lib/talons/MagentoRoute/__tests__/useMagentoRoute.spec.js

@@ -38,8 +38,22 @@ jest.mock('@apollo/client', () => {
 const givenQueryResult = response => {
     useLazyQuery.mockReset();
     runQuery.mockReset();
+    const resolve = jest.fn().mockName('resolve');
+    const reject = jest.fn().mockName('reject');
     useLazyQuery.mockImplementation(() => {
-        return [runQuery, response];
+        // Create a promise that resolves to the mocked response
+        const queryPromise = new Promise((resolve, reject) => {
+            // Immediately resolve with the response
+            resolve(response);
+        });
+
+        // Return a tuple where the first item is an async function (runQuery) and the second is the response object
+        return [
+            async () => {
+                return await queryPromise; // Return the response when the promise resolves
+            },
+            response
+        ];
     });
 };
 
@@ -243,7 +257,8 @@ describe('returns NOT_FOUND when queries come back empty', () => {
 });
 
 describe('returns REDIRECT after receiving a redirect code', () => {
-    test('redirect code 301', async () => {
+    test('redirect code 301', () => {
+        // Arrange: Set up the query result
         givenQueryResult({
             data: {
                 route: {
@@ -256,15 +271,24 @@ describe('returns REDIRECT after receiving a redirect code', () => {
             loading: false
         });
 
-        await act(() => {
-            create(<Component />);
-        });
-
-        expect(replace).toHaveBeenCalledTimes(1);
-        expect(log).toHaveBeenCalledTimes(1);
-        expect(log).toHaveBeenNthCalledWith(1, {
-            isRedirect: true,
-            relativeUrl: '/foo.html'
+        // Create a new Promise to handle `act`
+        return new Promise(resolve => {
+            // Use `act` to render the component
+            act(() => {
+                // Render the component and resolve the promise
+                create(<Component />);
+                resolve();
+            });
+        }).then(() => {
+            // Assert that `replace` was called once
+            expect(replace).toHaveBeenCalledTimes(1);
+            // Assert that `log` was called once
+            expect(log).toHaveBeenCalledTimes(1);
+            // Assert that `log` was called with the expected arguments
+            expect(log).toHaveBeenNthCalledWith(1, {
+                isRedirect: true,
+                relativeUrl: '/foo.html'
+            });
         });
     });
 

packages/peregrine/lib/talons/MagentoRoute/useMagentoRoute.js

@@ -44,10 +44,10 @@ export const useMagentoRoute = (props = {}) => {
     const component = componentMap.get(pathname);
 
     const [runQuery, queryResult] = useLazyQuery(resolveUrlQuery);
-    const [getRouteData, setRouteData] = useState(null);
 
     // destructure the query result
-    const { error, loading } = queryResult;
+    const { data, error, loading } = queryResult;
+    const [getRouteData, setRouteData] = useState(data);
     const { route } = getRouteData || {};
 
     // redirect to external url
@@ -61,20 +61,35 @@ export const useMagentoRoute = (props = {}) => {
     }, [route]);
 
     useEffect(() => {
+        let isMounted = true; // Track whether the component is still mounted
         const runInitialQuery = async () => {
-            const { data } = await runQuery({
-                fetchPolicy: 'cache-and-network',
-                nextFetchPolicy: 'cache-first',
-                variables: { url: pathname }
-            });
-            setRouteData(data);
-            fetchedPathname.current = pathname;
+            try {
+                const { data } = await runQuery({
+                    fetchPolicy: 'cache-and-network',
+                    nextFetchPolicy: 'cache-first',
+                    variables: { url: pathname }
+                });
+
+                if (isMounted) {
+                    setRouteData(data);
+                    fetchedPathname.current = pathname;
+                }
+            } catch (error) {
+                if (isMounted) {
+                    console.error('Error running initial query:', error);
+                }
+            }
         };
         if (initialized.current || !getInlinedPageData()) {
             runInitialQuery();
         }
-    }, [initialized, pathname, runQuery]); // eslint-disable-line react-hooks/exhaustive-deps
-    
+        // Cleanup function
+        return () => {
+            isMounted = false; // Mark as unmounted
+        };
+    }, [initialized, pathname]);
+    // eslint-disable-line react-hooks/exhaustive-deps
+
     useEffect(() => {
         if (component) {
             return;