feat: upgrade to react 18 (#1766)

Author: brian-smith-tcril

package-lock.json

@@ -51,7 +51,7 @@
     "@edx/browserslist-config": "1.2.0",
     "@edx/frontend-component-footer": "^14.3.0",
     "@edx/frontend-component-header": "^6.2.0",
-    "@edx/frontend-enterprise-hotjar": "^2.0.0",
+    "@edx/frontend-enterprise-hotjar": "^7.2.0",
     "@edx/frontend-platform": "^8.3.1",
     "@edx/openedx-atlas": "^0.6.0",
     "@openedx-plugins/course-app-calculator": "file:plugins/course-apps/calculator",
@@ -85,9 +85,9 @@
     "moment-shortformat": "^2.1.0",
     "npm": "^10.8.1",
     "prop-types": "^15.8.1",
-    "react": "17.0.2",
+    "react": "^18.3.1",
     "react-datepicker": "^4.13.0",
-    "react-dom": "17.0.2",
+    "react-dom": "^18.3.1",
     "react-error-boundary": "^4.0.13",
     "react-helmet": "^6.1.0",
     "react-onclickoutside": "^6.13.0",
@@ -110,12 +110,11 @@
     "yup": "0.31.1"
   },
   "devDependencies": {
-    "@edx/react-unit-test-utils": "3.0.0",
+    "@edx/react-unit-test-utils": "^4.0.0",
     "@edx/stylelint-config-edx": "2.3.3",
     "@edx/typescript-config": "^1.0.1",
-    "@testing-library/jest-dom": "5.17.0",
-    "@testing-library/react": "12.1.5",
-    "@testing-library/react-hooks": "^8.0.1",
+    "@testing-library/jest-dom": "^6.6.3",
+    "@testing-library/react": "^16.2.0",
     "@testing-library/user-event": "^13.2.1",
     "@types/lodash": "^4.17.7",
     "axios-mock-adapter": "1.22.0",
@@ -124,7 +123,7 @@
     "husky": "7.0.4",
     "jest-canvas-mock": "^2.5.2",
     "jest-expect-message": "^1.1.3",
-    "react-test-renderer": "17.0.2",
+    "react-test-renderer": "^18.3.1",
     "redux-mock-store": "^1.5.4"
   }
 }

package.json

