Merge pull request #1702 from ral-facilities/react-18-#1445

React 18 #1445

Author: louise-davies

package.json

@@ -9,7 +9,8 @@
     "husky": "8.0.1"
   },
   "resolutions": {
-    "@types/react": "17.0.39",
+    "@types/react": "18.0.33",
+    "@types/react-dom": "18.0.11",
     "@typescript-eslint/eslint-plugin": "5.62.0",
     "@typescript-eslint/parser": "5.62.0"
   },

packages/datagateway-common/package.json

@@ -11,22 +11,22 @@
     "@emotion/react": "11.11.1",
     "@emotion/styled": "11.11.0",
     "@mui/x-date-pickers": "6.11.2",
+    "@tanstack/react-query": "4.36.1",
+    "@tanstack/react-query-devtools": "4.36.1",
     "@types/lodash.debounce": "4.0.6",
     "axios": "1.8.3",
-    "connected-react-router": "6.9.1",
     "date-fns": "2.30.0",
     "hex-to-rgba": "2.0.1",
     "history": "4.10.1",
     "i18next": "22.0.3",
     "lodash.debounce": "4.0.8",
     "loglevel": "1.9.1",
     "prettier": "2.8.0",
-    "react-draggable": "4.4.3",
+    "react-draggable": "4.4.5",
     "react-i18next": "12.3.1",
-    "react-query": "3.33.5",
     "react-redux": "8.1.3",
     "react-scripts": "5.0.0",
-    "react-virtualized": "9.22.3",
+    "react-virtualized": "9.22.5",
     "redux": "4.2.0",
     "redux-mock-store": "1.5.4",
     "redux-thunk": "2.4.1",
@@ -37,21 +37,20 @@
   "peerDependencies": {
     "@mui/icons-material": ">= 5.5.0 < 6",
     "@mui/material": ">= 5.5.0 < 6",
-    "react": ">= 17.0.2 < 18",
-    "react-dom": ">= 17.0.2 < 18",
+    "react": "^18.2.0",
+    "react-dom": "^18.2.0",
     "react-router-dom": ">= 5.2.0 < 6"
   },
   "devDependencies": {
     "@babel/eslint-parser": "7.23.3",
     "@mui/icons-material": "5.11.0",
     "@mui/material": "5.11.0",
     "@testing-library/jest-dom": "6.4.1",
-    "@testing-library/react": "12.1.3",
-    "@testing-library/react-hooks": "8.0.1",
+    "@testing-library/react": "14.0.0",
     "@testing-library/user-event": "14.5.2",
     "@types/jest": "29.5.2",
     "@types/node": "20.11.5",
-    "@types/react": "17.0.39",
+    "@types/react": "18.0.33",
     "@types/react-router-dom": "5.3.3",
     "@types/react-virtualized": "9.21.10",
     "@typescript-eslint/eslint-plugin": "5.62.0",
@@ -63,9 +62,9 @@
     "eslint-plugin-prettier": "4.2.1",
     "jest-fail-on-console": "3.1.1",
     "lint-staged": "13.3.0",
-    "react": "17.0.2",
-    "react-dom": "17.0.2",
-    "react-router-dom": "5.3.0",
+    "react": "18.2.0",
+    "react-dom": "18.2.0",
+    "react-router-dom": "5.3.4",
     "react-test-renderer": "17.0.2"
   },
   "scripts": {
@@ -103,7 +102,7 @@
   },
   "jest": {
     "transformIgnorePatterns": [
-      "node_modules/(?!axios)"
+      "node_modules/(?!(axios|copy-anything|is-what))"
     ],
     "collectCoverageFrom": [
       "src/**/*.{tsx,ts,js,jsx}",

packages/datagateway-common/src/App.test.tsx

@@ -1,9 +1,10 @@
 import React from 'react';
-import ReactDOM from 'react-dom';
+import ReactDOM from 'react-dom/client';
 import App from './App';
 
 it('renders without crashing', () => {
   const div = document.createElement('div');
-  ReactDOM.render(<App />, div);
-  ReactDOM.unmountComponentAtNode(div);
+  const root = ReactDOM.createRoot(div);
+  root.render(<App />);
+  root.unmount();
 });