feat: upgrade to react 18 (#406)

package.json

@@ -57,11 +57,11 @@
     "moment": "^2.29.3",
     "prop-types": "15.8.1",
     "query-string": "7.1.3",
-    "react": "^17.0.2",
-    "react-dom": "^17.0.2",
+    "react": "^18.3.1",
+    "react-dom": "^18.3.1",
     "react-helmet": "^6.1.0",
     "react-intl": "6.4.7",
-   "react-pdf": "^7.0.0",
+    "react-pdf": "^7.0.0",
     "react-redux": "^7.2.9",
     "react-router": "6.21.3",
     "react-router-dom": "6.21.3",
@@ -77,11 +77,11 @@
   },
   "devDependencies": {
     "@edx/browserslist-config": "^1.3.0",
-    "@edx/react-unit-test-utils": "3.0.0",
+    "@edx/react-unit-test-utils": "^4.0.0",
     "@edx/reactifex": "^2.1.1",
     "@openedx/frontend-build": "^14.3.3",
-    "@testing-library/jest-dom": "^6.0.0",
-    "@testing-library/react": "12.1.5",
+    "@testing-library/jest-dom": "^6.6.3",
+    "@testing-library/react": "^16.2.0",
     "axios-mock-adapter": "^1.20.0",
     "fetch-mock": "^9.11.0",
     "identity-obj-proxy": "^3.0.0",
@@ -89,7 +89,7 @@
     "jest-environment-jsdom": "^29.7.0",
     "jest-expect-message": "^1.0.2",
     "react-dev-utils": "^12.0.1",
-    "react-test-renderer": "^17.0.2",
+    "react-test-renderer": "^18.3.1",
     "reactifex": "1.1.1",
     "redux-mock-store": "^1.5.5"
   }

src/__snapshots__/index.test.jsx.snap

@@ -1,24 +1,28 @@
 // Jest Snapshot v1, https://goo.gl/fbAQLP
 
 exports[`app registry subscribe: APP_INIT_ERROR.  snapshot: displays an ErrorPage to root element 1`] = `
-<ErrorPage
-  message="test-error-message"
-/>
+<React Strict Mode>
+  <ErrorPage
+    message="test-error-message"
+  />
+</React Strict Mode>
 `;
 
 exports[`app registry subscribe: APP_READY.  links App to root element 1`] = `
-<AppProvider
-  store={
-    {
-      "dispatch": [Function],
-      "getState": [Function],
-      "replaceReducer": [Function],
-      "subscribe": [Function],
-      Symbol(Symbol.observable): [Function],
+<React Strict Mode>
+  <AppProvider
+    store={
+      {
+        "dispatch": [Function],
+        "getState": [Function],
+        "replaceReducer": [Function],
+        "subscribe": [Function],
+        Symbol(Symbol.observable): [Function],
+      }
     }
-  }
-  wrapWithRouter={false}
->
-  <App />
-</AppProvider>
+    wrapWithRouter={false}
+  >
+    <App />
+  </AppProvider>
+</React Strict Mode>
 `;

src/index.jsx

@@ -2,8 +2,8 @@
 import 'core-js/stable';
 import 'regenerator-runtime/runtime';
 
-import React from 'react';
-import ReactDOM from 'react-dom';
+import React, { StrictMode } from 'react';
+import { createRoot } from 'react-dom/client';
 import { AppProvider, ErrorPage } from '@edx/frontend-platform/react';
 
 import store from 'data/store';
@@ -20,18 +20,24 @@ import messages from './i18n';
 import App from './App';
 
 subscribe(APP_READY, () => {
-  ReactDOM.render(
-    <AppProvider store={store} wrapWithRouter={false}>
-      <App />
-    </AppProvider>,
-    document.getElementById('root'),
+  const root = createRoot(document.getElementById('root'));
+
+  root.render(
+    <StrictMode>
+      <AppProvider store={store} wrapWithRouter={false}>
+        <App />
+      </AppProvider>
+    </StrictMode>,
   );
 });
 
 subscribe(APP_INIT_ERROR, (error) => {
-  ReactDOM.render(
-    <ErrorPage message={error.message} />,
-    document.getElementById('root'),
+  const root = createRoot(document.getElementById('root'));
+
+  root.render(
+    <StrictMode>
+      <ErrorPage message={error.message} />
+    </StrictMode>,
   );
 });
 

src/index.test.jsx

@@ -1,5 +1,3 @@
-import { render } from 'react-dom';
-
 import {
   APP_INIT_ERROR,
   APP_READY,
@@ -11,8 +9,24 @@ import {
 import messages from './i18n';
 import * as app from '.';
 
-jest.mock('react-dom', () => ({
-  render: jest.fn(),
+// These need to be var not let so they get hoisted
+// and can be used by jest.mock (which is also hoisted)
+var mockRender; // eslint-disable-line no-var
+var mockCreateRoot; // eslint-disable-line no-var
+jest.mock('react-dom/client', () => {
+  mockRender = jest.fn();
+  mockCreateRoot = jest.fn(() => ({
+    render: mockRender,
+  }));
+
+  return ({
+    createRoot: mockCreateRoot,
+  });
+});
+
+jest.mock('react', () => ({
+  ...jest.requireActual('react'),
+  StrictMode: 'React Strict Mode',
 }));
 
 jest.mock('@edx/frontend-component-footer', () => ({
@@ -39,7 +53,7 @@ describe('app registry', () => {
   let getElement;
 
   beforeEach(() => {
-    render.mockClear();
+    mockRender.mockClear();
     getElement = window.document.getElementById;
     window.document.getElementById = jest.fn(id => ({ id }));
   });
@@ -51,18 +65,16 @@ describe('app registry', () => {
     const callArgs = subscribe.mock.calls[0];
     expect(callArgs[0]).toEqual(APP_READY);
     callArgs[1]();
-    const [rendered, target] = render.mock.calls[0];
+    const [rendered] = mockRender.mock.calls[0];
     expect(rendered).toMatchSnapshot();
-    expect(target).toEqual(document.getElementById('root'));
   });
   test('subscribe: APP_INIT_ERROR.  snapshot: displays an ErrorPage to root element', () => {
     const callArgs = subscribe.mock.calls[1];
     expect(callArgs[0]).toEqual(APP_INIT_ERROR);
     const error = { message: 'test-error-message' };
     callArgs[1](error);
-    const [rendered, target] = render.mock.calls[0];
+    const [rendered] = mockRender.mock.calls[0];
     expect(rendered).toMatchSnapshot();
-    expect(target).toEqual(document.getElementById('root'));
   });
   test('initialize is called with footerMessages and requireAuthenticatedUser', () => {
     expect(initialize).toHaveBeenCalledTimes(1);