Merge pull request #328 from CMSgov/QPPA-10520

QPPA-10520: upgrade react and react dom

Author: chetanmunegowda

jest.setup.ts

@@ -0,0 +1,5 @@
+import { TextEncoder, TextDecoder } from 'util';
+
+// polyfill before any tests or imports run
+;(global as any).TextEncoder = TextEncoder;
+;(global as any).TextDecoder = TextDecoder;

package-lock.json

@@ -26,35 +26,37 @@
     "url": "https://github.com/CMSgov/qpp-submissions-docs/issues"
   },
   "homepage": "https://cmsgov.github.io/qpp-submissions-docs",
+  "overrides": {
+    "react-day-picker": "^9.6.7"
+  },
   "dependencies": {
-    "@cmsgov/design-system": "11.0.0",
+    "@cmsgov/design-system": "12.4.1",
     "@vitejs/plugin-react": "4.3.1",
-    "@xzar90/react-router-hash-link": "6.0.4",
     "core-js": "3.36.0",
     "font-awesome": "4.7.0",
     "postcss": "8.4.35",
     "postcss-scss": "4.0.9",
-    "react": "17.0.2",
+    "react": "19.1.0",
     "react-code-blocks": "0.1.6",
-    "react-dom": "17.0.2",
-    "react-router-dom": "6.22.3",
+    "react-dom": "19.1.0",
+    "react-router-dom": "7.6.3",
     "react-router-hash-link": "2.4.3",
     "sass": "1.64.0",
     "typescript": "5.3.3",
-    "vite": "5.4.8",
+    "vite": "5.4.19",
     "vite-tsconfig-paths": "4.3.1"
   },
   "devDependencies": {
+    "@emotion/is-prop-valid": "1.3.1",
     "@eslint/eslintrc": "3.1.0",
     "@eslint/js": "9.11.1",
-    "@testing-library/jest-dom": "6.4.2",
-    "@testing-library/react": "12.1.5",
-    "@testing-library/user-event": "14.5.2",
+    "@testing-library/jest-dom": "6.6.3",
+    "@testing-library/react": "16.3.0",
+    "@testing-library/user-event": "14.6.1",
     "@types/jest": "29.5.13",
     "@types/node": "^20.11.25",
-    "@types/react": "^17.0.11",
-    "@types/react-dom": "^18.0.4",
-    "@types/react-router-dom": "5.3.3",
+    "@types/react": "19.1.8",
+    "@types/react-dom": "19.1.6",
     "@types/react-router-hash-link": "2.4.9",
     "@typescript-eslint/eslint-plugin": "8.7.0",
     "@typescript-eslint/parser": "8.7.0",
@@ -83,6 +85,7 @@
   "jest": {
     "preset": "ts-jest/presets/js-with-ts",
     "testEnvironment": "jest-environment-jsdom",
+    "setupFiles": ["<rootDir>/jest.setup.ts"],
     "moduleNameMapper": {
       "\\.(jpg|jpeg|png|gif|eot|otf|webp|svg|ttf|woff|woff2|mp4|webm|wav|mp3|m4a|aac|oga)$": "<rootDir>/__mocks__/fileMock.js",
       "\\.(css|scss|less)$": "<rootDir>/__mocks__/styleMock.js"

package.json

@@ -1,4 +1,4 @@
-import { MemoryRouter } from 'react-router-dom';
+import { MemoryRouter } from 'react-router';
 import {render, fireEvent } from '@testing-library/react';
 import '@testing-library/jest-dom';
 

src/app/components/app.test.tsx

@@ -1,5 +1,5 @@
 import { useState } from 'react';
-import { Route, Routes } from 'react-router-dom';
+import { Route, Routes } from 'react-router';
 
 import { combinedRoutes } from '../routes';
 
@@ -63,4 +63,4 @@ const App = () => {
   );
 };
 
-export default App;
+export default App;

src/app/components/app.tsx

@@ -1,4 +1,4 @@
-import { NavLink } from 'react-router-dom';
+import { NavLink } from 'react-router';
 
 import Routes, { IPath } from '../routes';
 

src/app/components/left-nav.tsx

@@ -1,17 +1,23 @@
 import './polyfills';
-
-import ReactDOM from 'react-dom';
-import { BrowserRouter as Router } from 'react-router-dom';
+import { createRoot } from 'react-dom/client';
+import { BrowserRouter as Router } from 'react-router';
+import { StyleSheetManager } from 'styled-components';
+import isPropValid from '@emotion/is-prop-valid';
 
 import App from './app/components/app';
-
 import './index.scss';
 import envConfig from './envConfig';
 
+const rootElement = document.getElementById('root');
+if (!rootElement) {
+    throw new Error('Root element not found');
+}
 
-ReactDOM.render(
-  <Router basename={envConfig.baseUrl}>
-    <App />,
-  </Router>,
-  document.getElementById('root')
+const root = createRoot(rootElement);
+root.render(
+    <StyleSheetManager shouldForwardProp={prop => isPropValid(prop)}>
+        <Router basename={envConfig.baseUrl}>
+            <App />
+        </Router>
+    </StyleSheetManager>
 );

src/index.tsx

@@ -1,4 +1,4 @@
-import { HashLink } from '@xzar90/react-router-hash-link';
+import { HashLink } from 'react-router-hash-link';
 
 export const LinkToId = ({ to, text, offset = '1' }: { to: string, text: string, offset?: string }) => {
   return (