@@ -544,12 +544,9 @@ describe('ProctoredExamSettings', () => {
 
   describe('Connection states', () => {
     it('Shows the spinner before the connection is complete', async () => {
-      await act(async () => {
-        render(intlWrapper(<IntlProctoredExamSettings {...defaultProps} />));
-        // This expectation is _inside_ the `act` intentionally, so that it executes immediately.
-        const spinner = await screen.findByRole('status');
-        expect(spinner.textContent).toEqual('Loading...');
-      });
+      render(intlWrapper(<IntlProctoredExamSettings {...defaultProps} />));
+      const spinner = await screen.findByRole('status');
+      expect(spinner.textContent).toEqual('Loading...');
     });
 
     it('Show connection error message when we suffer studio server side error', async () => {

plugins/course-apps/proctoring/Settings.test.jsx

@@ -7,7 +7,7 @@ import {
 import { getAuthenticatedHttpClient } from '@edx/frontend-platform/auth';
 import { AppProvider, PageWrap } from '@edx/frontend-platform/react';
 import {
-  queryByTestId, render, waitFor, getByText, fireEvent,
+  findByTestId, queryByTestId, render, waitFor, getByText, fireEvent,
 } from '@testing-library/react';
 import MockAdapter from 'axios-mock-adapter';
 import PagesAndResourcesProvider from 'CourseAuthoring/pages-and-resources/PagesAndResourcesProvider';
@@ -106,8 +106,9 @@ describe('XpertUnitSummarySettings', () => {
     });
 
     test('Shows switch on if enabled from backend', async () => {
+      const enableBadge = await findByTestId(container, 'enable-badge');
       expect(container.querySelector('#enable-xpert-unit-summary-toggle').checked).toBeTruthy();
-      expect(queryByTestId(container, 'enable-badge')).toBeTruthy();
+      expect(enableBadge).toBeTruthy();
     });
 
     test('Shows switch on if disabled from backend', async () => {

plugins/course-apps/xpert_unit_summary/Settings.test.jsx

@@ -699,7 +699,7 @@ describe('<ContentTagsCollapsible />', () => {
     const xButtonAppliedTag = within(appliedTag).getByRole('button', {
       name: /delete/i,
     });
-    xButtonAppliedTag.click();
+    await userEvent.click(xButtonAppliedTag);
 
     // Check that the applied tag has been removed
     expect(appliedTag).not.toBeInTheDocument();

src/content-tags-drawer/ContentTagsCollapsible.test.jsx

@@ -1,5 +1,4 @@
 import {
-  act,
   fireEvent,
   initializeMocks,
   render,
@@ -94,15 +93,12 @@ describe('<ContentTagsDrawer />', () => {
   });
 
   it('shows the taxonomies data including tag numbers after the query is complete', async () => {
-    await act(async () => {
-      const { container } = renderDrawer(largeTagsId);
-      await waitFor(() => { expect(screen.getByText('Taxonomy 1')).toBeInTheDocument(); });
-      expect(screen.getByText('Taxonomy 1')).toBeInTheDocument();
-      expect(screen.getByText('Taxonomy 2')).toBeInTheDocument();
-      const tagCountBadges = container.getElementsByClassName('taxonomy-tags-count-chip');
-      expect(tagCountBadges[0].textContent).toBe('3');
-      expect(tagCountBadges[1].textContent).toBe('2');
-    });
+    const { container } = renderDrawer(largeTagsId);
+    await screen.findByText('Taxonomy 1');
+    await screen.findByText('Taxonomy 2');
+    const tagCountBadges = container.getElementsByClassName('taxonomy-tags-count-chip');
+    expect(tagCountBadges[0].textContent).toBe('3');
+    expect(tagCountBadges[1].textContent).toBe('2');
   });
 
   it('should be read only on first render on drawer variant', async () => {

src/content-tags-drawer/ContentTagsDrawer.test.jsx

@@ -1,7 +1,6 @@
 import React from 'react';
 import { IntlProvider } from '@edx/frontend-platform/i18n';
 import {
-  act,
   render,
   waitFor,
   fireEvent,
@@ -74,11 +73,9 @@ describe('<ContentTagsDropDownSelector />', () => {
   }
 
   it('should render taxonomy tags drop down selector loading with spinner', async () => {
-    await act(async () => {
-      const { getByRole } = await getComponent();
-      const spinner = getByRole('status');
-      expect(spinner.textContent).toEqual('Loading tags'); // Uses <Spinner />
-    });
+    const { getByRole } = await getComponent();
+    const spinner = getByRole('status');
+    expect(spinner.textContent).toEqual('Loading tags'); // Uses <Spinner />
   });
 
   it('should render taxonomy tags drop down selector with no sub tags', async () => {
@@ -99,13 +96,11 @@ describe('<ContentTagsDropDownSelector />', () => {
       },
     });
 
-    await act(async () => {
-      const { container, getByText } = await getComponent();
+    const { container, getByText } = await getComponent();
 
-      await waitFor(() => {
-        expect(getByText('Tag 1')).toBeInTheDocument();
-        expect(container.getElementsByClassName('taxonomy-tags-arrow-drop-down').length).toBe(0);
-      });
+    await waitFor(() => {
+      expect(getByText('Tag 1')).toBeInTheDocument();
+      expect(container.getElementsByClassName('taxonomy-tags-arrow-drop-down').length).toBe(0);
     });
   });
 
@@ -127,13 +122,11 @@ describe('<ContentTagsDropDownSelector />', () => {
       },
     });
 
-    await act(async () => {
-      const { container, getByText } = await getComponent();
+    const { container, getByText } = await getComponent();
 
-      await waitFor(() => {
-        expect(getByText('Tag 2')).toBeInTheDocument();
-        expect(container.getElementsByClassName('taxonomy-tags-arrow-drop-down').length).toBe(1);
-      });
+    await waitFor(() => {
+      expect(getByText('Tag 2')).toBeInTheDocument();
+      expect(container.getElementsByClassName('taxonomy-tags-arrow-drop-down').length).toBe(1);
     });
   });
 
@@ -155,47 +148,45 @@ describe('<ContentTagsDropDownSelector />', () => {
       },
     });
 
-    await act(async () => {
-      const dataWithTagsTree = {
-        ...data,
-        tagsTree: {
-          'Tag 3': {
-            explicit: false,
-            children: {},
-          },
-        },
-      };
-      const { container, getByText } = await getComponent(dataWithTagsTree);
-      await waitFor(() => {
-        expect(getByText('Tag 2')).toBeInTheDocument();
-        expect(container.getElementsByClassName('taxonomy-tags-arrow-drop-down').length).toBe(1);
-      });
-
-      // Mock useTaxonomyTagsData again since it gets called in the recursive call
-      useTaxonomyTagsData.mockReturnValueOnce({
-        hasMorePages: false,
-        tagPages: {
-          isLoading: false,
-          isError: false,
-          data: [{
-            value: 'Tag 3',
-            externalId: null,
-            childCount: 0,
-            depth: 1,
-            parentValue: 'Tag 2',
-            id: 12346,
-            subTagsUrl: null,
-          }],
+    const dataWithTagsTree = {
+      ...data,
+      tagsTree: {
+        'Tag 3': {
+          explicit: false,
+          children: {},
         },
-      });
+      },
+    };
+    const { container, getByText } = await getComponent(dataWithTagsTree);
+    await waitFor(() => {
+      expect(getByText('Tag 2')).toBeInTheDocument();
+      expect(container.getElementsByClassName('taxonomy-tags-arrow-drop-down').length).toBe(1);
+    });
+
+    // Mock useTaxonomyTagsData again since it gets called in the recursive call
+    useTaxonomyTagsData.mockReturnValueOnce({
+      hasMorePages: false,
+      tagPages: {
+        isLoading: false,
+        isError: false,
+        data: [{
+          value: 'Tag 3',
+          externalId: null,
+          childCount: 0,
+          depth: 1,
+          parentValue: 'Tag 2',
+          id: 12346,
+          subTagsUrl: null,
+        }],
+      },
+    });
 
-      // Expand the dropdown to see the subtags selectors
-      const expandToggle = container.querySelector('.taxonomy-tags-arrow-drop-down span');
-      fireEvent.click(expandToggle);
+    // Expand the dropdown to see the subtags selectors
+    const expandToggle = container.querySelector('.taxonomy-tags-arrow-drop-down span');
+    fireEvent.click(expandToggle);
 
-      await waitFor(() => {
-        expect(getByText('Tag 3')).toBeInTheDocument();
-      });
+    await waitFor(() => {
+      expect(getByText('Tag 3')).toBeInTheDocument();
     });
   });
 
@@ -219,48 +210,46 @@ describe('<ContentTagsDropDownSelector />', () => {
     });
 
     const initalSearchTerm = 'test 1';
-    await act(async () => {
-      const { rerender } = await getComponent({ ...data, searchTerm: initalSearchTerm });
-
-      await waitFor(() => {
-        expect(useTaxonomyTagsData).toBeCalledWith(data.taxonomyId, null, 1, initalSearchTerm);
-      });
-
-      const updatedSearchTerm = 'test 2';
-      rerender(<ContentTagsDropDownSelectorComponent
-        key={`selector-${data.taxonomyId}`}
-        taxonomyId={data.taxonomyId}
-        level={data.level}
-        tagsTree={data.tagsTree}
-        searchTerm={updatedSearchTerm}
-        appliedContentTagsTree={{}}
-        stagedContentTagsTree={{}}
-      />);
-
-      await waitFor(() => {
-        expect(useTaxonomyTagsData).toBeCalledWith(data.taxonomyId, null, 1, updatedSearchTerm);
-      });
-
-      // Clean search term
-      const cleanSearchTerm = '';
-      rerender(<ContentTagsDropDownSelectorComponent
-        key={`selector-${data.taxonomyId}`}
-        taxonomyId={data.taxonomyId}
-        level={data.level}
-        tagsTree={data.tagsTree}
-        searchTerm={cleanSearchTerm}
-        appliedContentTagsTree={{}}
-        stagedContentTagsTree={{}}
-      />);
-
-      await waitFor(() => {
-        expect(useTaxonomyTagsData).toBeCalledWith(data.taxonomyId, null, 1, cleanSearchTerm);
-      });
+    const { rerender } = await getComponent({ ...data, searchTerm: initalSearchTerm });
+
+    await waitFor(() => {
+      expect(useTaxonomyTagsData).toHaveBeenCalledWith(data.taxonomyId, null, 1, initalSearchTerm);
+    });
+
+    const updatedSearchTerm = 'test 2';
+    rerender(<ContentTagsDropDownSelectorComponent
+      key={`selector-${data.taxonomyId}`}
+      taxonomyId={data.taxonomyId}
+      level={data.level}
+      tagsTree={data.tagsTree}
+      searchTerm={updatedSearchTerm}
+      appliedContentTagsTree={{}}
+      stagedContentTagsTree={{}}
+    />);
+
+    await waitFor(() => {
+      expect(useTaxonomyTagsData).toHaveBeenCalledWith(data.taxonomyId, null, 1, updatedSearchTerm);
+    });
+
+    // Clean search term
+    const cleanSearchTerm = '';
+    rerender(<ContentTagsDropDownSelectorComponent
+      key={`selector-${data.taxonomyId}`}
+      taxonomyId={data.taxonomyId}
+      level={data.level}
+      tagsTree={data.tagsTree}
+      searchTerm={cleanSearchTerm}
+      appliedContentTagsTree={{}}
+      stagedContentTagsTree={{}}
+    />);
+
+    await waitFor(() => {
+      expect(useTaxonomyTagsData).toHaveBeenCalledWith(data.taxonomyId, null, 1, cleanSearchTerm);
     });
   });
 
   it('should render "noTag" message if search doesnt return taxonomies', async () => {
-    useTaxonomyTagsData.mockReturnValueOnce({
+    useTaxonomyTagsData.mockReturnValue({
       hasMorePages: false,
       tagPages: {
         isLoading: false,
@@ -271,20 +260,18 @@ describe('<ContentTagsDropDownSelector />', () => {
     });
 
     const searchTerm = 'uncommon search term';
-    await act(async () => {
-      const { getByText } = await getComponent({ ...data, searchTerm });
-
-      await waitFor(() => {
-        expect(useTaxonomyTagsData).toBeCalledWith(data.taxonomyId, null, 1, searchTerm);
-      });
+    const { getByText } = await getComponent({ ...data, searchTerm });
 
-      const message = `No tags found with the search term "${searchTerm}"`;
-      expect(getByText(message)).toBeInTheDocument();
+    await waitFor(() => {
+      expect(useTaxonomyTagsData).toHaveBeenCalledWith(data.taxonomyId, null, 1, searchTerm);
     });
+
+    const message = `No tags found with the search term "${searchTerm}"`;
+    expect(getByText(message)).toBeInTheDocument();
   });
 
   it('should render "noTagsInTaxonomy" message if taxonomy is empty', async () => {
-    useTaxonomyTagsData.mockReturnValueOnce({
+    useTaxonomyTagsData.mockReturnValue({
       hasMorePages: false,
       tagPages: {
         isLoading: false,
@@ -295,15 +282,13 @@ describe('<ContentTagsDropDownSelector />', () => {
     });
 
     const searchTerm = '';
-    await act(async () => {
-      const { getByText } = await getComponent({ ...data, searchTerm });
-
-      await waitFor(() => {
-        expect(useTaxonomyTagsData).toBeCalledWith(data.taxonomyId, null, 1, searchTerm);
-      });
+    const { getByText } = await getComponent({ ...data, searchTerm });
 
-      const message = 'No tags in this taxonomy yet';
-      expect(getByText(message)).toBeInTheDocument();
+    await waitFor(() => {
+      expect(useTaxonomyTagsData).toHaveBeenCalledWith(data.taxonomyId, null, 1, searchTerm);
     });
+
+    const message = 'No tags in this taxonomy yet';
+    expect(getByText(message)).toBeInTheDocument();
   });
 });