Revert "feat: upgrade to react 18 (openedx#1663)"

This reverts commit 515c3cf.

Author: nsprenkle

package-lock.json

@@ -41,7 +41,7 @@
     "@edx/frontend-lib-special-exams": "^3.5.0",
     "@edx/frontend-platform": "^8.3.1",
     "@edx/openedx-atlas": "^0.6.0",
-    "@edx/react-unit-test-utils": "^4.0.0",
+    "@edx/react-unit-test-utils": "3.1.0",
     "@fortawesome/free-brands-svg-icons": "5.15.4",
     "@fortawesome/free-regular-svg-icons": "5.15.4",
     "@fortawesome/free-solid-svg-icons": "5.15.4",
@@ -63,8 +63,8 @@
     "postcss-loader": "^8.1.1",
     "prop-types": "15.8.1",
     "query-string": "^7.1.3",
-    "react": "^18.3.1",
-    "react-dom": "^18.3.1",
+    "react": "17.0.2",
+    "react-dom": "17.0.2",
     "react-helmet": "6.1.0",
     "react-redux": "7.2.9",
     "react-router": "6.15.0",
@@ -80,8 +80,9 @@
   "devDependencies": {
     "@edx/reactifex": "2.2.0",
     "@pact-foundation/pact": "^13.0.0",
-    "@testing-library/jest-dom": "^6.6.3",
-    "@testing-library/react": "^16.2.0",
+    "@testing-library/jest-dom": "5.17.0",
+    "@testing-library/react": "12.1.5",
+    "@testing-library/react-hooks": "^8.0.1",
     "@testing-library/user-event": "14.6.1",
     "axios-mock-adapter": "2.1.0",
     "bundlewatch": "^0.4.0",
@@ -95,7 +96,7 @@
     "files": [
       {
         "path": "dist/*.js",
-        "maxSize": "1450kB"
+        "maxSize": "1400kB"
       }
     ],
     "normalizeFilenames": "^.+?(\\..+?)\\.\\w+$"

package.json

@@ -1,4 +1,4 @@
-import { renderHook, act, waitFor } from '@testing-library/react';
+import { renderHook, act } from '@testing-library/react-hooks';
 import { useParams, useSearchParams } from 'react-router-dom';
 import { useSelector } from 'react-redux';
 import { fetchCoursewareSearchSettings } from '../data/thunks';
@@ -38,13 +38,13 @@ describe('CoursewareSearch Hooks', () => {
 
     it('should return true if feature is enabled', async () => {
       const hook = await renderTestHook();
-      await waitFor(() => expect(fetchCoursewareSearchSettings).toBeCalledTimes(1));
+      await hook.waitFor(() => expect(fetchCoursewareSearchSettings).toBeCalledTimes(1));
       expect(hook.result.current).toBe(true);
     });
 
     it('should return false if feature is disabled', async () => {
       const hook = await renderTestHook(false);
-      await waitFor(() => expect(fetchCoursewareSearchSettings).toBeCalledTimes(1));
+      await hook.waitFor(() => expect(fetchCoursewareSearchSettings).toBeCalledTimes(1));
       expect(hook.result.current).toBe(false);
     });
   });
@@ -125,7 +125,7 @@ describe('CoursewareSearch Hooks', () => {
       it('should return the element bounding box', async () => {
         const hook = await renderTestHook({ elementId: 'test', mockedInfo });
 
-        await waitFor(() => expect(getBoundingClientRectSpy).toHaveBeenCalled());
+        hook.waitFor(() => expect(getBoundingClientRectSpy).toHaveBeenCalled());
 
         expect(hook.result.current).toEqual(mockedInfo);
       });

src/__snapshots__/index.test.jsx.snap

@@ -2,7 +2,7 @@ import { getConfig, history } from '@edx/frontend-platform';
 import { getAuthenticatedHttpClient } from '@edx/frontend-platform/auth';
 import { AppProvider } from '@edx/frontend-platform/react';
 import { waitForElementToBeRemoved, fireEvent } from '@testing-library/dom';
-import '@testing-library/jest-dom';
+import '@testing-library/jest-dom/extend-expect';
 import { render, screen } from '@testing-library/react';
 import React from 'react';
 import {

src/course-home/courseware-search/hooks.test.jsx

@@ -50,11 +50,7 @@ describe('Course', () => {
     global.innerWidth = breakpoints.extraLarge.minWidth;
   });
 
-  // This was passing when it shouldn't have been because of improper
-  // waitFor use. With the React 18 upgrade it no longer improperly passes
-  // so we are skipping it. See https://github.com/openedx/frontend-app-learning/issues/1669
-  // for details.
-  it.skip('loads learning sequence', () => {
+  it('loads learning sequence', async () => {
     render(<Course {...mockData} />, { wrapWithRouter: true });
     expect(screen.queryByRole('navigation', { name: 'breadcrumb' })).not.toBeInTheDocument();
     waitFor(() => {
@@ -98,11 +94,7 @@ describe('Course', () => {
     expect(screen.queryByRole('navigation', { name: 'breadcrumb' })).not.toBeInTheDocument();
   });
 
-  // This was passing when it shouldn't have been because of improper
-  // waitFor use. With the React 18 upgrade it no longer improperly passes
-  // so we are skipping it. See https://github.com/openedx/frontend-app-learning/issues/1669
-  // for details.
-  it.skip('displays first section celebration modal', async () => {
+  it('displays first section celebration modal', async () => {
     const courseHomeMetadata = Factory.build('courseHomeMetadata', { celebrations: { firstSection: true } });
     const testStore = await initializeTestStore({ courseHomeMetadata }, false);
     const { courseware, models } = testStore.getState();
@@ -124,11 +116,7 @@ describe('Course', () => {
     });
   });
 
-  // This was passing when it shouldn't have been because of improper
-  // waitFor use. With the React 18 upgrade it no longer improperly passes
-  // so we are skipping it. See https://github.com/openedx/frontend-app-learning/issues/1669
-  // for details.
-  it.skip('displays weekly goal celebration modal', async () => {
+  it('displays weekly goal celebration modal', async () => {
     const courseHomeMetadata = Factory.build('courseHomeMetadata', { celebrations: { weeklyGoal: true } });
     const testStore = await initializeTestStore({ courseHomeMetadata }, false);
     const { courseware, models } = testStore.getState();

src/courseware/CoursewareContainer.test.jsx

@@ -341,6 +341,7 @@ class Calculator extends Component {
                         <li>arccsch(4x+y)</li>
                       </ul>
                     </td>
+                    <td dir="auto" />
                   </tr>
                   <tr>
                     <th scope="row">