feat: upgrade react router to v6 (#1128)

* feat: upgrade react router to v6

* fix: all test cases affected by react router upgrade

* refactor: fix navigations

* fix: test cases affectewd due to lib-special-exams

* refactor: improve code coverage

src/generic/CourseAccessErrorPage.jsx

@@ -1,9 +1,8 @@
 import React, { useEffect } from 'react';
 import { LearningHeader as Header } from '@edx/frontend-component-header';
 import Footer from '@edx/frontend-component-footer';
-import { useParams } from 'react-router-dom';
+import { useParams, Navigate } from 'react-router-dom';
 import { useDispatch, useSelector } from 'react-redux';
-import { Redirect } from 'react-router';
 import { injectIntl, intlShape } from '@edx/frontend-platform/i18n';
 import useActiveEnterpriseAlert from '../alerts/active-enteprise-alert';
 import { AlertList } from './user-messages';
@@ -38,7 +37,7 @@ const CourseAccessErrorPage = ({ intl }) => {
     );
   }
   if (courseStatus === LOADED) {
-    return (<Redirect to={`/redirect/home/${courseId}`} />);
+    return <Navigate to={`/redirect/home/${courseId}`} replace />;
   }
   return (
     <>

src/generic/CourseAccessErrorPage.test.jsx

@@ -1,11 +1,13 @@
 import React from 'react';
 import { history } from '@edx/frontend-platform';
-import { Route } from 'react-router';
+import { Routes, Route } from 'react-router-dom';
 import { initializeTestStore, render, screen } from '../setupTest';
 import CourseAccessErrorPage from './CourseAccessErrorPage';
 
 const mockDispatch = jest.fn();
+const mockNavigate = jest.fn();
 let mockCourseStatus;
+
 jest.mock('react-redux', () => ({
   ...jest.requireActual('react-redux'),
   useDispatch: () => mockDispatch,
@@ -14,6 +16,10 @@ jest.mock('react-redux', () => ({
 jest.mock('./PageLoading', () => function () {
   return <div data-testid="page-loading" />;
 });
+jest.mock('react-router-dom', () => ({
+  ...(jest.requireActual('react-router-dom')),
+  useNavigate: () => mockNavigate,
+}));
 
 describe('CourseAccessErrorPage', () => {
   let courseId;
@@ -28,33 +34,36 @@ describe('CourseAccessErrorPage', () => {
   it('Displays loading in start on page rendering', () => {
     mockCourseStatus = 'loading';
     render(
-      <Route path="/course/:courseId/access-denied">
-        <CourseAccessErrorPage />
-      </Route>,
+      <Routes>
+        <Route path="/course/:courseId/access-denied" element={<CourseAccessErrorPage />} />
+      </Routes>,
+      { wrapWithRouter: true },
     );
     expect(screen.getByTestId('page-loading')).toBeInTheDocument();
-    expect(history.location.pathname).toBe(accessDeniedUrl);
+    expect(window.location.pathname).toBe(accessDeniedUrl);
   });
 
   it('Redirect user to homepage if user has access', () => {
     mockCourseStatus = 'loaded';
     render(
-      <Route path="/course/:courseId/access-denied">
-        <CourseAccessErrorPage />
-      </Route>,
+      <Routes>
+        <Route path="/course/:courseId/access-denied" element={<CourseAccessErrorPage />} />
+      </Routes>,
+      { wrapWithRouter: true },
     );
-    expect(history.location.pathname).toBe('/redirect/home/course-v1:edX+DemoX+Demo_Course');
+    expect(window.location.pathname).toBe('/redirect/home/course-v1:edX+DemoX+Demo_Course');
   });
 
   it('For access denied it should render access denied page', () => {
     mockCourseStatus = 'denied';
 
     render(
-      <Route path="/course/:courseId/access-denied">
-        <CourseAccessErrorPage />
-      </Route>,
+      <Routes>
+        <Route path="/course/:courseId/access-denied" element={<CourseAccessErrorPage />} />
+      </Routes>,
+      { wrapWithRouter: true },
     );
     expect(screen.getByTestId('access-denied-main')).toBeInTheDocument();
-    expect(history.location.pathname).toBe(accessDeniedUrl);
+    expect(window.location.pathname).toBe(accessDeniedUrl);
   });
 });

src/generic/path-fixes/PathFixesProvider.jsx

@@ -1,4 +1,4 @@
-import { Redirect, useLocation } from 'react-router-dom';
+import { Navigate, useLocation } from 'react-router-dom';
 import PropTypes from 'prop-types';
 
 import { sendTrackEvent } from '@edx/frontend-platform/analytics';
@@ -16,10 +16,10 @@ const PathFixesProvider = ({ children }) => {
 
   // We only check for spaces. That's not the only kind of character that is escaped in URLs, but it would always be
   // present for our cases, and I believe it's the only one we use normally.
-  if (location.pathname.includes(' ')) {
+  if (location.pathname.includes(' ') || location.pathname.includes('%20')) {
     const newLocation = {
       ...location,
-      pathname: location.pathname.replaceAll(' ', '+'),
+      pathname: (location.pathname.replaceAll(' ', '+')).replaceAll('%20', '+'),
     };
 
     sendTrackEvent('edx.ui.lms.path_fixed', {
@@ -29,7 +29,7 @@ const PathFixesProvider = ({ children }) => {
       search: location.search,
     });
 
-    return (<Redirect to={newLocation} />);
+    return (<Navigate to={newLocation} replace />);
   }
 
   return children; // pass through

src/generic/path-fixes/PathFixesProvider.test.jsx

@@ -1,5 +1,7 @@
 import React from 'react';
-import { MemoryRouter, Route } from 'react-router-dom';
+import {
+  MemoryRouter, Route, Routes, useLocation,
+} from 'react-router-dom';
 
 import { sendTrackEvent } from '@edx/frontend-platform/analytics';
 
@@ -19,16 +21,20 @@ describe('PathFixesProvider', () => {
   });
 
   function buildAndRender(path) {
+    const LocationComponent = () => {
+      testLocation = useLocation();
+      return null;
+    };
+
     render(
       <MemoryRouter initialEntries={[path]}>
         <PathFixesProvider>
-          <Route
-            path="*"
-            render={routeProps => {
-              testLocation = routeProps.location;
-              return null;
-            }}
-          />
+          <Routes>
+            <Route
+              path="*"
+              element={<LocationComponent />}
+            />
+          </Routes>
         </PathFixesProvider>
       </MemoryRouter>,
     );