Upgrade react-router #942

.yarn/patches/vitest-npm-3.2.4-7a07f931b1.patch

@@ -0,0 +1,54 @@
+diff --git a/dist/chunks/index.CmSc2RE5.js b/dist/chunks/index.CmSc2RE5.js
+index 90004b3064c731a22f584000525e0bff3f423867..7fa0351ff36a5d21640520685420046298b71959 100644
+--- a/dist/chunks/index.CmSc2RE5.js
++++ b/dist/chunks/index.CmSc2RE5.js
+@@ -3,8 +3,6 @@ import { Console } from 'node:console';
+ // SEE https://github.com/jsdom/jsdom/blob/master/lib/jsdom/living/interfaces.js
+ const LIVING_KEYS = [
+ 	"DOMException",
+-	"URL",
+-	"URLSearchParams",
+ 	"EventTarget",
+ 	"NamedNodeMap",
+ 	"Node",
+@@ -161,9 +159,6 @@ const LIVING_KEYS = [
+ 	"ShadowRoot",
+ 	"MutationObserver",
+ 	"MutationRecord",
+-	"Headers",
+-	"AbortController",
+-	"AbortSignal",
+ 	"Uint8Array",
+ 	"Uint16Array",
+ 	"Uint32Array",
+@@ -441,9 +436,6 @@ var jsdom = {
+ 		// https://nodejs.org/dist/latest/docs/api/globals.html
+ 		const globalNames = [
+ 			"structuredClone",
+-			"fetch",
+-			"Request",
+-			"Response",
+ 			"BroadcastChannel",
+ 			"MessageChannel",
+ 			"MessagePort",
+@@ -454,6 +446,20 @@ var jsdom = {
+ 			const value = globalThis[name];
+ 			if (typeof value !== "undefined" && typeof dom.window[name] === "undefined") dom.window[name] = value;
+ 		}
++		const overrideGlobals = [
++			"fetch",
++			"Request",
++			"Response",
++			"Headers",
++			"AbortController",
++			"AbortSignal",
++			"URL",
++			"URLSearchParams",
++		];
++		for (const name of overrideGlobals) {
++			const value = globalThis[name];
++			if (typeof value !== "undefined") dom.window[name] = value;
++		}
+ 		return {
+ 			getVmContext() {
+ 				return dom.getInternalVMContext();

package.json

@@ -17,32 +17,29 @@
     "@types/js-cookie": "3.0.1",
     "@types/react-dom": "18.3.7",
     "@types/react-redux-toastr": "8.0.0",
-    "@types/react-router-dom": "5.3.3",
     "@types/redux-logger": "3.0.8",
     "@vitejs/plugin-react": "^5.0.0",
-    "axios": "1.13.5",
+    "axios": "1.13.6",
     "browserslist": "4.28.1",
     "browserslist-to-esbuild": "2.1.1",
-    "connected-react-router": "6.9.3",
     "husky": "9.1.7",
     "i18next": "25.10.3",
     "i18next-browser-languagedetector": "8.2.0",
     "i18next-http-backend": "3.0.2",
     "js-cookie": "3.0.1",
     "loglevel": "1.9.1",
     "prettier": "3.8.1",
-    "prop-types": "15.8.1",
     "react": "18.3.1",
     "react-dom": "18.3.1",
     "react-i18next": "16.6.0",
     "react-joyride": "2.9.3",
     "react-redux": "8.1.2",
     "react-redux-toastr": "8.0.0",
-    "react-router-dom": "5.3.0",
+    "react-router": "7.13.1",
     "redux": "4.2.1",
     "redux-logger": "3.0.6",
     "redux-thunk": "3.1.0",
-    "single-spa": "5.9.4",
+    "single-spa": "6.0.3",
     "typeface-roboto": "1.1.13",
     "typescript": "5.9.2",
     "vite": "5.4.21"
@@ -88,10 +85,8 @@
     "@types/node": "24.12.0",
     "@types/react": "18.3.23",
     "@types/react-redux": "7.1.20",
-    "@types/react-router": "5.1.20",
     "@types/redux-mock-store": "1.5.0",
-    "@vitest/coverage-v8": "2.1.9",
-    "axios-mock-adapter": "1.22.0",
+    "@vitest/coverage-v8": "3.2.4",
     "concurrently": "9.2.0",
     "cookie-parser": "1.4.5",
     "cors": "2.8.5",
@@ -116,7 +111,7 @@
     "serve": "14.2.0",
     "start-server-and-test": "~2.1.0",
     "typescript-eslint": "8.57.0",
-    "vitest": "2.1.9",
+    "vitest": "patch:vitest@npm%3A3.2.4#~/.yarn/patches/vitest-npm-3.2.4-7a07f931b1.patch",
     "wait-on": "9.0.4"
   },
   "packageManager": "yarn@4.13.0"

src/App.test.tsx

@@ -2,6 +2,7 @@ import { useMediaQuery } from '@mui/material';
 import { act, fireEvent, render, screen } from '@testing-library/react';
 import axios from 'axios';
 import { createRoot } from 'react-dom/client';
+import * as AppImport from './App';
 import App, { AppSansHoc } from './App';
 import { RegisterRouteType } from './state/scigateway.types';
 import { flushPromises } from './testUtils';
@@ -88,10 +89,7 @@ describe('App', () => {
     );
     window.matchMedia = vi.fn().mockReturnValue({ matches: true });
 
-    Object.defineProperty(window, 'location', {
-      configurable: true,
-      value: { reload: vi.fn() },
-    });
+    const reloadSpy = vi.spyOn(AppImport, 'reload').mockReturnValue();
 
     vi.useFakeTimers();
 
@@ -145,7 +143,7 @@ describe('App', () => {
     expect(screen.getByText('test message')).toBeInTheDocument();
 
     // should not refresh page when maintenance state changes from false to true
-    expect(window.location.reload).not.toHaveBeenCalled();
+    expect(reloadSpy).not.toHaveBeenCalled();
 
     vi.mocked(axios.get).mockImplementation(() =>
       Promise.resolve({
@@ -163,6 +161,6 @@ describe('App', () => {
     });
 
     // should refresh page when maintenance state changes from true to false
-    expect(window.location.reload).toHaveBeenCalled();
+    expect(reloadSpy).toHaveBeenCalled();
   });
 });

src/App.tsx

@@ -1,14 +1,10 @@
-import { ConnectedRouter, routerMiddleware } from 'connected-react-router';
-import { createBrowserHistory } from 'history';
 import * as log from 'loglevel';
 import * as React from 'react';
 import { WithTranslation, withTranslation } from 'react-i18next';
 import { Provider } from 'react-redux';
 import { AnyAction, applyMiddleware, compose, createStore } from 'redux';
 import { createLogger } from 'redux-logger';
 import { thunk, ThunkDispatch } from 'redux-thunk';
-import PageContainer from './pageContainer.component';
-import { Preloader } from './preloader/preloader.component';
 import {
   configureSite,
   loadMaintenanceState,
@@ -19,19 +15,16 @@ import ScigatewayMiddleware, {
 } from './state/middleware/scigateway.middleware';
 import AppReducer from './state/reducers/App.reducer';
 import { StateType } from './state/state.types';
-import { ConnectedThemeProvider } from './theming';
 // This order needed for the App.css to apply to toasts correctly
 import ReduxToastr from 'react-redux-toastr';
+import { BrowserRouter } from 'react-router';
+import { reload as reloadPage } from './App';
 import './App.css';
+import PageContainer from './pageContainer.component';
+import { Preloader } from './preloader/preloader.component';
+import { ConnectedThemeProvider } from './theming';
 
-const history = createBrowserHistory();
-
-const middleware = [
-  thunk,
-  routerMiddleware(history),
-  ScigatewayMiddleware,
-  autoLoginMiddleware,
-];
+const middleware = [thunk, ScigatewayMiddleware, autoLoginMiddleware];
 if (import.meta.env.MODE === 'development') {
   const logger = createLogger({ collapsed: true });
   middleware.push(logger);
@@ -46,7 +39,7 @@ const composeEnhancers =
 /* eslint-enable */
 
 const store = createStore(
-  AppReducer(history),
+  AppReducer(),
   composeEnhancers(applyMiddleware(...middleware))
 );
 
@@ -68,6 +61,12 @@ const toastrConfig = (): React.ReactElement => (
   />
 );
 
+// Have to have this as separate function and re-import this function
+// to ensure we can mock this properly in unit tests
+export function reload() {
+  window.location.reload();
+}
+
 class App extends React.Component<WithTranslation> {
   public componentDidMount(): void {
     // Check for changes in maintenance state. Ensures that state changes are
@@ -86,7 +85,7 @@ class App extends React.Component<WithTranslation> {
 
               // Reload the page if maintenance state changes from true to false
               if (storedMaintenanceState.show && !fetchedMaintenanceState.show)
-                window.location.reload();
+                reloadPage();
             }
           });
         }
@@ -99,18 +98,20 @@ class App extends React.Component<WithTranslation> {
     return (
       <div className="App">
         <Provider store={store}>
-          <ConnectedRouter history={history}>
+          {/* react-router transitions don't work nicely with external stores i.e. redux */}
+          <BrowserRouter unstable_useTransitions={false}>
             <ConnectedThemeProvider>
               {this.props.tReady ? (
                 <>
                   {toastrConfig()}
+
                   <PageContainer />
                 </>
               ) : (
                 <Preloader fullScreen loading />
               )}
             </ConnectedThemeProvider>
-          </ConnectedRouter>
+          </BrowserRouter>
         </Provider>
       </div>
     );

src/__snapshots__/pageContainer.test.tsx.snap

@@ -186,6 +186,7 @@ exports[`PageContainer - Tests > renders correctly 1`] = `
           >
             <a
               class="MuiListItem-root MuiListItem-dense MuiListItem-gutters css-b5rxyv-MuiListItem-root"
+              data-discover="true"
               href="/test"
               id="plugin-link--test"
             >
@@ -301,6 +302,7 @@ exports[`PageContainer - Tests > renders correctly 1`] = `
                   >
                     <a
                       class="MuiButtonBase-root MuiButton-root MuiButton-contained MuiButton-containedPrimary MuiButton-sizeMedium MuiButton-containedSizeMedium MuiButton-root MuiButton-contained MuiButton-containedPrimary MuiButton-sizeMedium MuiButton-containedSizeMedium css-2ttl85-MuiButtonBase-root-MuiButton-root"
+                      data-discover="true"
                       data-testid="browse-button"
                       href="/home-page.browse.link"
                       tabindex="0"
@@ -320,7 +322,7 @@ exports[`PageContainer - Tests > renders correctly 1`] = `
                   style="background-image: url(/src/images/facility.jpg); background-repeat: no-repeat; background-position: bottom right; background-size: cover; width: 100%; height: 100%; border-radius: 4px;"
                 >
                   <div
-                    class="css-18pmme8"
+                    class="css-1ox020v"
                   />
                 </div>
               </div>
@@ -368,6 +370,7 @@ exports[`PageContainer - Tests > renders correctly 1`] = `
                   >
                     <a
                       class="MuiButtonBase-root MuiButton-root MuiButton-contained MuiButton-containedPrimary MuiButton-sizeMedium MuiButton-containedSizeMedium MuiButton-root MuiButton-contained MuiButton-containedPrimary MuiButton-sizeMedium MuiButton-containedSizeMedium css-2ttl85-MuiButtonBase-root-MuiButton-root"
+                      data-discover="true"
                       data-testid="search-button"
                       href="/home-page.search.link"
                       tabindex="0"
@@ -420,6 +423,7 @@ exports[`PageContainer - Tests > renders correctly 1`] = `
                   >
                     <a
                       class="MuiButtonBase-root MuiButton-root MuiButton-contained MuiButton-containedPrimary MuiButton-sizeMedium MuiButton-containedSizeMedium MuiButton-root MuiButton-contained MuiButton-containedPrimary MuiButton-sizeMedium MuiButton-containedSizeMedium css-2ttl85-MuiButtonBase-root-MuiButton-root"
+                      data-discover="true"
                       data-testid="download-button"
                       href="/home-page.download.link"
                       tabindex="0"
@@ -507,6 +511,7 @@ exports[`PageContainer - Tests > renders correctly 1`] = `
          | 
         <a
           class="MuiTypography-root MuiTypography-inherit MuiLink-root MuiLink-underlineHover css-bb0cn9-MuiTypography-root-MuiLink-root"
+          data-discover="true"
           href="/accessibility"
         >
           Accessibilty statement

src/accessibilityPage/accessibilityPage.component.test.tsx

@@ -1,14 +1,12 @@
-import React from 'react';
-import AccessibilityPage from './accessibilityPage.component';
-import { buildTheme } from '../theming';
 import { StyledEngineProvider, ThemeProvider } from '@mui/material';
-import { StateType } from '../state/state.types';
-import { authState, initialState } from '../state/reducers/scigateway.reducer';
-import { createLocation } from 'history';
+import { render } from '@testing-library/react';
+import { Provider } from 'react-redux';
 import configureStore from 'redux-mock-store';
 import { thunk } from 'redux-thunk';
-import { Provider } from 'react-redux';
-import { render } from '@testing-library/react';
+import { authState, initialState } from '../state/reducers/scigateway.reducer';
+import { StateType } from '../state/state.types';
+import { buildTheme } from '../theming';
+import AccessibilityPage from './accessibilityPage.component';
 
 describe('Accessibility page component', () => {
   const theme = buildTheme(false);
@@ -17,7 +15,6 @@ describe('Accessibility page component', () => {
   beforeEach(() => {
     state = {
       scigateway: { ...initialState, authorisation: { ...authState } },
-      router: { location: createLocation('/') },
     };
   });