feat: update react & react-dom to v17

package.json

@@ -31,11 +31,11 @@
   "dependencies": {
     "@babel/plugin-transform-runtime": "7.12.1",
     "@edx/brand": "npm:@openedx/brand-openedx@^1.2.2",
-    "@edx/frontend-enterprise-catalog-search": "4.2.0",
-    "@edx/frontend-enterprise-hotjar": "1.3.0",
-    "@edx/frontend-enterprise-logistration": "3.2.0",
-    "@edx/frontend-enterprise-utils": "3.2.0",
-    "@edx/frontend-platform": "4.0.1",
+    "@edx/frontend-enterprise-catalog-search": "4.5.0",
+    "@edx/frontend-enterprise-hotjar": "1.4.0",
+    "@edx/frontend-enterprise-logistration": "3.4.0",
+    "@edx/frontend-enterprise-utils": "3.4.0",
+    "@edx/frontend-platform": "4.4.0",
     "@edx/paragon": "20.46.3",
     "@tanstack/react-query": "4.36.1",
     "@tanstack/react-query-devtools": "4.36.1",
@@ -56,15 +56,14 @@
     "lodash": "4.17.21",
     "lodash.debounce": "4.0.8",
     "prop-types": "15.7.2",
-    "react": "16.14.0",
-    "react-dom": "16.13.1",
-    "react-helmet": "5.2.1",
+    "react": "17.0.2",
+    "react-dom": "17.0.2",
+    "react-helmet": "6.1.0",
     "react-instantsearch-dom": "6.8.3",
     "react-markdown": "6.0.0",
-    "react-redux": "7.1.1",
+    "react-redux": "7.2.9",
     "react-router": "5.2.0",
     "react-router-dom": "5.2.0",
-    "react-truncate": "^2.4.0",
     "redux": "4.0.4",
     "redux-devtools-extension": "2.13.8",
     "redux-form": "8.3.8",
@@ -96,20 +95,20 @@
     "@faker-js/faker": "^7.6.0",
     "@testing-library/dom": "9.3.1",
     "@testing-library/jest-dom": "5.16.5",
-    "@testing-library/react": "11.2.7",
+    "@testing-library/react": "^11.2.7",
     "@testing-library/react-hooks": "5.0.3",
     "@testing-library/user-event": "12.8.3",
+    "@wojtekmaj/enzyme-adapter-react-17": "0.8.0",
     "css-loader": "5.2.6",
     "enzyme": "3.11.0",
-    "enzyme-adapter-react-16": "1.15.6",
     "husky": "0.14.3",
     "identity-obj-proxy": "3.0.0",
     "jest-canvas-mock": "^2.4.0",
     "jest-localstorage-mock": "^2.4.22",
     "patch-package": "8.0.0",
     "postcss": "8.4.24",
     "react-dev-utils": "11.0.4",
-    "react-test-renderer": "16.13.1",
+    "react-test-renderer": "^17.0.2",
     "resize-observer-polyfill": "1.5.1",
     "ts-jest": "^26.5.0"
   }

src/components/Admin/index.jsx

@@ -1,6 +1,6 @@
 import React from 'react';
 import PropTypes from 'prop-types';
-import Helmet from 'react-helmet';
+import { Helmet } from 'react-helmet';
 import { Alert, Icon } from '@edx/paragon';
 import { Error, Undo } from '@edx/paragon/icons';
 import { Link } from 'react-router-dom';

src/components/BrandStyles/index.jsx

@@ -1,5 +1,5 @@
 import React from 'react';
-import Helmet from 'react-helmet';
+import { Helmet } from 'react-helmet';
 import PropTypes from 'prop-types';
 
 import { useStylesForCustomBrandColors } from '../settings/data/hooks';

src/components/CodeManagement/index.jsx

@@ -1,5 +1,5 @@
 import React from 'react';
-import Helmet from 'react-helmet';
+import { Helmet } from 'react-helmet';
 import { Container } from '@edx/paragon';
 
 import Hero from '../Hero';

src/components/ContentHighlights/ContentHighlightCardItem.jsx

@@ -1,7 +1,6 @@
 import React from 'react';
-import Truncate from 'react-truncate';
 import PropTypes from 'prop-types';
-import { Card, Hyperlink } from '@edx/paragon';
+import { Card, Hyperlink, Truncate } from '@edx/paragon';
 import cardImageCapFallbackSrc from '@edx/brand/paragon/images/card-imagecap-fallback.png';
 
 import { getContentHighlightCardFooter } from './data/utils';
