feat(deps): upgrade to react 18 (#318)

Author: brian-smith-tcril

package-lock.json

@@ -38,7 +38,7 @@
     "@edx/frontend-lib-special-exams": "^3.4.0",
     "@edx/frontend-platform": "8.4.0",
     "@edx/openedx-atlas": "^0.7.0",
-    "@edx/react-unit-test-utils": "^3.0.0",
+    "@edx/react-unit-test-utils": "^4.0.0",
     "@edx/tinymce-language-selector": "1.1.0",
     "@fortawesome/fontawesome-svg-core": "1.2.36",
     "@fortawesome/free-brands-svg-icons": "5.15.4",
@@ -61,8 +61,8 @@
     "pdfjs-dist": "^3.11.174",
     "prop-types": "15.8.1",
     "query-string": "^8.1.0",
-    "react": "^17.0.2",
-    "react-dom": "^17.0.2",
+    "react": "^18.3.1",
+    "react-dom": "^18.3.1",
     "react-pdf": "^7.4.0",
     "react-redux": "7.2.9",
     "react-router": "6.30.1",
@@ -76,23 +76,15 @@
   },
   "devDependencies": {
     "@edx/browserslist-config": "^1.1.1",
-    "@openedx/frontend-build": "14.3.2",
+    "@openedx/frontend-build": "^14.6.1",
     "@edx/reactifex": "^2.1.1",
-    "@testing-library/dom": "^9.3.3",
-    "@testing-library/jest-dom": "5.17.0",
-    "@testing-library/react": "12.1.5",
+    "@testing-library/dom": "^10.4.0",
+    "@testing-library/jest-dom": "^6.6.3",
+    "@testing-library/react": "^16.2.0",
     "@testing-library/user-event": "^14.5.1",
     "glob": "7.2.3",
     "husky": "7.0.4",
     "jest": "^29.7.0",
     "ts-jest": "^29.4.0"
-  },
-  "overrides": {
-    "@edx/frontend-lib-special-exams": {
-      "@openedx/paragon": "^23.4.2"
-    },
-    "@edx/frontend-platform": {
-      "@openedx/paragon": "^23.4.2"
-    }
   }
 }

package.json

@@ -8,6 +8,7 @@ import useStartStepAction from './useStartStepAction';
 import useSubmitAssessmentAction from './useSubmitAssessmentAction';
 import useSubmitResponseAction from './useSubmitResponseAction';
 import useConfirmAction from './useConfirmAction';
+// eslint-disable-next-line import/no-cycle
 import useCloseModalAction from './useCloseModalAction';
 
 export {

src/hooks/actions/index.js

@@ -1,6 +1,8 @@
 import { useIntl } from '@edx/frontend-platform/i18n';
 import { assessmentSteps, stepNames } from 'constants/index';
+// eslint-disable-next-line import/no-cycle
 import { useIsRevisit } from 'hooks';
+// eslint-disable-next-line import/no-cycle
 import { useHasSubmitted } from 'hooks/app';
 import { useViewStep } from 'hooks/routing';
 

src/hooks/actions/useCloseModalAction.js

@@ -1,4 +1,5 @@
 import * as reduxHooks from 'data/redux/hooks';
+// eslint-disable-next-line import/no-cycle
 import * as lmsActions from 'data/services/lms/hooks/actions';
 import * as lmsSelectors from 'data/services/lms/hooks/selectors/index';
 

src/hooks/app.js

@@ -1,5 +1,6 @@
 import { stepNames } from 'constants/index';
 
+// eslint-disable-next-line import/no-cycle
 import * as actions from './actions';
 import * as app from './app';
 import * as assessment from './assessment';

src/hooks/index.js

@@ -1,4 +1,5 @@
 import { useLocation } from 'react-router-dom';
+// eslint-disable-next-line import/no-cycle
 import { useActiveStepName } from 'data/services/lms/hooks/selectors';
 import { routeSteps } from 'constants/index';
 import { isXblockStep } from 'utils';

src/hooks/routing.js

@@ -9,7 +9,9 @@ import {
 } from 'constants/index';
 import { progressKeys, defaultViewProgressKeys } from 'constants/mockData';
 
+// eslint-disable-next-line import/no-cycle
 import * as reduxHooks from 'data/redux/hooks';
+// eslint-disable-next-line import/no-cycle
 import { useViewStep } from './routing';
 
 export const {

src/hooks/testHooks.js

@@ -1,6 +1,6 @@
 import 'core-js/stable';
 import 'regenerator-runtime/runtime';
-import ReactDOM from 'react-dom';
+import React from 'react';
 
 import { QueryClient, QueryClientProvider } from '@tanstack/react-query';
 import { ReactQueryDevtools } from '@tanstack/react-query-devtools';
@@ -9,6 +9,7 @@ import {
   APP_INIT_ERROR, APP_READY, subscribe, initialize,
 } from '@edx/frontend-platform';
 import { AppProvider, ErrorPage } from '@edx/frontend-platform/react';
+import { createRoot } from 'react-dom/client';
 
 import store from 'data/store';
 
@@ -24,20 +25,22 @@ const queryClient = new QueryClient({
 
 subscribe(APP_READY, () => {
   const isDev = process.env.NODE_ENV === 'development';
-  const rootEl = document.getElementById('root');
-  ReactDOM.render(
+  const root = createRoot(document.getElementById('root'));
+
+  root.render(
     <AppProvider store={store}>
       <QueryClientProvider client={queryClient}>
         <App />
         { isDev && <ReactQueryDevtools /> }
       </QueryClientProvider>
     </AppProvider>,
-    rootEl,
   );
 });
 
 subscribe(APP_INIT_ERROR, (error) => {
-  ReactDOM.render(<ErrorPage message={error.message} />, document.getElementById('root'));
+  const root = createRoot(document.getElementById('root'));
+
+  root.render(<ErrorPage message={error.message} />);
 });
 
 initialize({

src/index.jsx

@@ -4,6 +4,7 @@ import { Col, Icon, Row } from '@openedx/paragon';
 import { CheckCircle } from '@openedx/paragon/icons';
 import { useIntl } from '@edx/frontend-platform/i18n';
 
+// eslint-disable-next-line import/no-named-as-default
 import Rubric from 'components/Rubric';
 import ModalActions from 'components/ModalActions';
 import FileUpload from 'components/FileUpload';