feat: upgrade react to v18

package.json

@@ -31,7 +31,7 @@
     "@edx/brand": "npm:@openedx/brand-openedx@^1.2.2",
     "@edx/frontend-component-footer": "^14.3.0",
     "@edx/frontend-component-header": "^6.2.0",
-    "@edx/frontend-platform": "^8.3.1",
+    "@edx/frontend-platform": "^8.3.3",
     "@edx/openedx-atlas": "^0.6.0",
     "@fortawesome/fontawesome-svg-core": "^6.6.0",
     "@fortawesome/free-brands-svg-icons": "^6.6.0",
@@ -65,8 +65,8 @@
     "memoize-one": "^6.0.0",
     "prop-types": "15.8.1",
     "qs": "6.14.0",
-    "react": "17.0.2",
-    "react-dom": "17.0.2",
+    "react": "18.3.1",
+    "react-dom": "18.3.1",
     "react-helmet": "6.1.0",
     "react-redux": "7.2.9",
     "react-router": "^6.25.1",
@@ -88,8 +88,8 @@
     "@edx/reactifex": "2.2.0",
     "@openedx/frontend-build": "^14.3.3",
     "@testing-library/jest-dom": "6.6.3",
-    "@testing-library/react": "12.1.5",
-    "react-test-renderer": "17.0.2",
+    "@testing-library/react": "14.3.1",
+    "react-test-renderer": "^18.3.1",
     "reactifex": "1.1.1",
     "redux-mock-store": "1.5.5"
   }

src/account-settings/certificate-preference/test/CertificatePreference.test.jsx

@@ -1,6 +1,5 @@
 /* eslint-disable no-import-assign */
 import React from 'react';
-import ReactDOM from 'react-dom';
 import { Provider } from 'react-redux';
 import { BrowserRouter as Router } from 'react-router-dom';
 import configureStore from 'redux-mock-store';
@@ -13,8 +12,11 @@ import {
 import * as auth from '@edx/frontend-platform/auth';
 import { IntlProvider, injectIntl } from '@edx/frontend-platform/i18n';
 
-// Modal creates a portal.  Overriding ReactDOM.createPortal allows portals to be tested in jest.
-ReactDOM.createPortal = node => node;
+// Modal creates a portal.  Overriding createPortal allows portals to be tested in jest.
+jest.mock('react-dom', () => ({
+  ...jest.requireActual('react-dom'),
+  createPortal: jest.fn(node => node), // Mock portal behavior
+}));
 
 import CertificatePreference from '../CertificatePreference'; // eslint-disable-line import/first
 

src/account-settings/delete-account/BeforeProceedingBanner.test.jsx

@@ -1,9 +1,11 @@
 import React from 'react';
-import ReactDOM from 'react-dom';
 import renderer from 'react-test-renderer';
 import { IntlProvider, injectIntl, createIntl } from '@edx/frontend-platform/i18n';
 
-ReactDOM.createPortal = node => node;
+jest.mock('react-dom', () => ({
+  ...jest.requireActual('react-dom'),
+  createPortal: jest.fn(node => node), // Mock portal behavior
+}));
 
 import BeforeProceedingBanner from './BeforeProceedingBanner'; // eslint-disable-line import/first
 

src/account-settings/delete-account/ConfirmationModal.test.jsx

@@ -1,10 +1,12 @@
 import React from 'react';
-import ReactDOM from 'react-dom';
 import renderer from 'react-test-renderer';
 import { IntlProvider, injectIntl } from '@edx/frontend-platform/i18n';
 
-// Modal creates a portal.  Overriding ReactDOM.createPortal allows portals to be tested in jest.
-ReactDOM.createPortal = node => node;
+// Modal creates a portal.  Overriding createPortal allows portals to be tested in jest.
+jest.mock('react-dom', () => ({
+  ...jest.requireActual('react-dom'),
+  createPortal: jest.fn(node => node), // Mock portal behavior
+}));
 
 import { ConfirmationModal } from './ConfirmationModal'; // eslint-disable-line import/first
 

src/account-settings/delete-account/SuccessModal.test.jsx

@@ -1,12 +1,14 @@
 import React from 'react';
-import ReactDOM from 'react-dom';
 import renderer from 'react-test-renderer';
 import { IntlProvider, injectIntl } from '@edx/frontend-platform/i18n';
+import { waitFor } from '@testing-library/react';
+import { SuccessModal } from './SuccessModal';
 
-// Modal creates a portal.  Overriding ReactDOM.createPortal allows portals to be tested in jest.
-ReactDOM.createPortal = node => node;
-
-import { SuccessModal } from './SuccessModal'; // eslint-disable-line import/first
+// Modal creates a portal.  Overriding createPortal allows portals to be tested in jest.
+jest.mock('react-dom', () => ({
+  ...jest.requireActual('react-dom'),
+  createPortal: jest.fn(node => node), // Mock portal behavior
+}));
 
 const IntlSuccessModal = injectIntl(SuccessModal);
 
@@ -20,39 +22,40 @@ describe('SuccessModal', () => {
     };
   });
 