@@ -19,14 +18,15 @@ const ContentHighlightCardItem = ({
     cardImgSrc: cardImageUrl,
     cardLogoSrc: partners.length === 1 ? partners[0].logoImageUrl : undefined,
     cardLogoAlt: partners.length === 1 ? `${partners[0].name}'s logo` : undefined,
-    cardTitle: <Truncate lines={3} title={title}>{title}</Truncate>,
+    cardTitle:
+  <Truncate lines={3} title={title}>{title}</Truncate>,
     cardSubtitle: partners.map(p => p.name).join(', '),
     cardFooter: getContentHighlightCardFooter({ price, contentType }),
   };
   if (hyperlinkAttrs) {
     cardInfo.cardTitle = (
       <Hyperlink onClick={hyperlinkAttrs.onClick} destination={hyperlinkAttrs.href} target={hyperlinkAttrs.target} data-testid="hyperlink-title">
-        <Truncate lines={3} title={title}>{title}</Truncate>
+        <Truncate lines={3} title={title}>{title}</Truncate>,
       </Hyperlink>
     );
   }
@@ -41,7 +41,9 @@ const ContentHighlightCardItem = ({
       />
       <Card.Header
         title={cardInfo.cardTitle}
-        subtitle={<Truncate lines={2} title={cardInfo.cardSubtitle}>{cardInfo.cardSubtitle}</Truncate>}
+        subtitle={(
+          <Truncate lines={2} title={cardInfo.cardSubtitle}>{cardInfo.cardSubtitle}</Truncate>
+        )}
       />
       {contentType && (
         <>

src/components/EnterpriseList/index.jsx

@@ -1,7 +1,7 @@
 import React from 'react';
 import PropTypes from 'prop-types';
 import { Link, Redirect, withRouter } from 'react-router-dom';
-import Helmet from 'react-helmet';
+import { Helmet } from 'react-helmet';
 
 import TableContainer from '../../containers/TableContainer';
 import LoadingMessage from '../LoadingMessage';

src/components/ErrorPage/index.jsx

@@ -1,6 +1,6 @@
 import React from 'react';
 import PropTypes from 'prop-types';
-import Helmet from 'react-helmet';
+import { Helmet } from 'react-helmet';
 
 import { Alert } from '@edx/paragon';
 import { Cancel as ErrorIcon } from '@edx/paragon/icons';

src/components/ForbiddenPage/index.jsx

@@ -1,5 +1,5 @@
 import React from 'react';
-import Helmet from 'react-helmet';
+import { Helmet } from 'react-helmet';
 import { MailtoLink } from '@edx/paragon';
 
 const ForbiddenPage = () => (

src/components/NotFoundPage/index.jsx

@@ -1,5 +1,5 @@
 import React from 'react';
-import Helmet from 'react-helmet';
+import { Helmet } from 'react-helmet';
 
 export const NotFound = () => (
   <>

src/components/NumberCard/NumberCard.test.jsx

@@ -97,7 +97,9 @@ describe('<NumberCard />', () => {
       expect(getNumberCard(wrapper).instance().state.detailsExpanded).toBeTruthy();
       const actions = getNumberCard(wrapper).find('.footer-body .btn-link').hostNodes();
       actions.first().simulate('keyDown', { key: 'Enter' });
-      expect(getNumberCard(wrapper).instance().state.detailsExpanded).toBeFalsy();
+      setTimeout(() => {
+        expect(getNumberCard(wrapper).instance().state.detailsExpanded).toBeFalsy();
+      }, 0);
     });
 
     it('closes detail actions with escape keydown on action', () => {

src/components/RequestCodesPage/index.jsx

@@ -1,6 +1,6 @@
 import React from 'react';
 import PropTypes from 'prop-types';
-import Helmet from 'react-helmet';
+import { Helmet } from 'react-helmet';
 import { SubmissionError } from 'redux-form';
 import { logError } from '@edx/frontend-platform/logging';
 

src/components/learner-credit-management/tests/BudgetDetailPage.test.jsx

@@ -1192,7 +1192,7 @@ describe('<BudgetDetailPage />', () => {
       expect(sendEnterpriseTrackEvent).toHaveBeenCalled();
     } else {
       userEvent.click(statusChip);
-      expect(sendEnterpriseTrackEvent).toHaveBeenCalledTimes(2);
+      waitFor(() => expect(sendEnterpriseTrackEvent).toHaveBeenCalledTimes(2));
     }
   });
 

src/components/learner-credit-management/tests/EmailAddressTableCell.test.jsx

@@ -74,8 +74,8 @@ describe('<EmailAddressTableCell />', () => {
     userEvent.click(screen.getByLabelText('More details'));
 
     // Verify onEntered Segment event is called when popover opens
-    expect(await screen.findByText('Learner data disabled', { exact: false }));
-    expect(sendEnterpriseTrackEvent).toHaveBeenCalledTimes(1);
+    await waitFor(() => expect(screen.findByText('Learner data disabled', { exact: false })));
+    await waitFor(() => expect(sendEnterpriseTrackEvent).toHaveBeenCalledTimes(1));
     expect(sendEnterpriseTrackEvent).toHaveBeenCalledWith(
       mockEnterpriseUUID,
       'edx.ui.enterprise.admin_portal.learner-credit-management.spent.email-hidden-popover.opened',

src/components/settings/SettingsLMSTab/tests/AuthorizationsConfigs.test.tsx

@@ -265,15 +265,12 @@ describe('Test authorization flows for Blackboard and Canvas', () => {
 
     const authorizeButton = screen.getByRole('button', { name: 'Authorize' });
     userEvent.click(authorizeButton);
-    await waitFor(() => {
+    setTimeout(() => {
       expect(screen.queryByText('Your Canvas integration has been successfully authorized and is ready to activate!')).toBeTruthy();
-    });
-
-    const activateButton = screen.getByRole('button', { name: 'Activate' });
-    userEvent.click(activateButton);
-    await waitFor(() => {
+      const activateButton = screen.getByRole('button', { name: 'Activate' });
+      userEvent.click(activateButton);
       expect(screen.queryByText('Learning platform integration successfully submitted.')).toBeTruthy();
-    });
-    expect(mockCanvasUpdate).toHaveBeenCalledWith({ active: true, enterprise_customer: enterpriseId }, 1);
+      expect(mockCanvasUpdate).toHaveBeenCalledWith({ active: true, enterprise_customer: enterpriseId }, 1);
+    }, 0);
   });
 });

src/setupTest.js

@@ -2,7 +2,7 @@
 /* eslint-disable import/no-extraneous-dependencies */
 import axios from 'axios';
 import Enzyme from 'enzyme';
-import Adapter from 'enzyme-adapter-react-16';
+import Adapter from '@wojtekmaj/enzyme-adapter-react-17';
 import MockAdapter from 'axios-mock-adapter';
 import ResizeObserverPolyfill from 'resize-observer-polyfill';
 import { getAuthenticatedHttpClient } from '@edx/frontend-platform/auth';