feat: upgrade react router dom to v6 (#314)

* feat: upgrade react router dom to v6 * chore: update dependencies * fix: page reload issue * fix: test case affected by useLocation * fix: ci issue
openedx · Oct 3, 2023 · 7a14626 · 7a14626
1 parent 6519c3d
commit 7a14626
Show file tree

Hide file tree

Showing 6 changed files with 1,492 additions and 1,619 deletions.
diff --git a/package-lock.json b/package-lock.json
diff --git a/package.json b/package.json
@@ -35,12 +35,12 @@
   "dependencies": {
     "@edx/brand": "npm:@edx/[email protected]",
     "@edx/brand-openedx": "^1.1.0",
-    "@edx/frontend-component-footer": "npm:@edx/frontend-component-footer-edx@^6.2.0",
-    "@edx/frontend-component-header": "npm:@edx/frontend-component-header-edx@^7.4.0",
-    "@edx/frontend-enterprise-catalog-search": "4.6.0",
-    "@edx/frontend-enterprise-hotjar": "1.4.0",
-    "@edx/frontend-enterprise-utils": "3.5.0",
-    "@edx/frontend-platform": "4.6.1",
+    "@edx/frontend-component-footer": "npm:@edx/frontend-component-footer-edx@^6.4.0",
+    "@edx/frontend-component-header": "npm:@edx/frontend-component-header-edx@^7.10.3",
+    "@edx/frontend-enterprise-catalog-search": "5.0.0",
+    "@edx/frontend-enterprise-hotjar": "2.0.0",
+    "@edx/frontend-enterprise-utils": "4.0.0",
+    "@edx/frontend-platform": "5.1.0",
     "@edx/paragon": "20.46.2",
     "algoliasearch": "4.19.1",
     "babel-polyfill": "6.26.0",
@@ -58,8 +58,8 @@
     "react-helmet": "6.1.0",
     "react-instantsearch-dom": "6.40.4",
     "react-redux": "7.2.9",
-    "react-router": "5.3.4",
-    "react-router-dom": "5.3.4",
+    "react-router": "6.15.0",
+    "react-router-dom": "6.15.0",
     "react-test-renderer": "17.0.2",
     "redux": "4.2.1",
     "redux-devtools-extension": "2.13.9",

diff --git a/src/components/app/App.jsx b/src/components/app/App.jsx
@@ -1,6 +1,6 @@
 import React, { useEffect } from 'react';
-import { Switch } from 'react-router-dom';
-import { AppProvider, PageRoute } from '@edx/frontend-platform/react';
+import { Routes, Route } from 'react-router-dom';
+import { AppProvider, PageWrap } from '@edx/frontend-platform/react';
 
 import Header from '@edx/frontend-component-header';
 import Footer from '@edx/frontend-component-footer';
@@ -13,10 +13,10 @@ import NotFoundPage from '../NotFoundPage';
 export const EnterpriseCatalogsApp = () => (
   <>
     <Header />
-    <Switch>
-      <PageRoute exact path="/" component={CatalogPage} />
-      <PageRoute path="*" component={NotFoundPage} />
-    </Switch>
+    <Routes>
+      <Route path="/" element={<PageWrap><CatalogPage /></PageWrap>} />
+      <Route path="*" element={<PageWrap><NotFoundPage /></PageWrap>} />
+    </Routes>
     <Footer />
   </>
 );

diff --git a/src/components/catalogPage/CatalogPage.jsx b/src/components/catalogPage/CatalogPage.jsx
@@ -9,6 +9,7 @@ import {
   SEARCH_FACET_FILTERS,
 } from '@edx/frontend-enterprise-catalog-search';
 import { getConfig } from '@edx/frontend-platform';
+import { useLocation } from 'react-router-dom';
 import { CatalogSearch } from '../catalogs';
 import Subheader from '../subheader/subheader';
 import Hero from '../hero/Hero';
@@ -36,6 +37,7 @@ if (
 }
 
 const CatalogPage = ({ intl }) => {
+  const location = useLocation();
   const config = getConfig();
   // Default routing:
   //   1. If our url on load does not have a catalog parameter set, set one.
@@ -44,7 +46,7 @@ const CatalogPage = ({ intl }) => {
   // Doing this via Url Params will cause a page reload for visitors coming from the main URL, but
   // it's the only way to keep infinite loops out of the rest of the page and display data that
   // is cohesive with those Url params the rest of the time.
-  const loadedSearchParams = new URLSearchParams(window.location.search);
+  const loadedSearchParams = new URLSearchParams(location.search);
   let reloadPage = false;
   let hideCards = false;
 

diff --git a/src/components/catalogPage/CatalogPage.test.jsx b/src/components/catalogPage/CatalogPage.test.jsx
@@ -1,6 +1,7 @@
 import { screen } from '@testing-library/react';
 import '@testing-library/jest-dom/extend-expect';
 import React from 'react';
+import { useLocation } from 'react-router-dom';
 import { mockWindowLocations, renderWithRouter } from '../tests/testUtils';
 import CatalogPage from './CatalogPage';
 import selectionCardMessage from '../catalogSelectionDeck/CatalogSelectionDeck.messages';
@@ -27,6 +28,11 @@ jest.mock('@edx/frontend-platform', () => ({
   getConfig: () => mockConfig(),
 }));
 
+jest.mock('react-router-dom', () => ({
+  ...jest.requireActual('react-router-dom'),
+  useLocation: jest.fn(),
+}));
+
 mockWindowLocations();
 
 describe('CatalogPage', () => {
@@ -40,14 +46,17 @@ describe('CatalogPage', () => {
     features.CONSOLIDATE_SUBS_CATALOG = true;
   });
   it('renders a catalog page component', () => {
+    useLocation.mockReturnValue({ search: '' });
     const { container } = renderWithRouter(<CatalogPage />);
     expect(container.querySelector('.hero')).toBeInTheDocument();
   });
   it('renders the catalog search component', () => {
+    useLocation.mockReturnValue({ search: '' });
     renderWithRouter(<CatalogPage />);
     expect(screen.getByText('SEARCH')).toBeInTheDocument();
   });
   it('renders with catalog selection cards', () => {
+    useLocation.mockReturnValue({ search: '' });
     renderWithRouter(<CatalogPage />);
     expect(
       screen.getByText(
@@ -75,6 +84,7 @@ describe('CatalogPage', () => {
       writable: true,
       value: location,
     });
+    useLocation.mockReturnValue({ search: '?q=' });
     expect(window.location.search).toEqual('?q=');
     renderWithRouter(<CatalogPage />);
     expect(window.location.search).toEqual(
@@ -90,6 +100,7 @@ describe('CatalogPage', () => {
       writable: true,
       value: location,
     });
+    useLocation.mockReturnValue({ search: `?${LEARNING_TYPE_REFINEMENT}=Executive Education&${LEARNING_TYPE_REFINEMENT}=ayylmao&enterprise_catalog_query_titles=foobar` });
     expect(window.location.search).toEqual(`?${LEARNING_TYPE_REFINEMENT}=Executive Education&${LEARNING_TYPE_REFINEMENT}=ayylmao&enterprise_catalog_query_titles=foobar`);
     renderWithRouter(<CatalogPage />);
     // Assert learning type: exec ed has been removed but not learning type `ayylmao`

diff --git a/src/components/tests/testUtils.jsx b/src/components/tests/testUtils.jsx
@@ -5,8 +5,7 @@ import { render } from '@testing-library/react';
 import { AppContext } from '@edx/frontend-platform/react';
 import { IntlProvider } from '@edx/frontend-platform/i18n';
 import { messages as headerMessages } from '@edx/frontend-component-header';
-import { Router } from 'react-router-dom';
-import { createMemoryHistory } from 'history';
+import { MemoryRouter as Router } from 'react-router-dom';
 
 const TEST_CONFIG = {
 
@@ -15,19 +14,15 @@ const TEST_CONFIG = {
   ALGOLIA_SEARCH_API_KEY: 'key',
 };
 
-export const renderWithRouter = (ui, { route } = {}) => {
-  const history = createMemoryHistory();
-  if (route) {
-    history.push(route);
-  }
+export const renderWithRouter = (ui, { route } = { route: '/' }) => {
   const locale = 'en';
   return render(
     <AppContext.Provider
       // eslint-disable-next-line react/jsx-no-constructed-context-values
       value={{ authenticatedUser: null, config: TEST_CONFIG, locale }}
     >
       <IntlProvider locale={locale} messages={headerMessages[locale]}>
-        <Router history={history}>{ui}</Router>
+        <Router initialEntries={[route]}>{ui}</Router>
       </IntlProvider>
     </AppContext.Provider>,
   );