-  it('should match default closed success modal snapshot', () => {
-    let tree = renderer.create((
-      <IntlProvider locale="en"><IntlSuccessModal {...props} /></IntlProvider>))
-      .toJSON();
-    expect(tree).toMatchSnapshot();
-
-    tree = renderer.create((
-      <IntlProvider locale="en"><IntlSuccessModal {...props} status="confirming" /></IntlProvider>))
-      .toJSON();
-    expect(tree).toMatchSnapshot();
-
-    tree = renderer.create((
-      <IntlProvider locale="en"><IntlSuccessModal {...props} status="pending" /></IntlProvider>))
-      .toJSON();
-    expect(tree).toMatchSnapshot();
-
-    tree = renderer.create((
-      <IntlProvider locale="en"><IntlSuccessModal {...props} status="failed" /></IntlProvider>))
-      .toJSON();
-    expect(tree).toMatchSnapshot();
+  it('should match default closed success modal snapshot', async () => {
+    await waitFor(() => {
+      const tree = renderer.create((
+        <IntlProvider locale="en"><IntlSuccessModal {...props} /></IntlProvider>)).toJSON();
+      expect(tree).toMatchSnapshot();
+    });
+    await waitFor(() => {
+      const tree = renderer.create((
+        <IntlProvider locale="en"><IntlSuccessModal {...props} status="confirming" /></IntlProvider>)).toJSON();
+      expect(tree).toMatchSnapshot();
+    });
+    await waitFor(() => {
+      const tree = renderer.create((
+        <IntlProvider locale="en"><IntlSuccessModal {...props} status="pending" /></IntlProvider>)).toJSON();
+      expect(tree).toMatchSnapshot();
+    });
+    await waitFor(() => {
+      const tree = renderer.create((
+        <IntlProvider locale="en"><IntlSuccessModal {...props} status="failed" /></IntlProvider>)).toJSON();
+      expect(tree).toMatchSnapshot();
+    });
   });
 
-  it('should match open success modal snapshot', () => {
-    const tree = renderer
-      .create((
+  it('should match open success modal snapshot', async () => {
+    await waitFor(() => {
+      const tree = renderer.create(
         <IntlProvider locale="en">
           <IntlSuccessModal
             {...props}
-            status="deleted" // This will cause 'modal-backdrop' and 'show' to appear on the modal as CSS classes.
+            status="deleted"
           />
-        </IntlProvider>
-      ))
-      .toJSON();
-    expect(tree).toMatchSnapshot();
+        </IntlProvider>,
+      ).toJSON();
+      expect(tree).toMatchSnapshot();
+    });
   });
 });

src/account-settings/name-change/test/NameChange.test.jsx

@@ -1,6 +1,5 @@
 /* eslint-disable no-import-assign */
 import React from 'react';
-import ReactDOM from 'react-dom';
 import { Provider } from 'react-redux';
 import { BrowserRouter as Router } from 'react-router-dom';
 import configureStore from 'redux-mock-store';
@@ -13,8 +12,11 @@ import {
 import * as auth from '@edx/frontend-platform/auth';
 import { IntlProvider, injectIntl } from '@edx/frontend-platform/i18n';
 
-// Modal creates a portal.  Overriding ReactDOM.createPortal allows portals to be tested in jest.
-ReactDOM.createPortal = node => node;
+// Modal creates a portal.  Overriding createPortal allows portals to be tested in jest.
+jest.mock('react-dom', () => ({
+  ...jest.requireActual('react-dom'),
+  createPortal: jest.fn(node => node), // Mock portal behavior
+}));
 
 import NameChange from '../NameChange'; // eslint-disable-line import/first
 

src/account-settings/test/__snapshots__/EditableSelectField.test.jsx.snap

@@ -172,9 +172,7 @@ exports[`EditableSelectField renders EditableSelectField correctly with editing
               />
             </svg>
           </span>
-          <div>
-
-          </div>
+          <div />
         </div>
       </div>
       <p>

src/index.jsx

@@ -6,8 +6,9 @@
 import {
   subscribe, initialize, APP_INIT_ERROR, APP_READY, mergeConfig,
 } from '@edx/frontend-platform';
-import React from 'react';
-import ReactDOM from 'react-dom';
+import React, { StrictMode } from 'react';
+// eslint-disable-next-line import/no-unresolved
+import { createRoot } from 'react-dom/client';
 import { Route, Routes, Outlet } from 'react-router-dom';
 
 import Header from '@edx/frontend-component-header';
@@ -23,39 +24,41 @@
 import NotificationCourses from './notification-preferences/NotificationCourses';
 import NotificationPreferences from './notification-preferences/NotificationPreferences';
 
+const rootNode = createRoot(document.getElementById('root'));
 subscribe(APP_READY, () => {
-  ReactDOM.render(
-    <AppProvider store={configureStore()}>
-      <Head />
-      <Routes>
-        <Route element={(
-          <div className="d-flex flex-column" style={{ minHeight: '100vh' }}>
-            <Header />
-            <main className="flex-grow-1" id="main">
-              <Outlet />
-            </main>
-            <FooterSlot />
-          </div>
-        )}
-        >
-          <Route path="/notifications/:courseId" element={<NotificationPreferences />} />
-          <Route path="/notifications" element={<NotificationCourses />} />
-          <Route
-            path="/id-verification/*"
-            element={<IdVerificationPageSlot />}
-          />
-          <Route path="/" element={<AccountSettingsPage />} />
-          <Route path="/notfound" element={<NotFoundPage />} />
-          <Route path="*" element={<NotFoundPage />} />
-        </Route>
-      </Routes>
-    </AppProvider>,
-    document.getElementById('root'),
+  rootNode.render(
+    <StrictMode>
+      <AppProvider store={configureStore()}>
+        <Head />
+        <Routes>
+          <Route element={(
+            <div className="d-flex flex-column" style={{ minHeight: '100vh' }}>
+              <Header />
+              <main className="flex-grow-1" id="main">
+                <Outlet />
+              </main>
+              <FooterSlot />
+            </div>
+          )}
+          >
+            <Route path="/notifications/:courseId" element={<NotificationPreferences />} />
+            <Route path="/notifications" element={<NotificationCourses />} />
+            <Route
+              path="/id-verification/*"
+              element={<IdVerificationPageSlot />}
+            />
+            <Route path="/" element={<AccountSettingsPage />} />
+            <Route path="/notfound" element={<NotFoundPage />} />
+            <Route path="*" element={<NotFoundPage />} />
+          </Route>
+        </Routes>
+      </AppProvider>
+    </StrictMode>,
   );
 });
 
 subscribe(APP_INIT_ERROR, (error) => {
-  ReactDOM.render(<ErrorPage message={error.message} />, document.getElementById('root'));
+  rootNode.render(<ErrorPage message={error.message} />);
 });
 
 initialize({