feat: upgrade react to v18

package.json

@@ -31,15 +31,15 @@
   },
   "dependencies": {
     "@edx/brand": "npm:@openedx/brand-openedx@^1.2.2",
-    "@edx/frontend-enterprise-utils": "9.1.0",
-    "@edx/frontend-platform": "8.0.0",
+    "@edx/frontend-enterprise-utils": "10.0.0",
+    "@edx/frontend-platform": "8.3.6",
     "@edx/openedx-atlas": "^0.6.0",
     "@fortawesome/fontawesome-svg-core": "1.2.32",
     "@fortawesome/free-brands-svg-icons": "5.15.1",
     "@fortawesome/free-regular-svg-icons": "5.15.1",
     "@fortawesome/free-solid-svg-icons": "5.15.1",
     "@fortawesome/react-fontawesome": "^0.1.14",
-    "@openedx/paragon": "21.13.1",
+    "@openedx/paragon": "22.17.0",
     "axios": "^1.7.7",
     "babel-polyfill": "6.26.0",
     "classnames": "2.2.6",
@@ -48,8 +48,8 @@
     "lodash.snakecase": "4.1.1",
     "moment": "2.29.4",
     "prop-types": "15.7.2",
-    "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-responsive": "^8.2.0",
@@ -64,20 +64,17 @@
   "devDependencies": {
     "@edx/browserslist-config": "^1.1.0",
     "@edx/reactifex": "^1.0.3",
-    "@openedx/frontend-build": "14.0.3",
+    "@openedx/frontend-build": "14.6.0",
     "@testing-library/dom": "^9.3.4",
     "@testing-library/jest-dom": "^5.17.0",
-    "@testing-library/react": "12.1.4",
-    "@testing-library/react-hooks": "^8.0.1",
+    "@testing-library/react": "13.4.0",
     "@testing-library/user-event": "^14.5.2",
     "@types/react-table": "^7.7.2",
-    "@wojtekmaj/enzyme-adapter-react-17": "^0.8.0",
     "axios-mock-adapter": "^1.19.0",
-    "enzyme": "3.11.0",
     "glob": "7.1.6",
     "jest": "^29.7.0",
     "jest-environment-jsdom": "^29.7.0",
-    "react-test-renderer": "^17.0.2",
+    "react-test-renderer": "^18.3.1",
     "reactifex": "1.1.1"
   }
 }

src/Configuration/Customers/CustomerDetailView/tests/EnterpriseCustomerUserDetail.test.jsx

@@ -4,6 +4,7 @@ import {
   render,
 } from '@testing-library/react';
 import '@testing-library/jest-dom';
+import { IntlProvider } from '@edx/frontend-platform/i18n';
 import {
   EnterpriseCustomerUserDetail,
   AdministratorCell,
@@ -20,7 +21,7 @@ describe('EnterpriseCustomerUserDetail', () => {
         },
       },
     };
-    render(<EnterpriseCustomerUserDetail row={enterpriseCustomerUser} />);
+    render(<IntlProvider locale="en"><EnterpriseCustomerUserDetail row={enterpriseCustomerUser} /></IntlProvider>);
     expect(screen.getByText('ash ketchum')).toBeInTheDocument();
     expect(screen.getByText('[email protected]')).toBeInTheDocument();
     expect(screen.getByTestId('icon-hyperlink')).toHaveAttribute('href', '/learner-information/[email protected]');

src/Configuration/Customers/data/hooks/tests/useCustomerUsersTableData.test.js

@@ -1,5 +1,4 @@
-import { renderHook } from '@testing-library/react-hooks';
-import { waitFor } from '@testing-library/react';
+import { renderHook, waitFor } from '@testing-library/react';
 
 import LmsApiService from '../../../../../data/services/EnterpriseApiService';
 import useCustomerUsersTableData from '../useCustomerUsersTableData';

src/Configuration/Provisioning/DashboardDataTable/tests/DashboardTableLinks.test.jsx

@@ -1,6 +1,7 @@
 /* eslint-disable react/prop-types */
 import { screen, render } from '@testing-library/react';
 import { getConfig } from '@edx/frontend-platform';
+import { IntlProvider } from '@edx/frontend-platform/i18n';
 import {
   CustomerNameHyperlink,
   DjangoIconHyperlink,
@@ -31,7 +32,7 @@ describe('DashboardTableLinks', () => {
       getConfig.mockImplementation(() => ({
         FEATURE_CONFIGURATION_EDIT_ENTERPRISE_PROVISION: 'true',
       }));
-      render(<PlanIdHyperlink row={row} />);
+      render(<IntlProvider locale="en"><PlanIdHyperlink row={row} /></IntlProvider>);
       expect(screen.getByRole('link', { name: '123456789' })).toHaveAttribute('href', '/enterprise-configuration/learner-credit/123456789/view');
     });
 
@@ -51,7 +52,7 @@ describe('DashboardTableLinks', () => {
       getConfig.mockImplementation(() => ({
         FEATURE_CONFIGURATION_EDIT_ENTERPRISE_PROVISION: 'true',
       }));
-      render(<PlanTitleHyperlink row={row} />);
+      render(<IntlProvider locale="en"><PlanTitleHyperlink row={row} /></IntlProvider>);
       expect(screen.getByRole('link', { name: 'Pikachu' })).toHaveAttribute('href', '/enterprise-configuration/learner-credit/123456789/view');
     });
 
@@ -71,7 +72,7 @@ describe('DashboardTableLinks', () => {
       getConfig.mockImplementation(() => ({
         FEATURE_CONFIGURATION_EDIT_ENTERPRISE_PROVISION: 'true',
       }));
-      render(<CustomerNameHyperlink row={row} />);
+      render(<IntlProvider locale="en"><CustomerNameHyperlink row={row} /></IntlProvider>);
       expect(screen.getByRole('link', { name: 'Ash Ketchum' })).toHaveAttribute('href', '/enterprise-configuration/learner-credit/123456789/view');
     });
 
@@ -91,7 +92,7 @@ describe('DashboardTableLinks', () => {
       getConfig.mockImplementation(() => ({
         DJANGO_ADMIN_SUBSIDY_BASE_URL: 'https://pokemons.com',
       }));
-      render(<DjangoIconHyperlink row={row} />);
+      render(<IntlProvider locale="en"><DjangoIconHyperlink row={row} /></IntlProvider>);
       expect(screen.getByTestId('django-admin-link')).toHaveAttribute('href', 'https://pokemons.com/admin/subsidy/subsidy/123456789/change/');
     });
   });

src/Configuration/Provisioning/SubsidyDetailView/PolicyDetailView/tests/AssociatedCatalogDetail.test.jsx

@@ -1,9 +1,9 @@
 import { v4 as uuidv4 } from 'uuid';
-import '@testing-library/jest-dom/extend-expect';
 import { render, screen } from '@testing-library/react';
 import AssociatedCatalogDetail from '../AssociatedCatalogDetail';
 import { initialStateValue, ProvisioningContext } from '../../../../testData/Provisioning';
 import { PREDEFINED_QUERIES_ENUM, PREDEFINED_QUERY_DISPLAY_NAMES } from '../../../data/constants';
+import '@testing-library/jest-dom';
 
 const AssociatedCatalogDetailWrapper = ({
   // eslint-disable-next-line react/prop-types

src/Configuration/Provisioning/SubsidyDetailView/PolicyDetailView/tests/CustomCatalogDetail.test.jsx

@@ -1,15 +1,17 @@
 import React from 'react';
 import { screen } from '@testing-library/react';
 import { renderWithRouter } from '@edx/frontend-enterprise-utils';
-import '@testing-library/jest-dom/extend-expect';
+import { IntlProvider } from '@edx/frontend-platform/i18n';
 import CustomCatalogDetail from '../CustomCatalogDetail';
+import '@testing-library/jest-dom';
 
 const mockCatalogTitle = 'Foo Bar Catalog';
 
 describe('CustomCatalogDetail', () => {
   it('renders the component with content', () => {
     renderWithRouter(
-      <CustomCatalogDetail catalogTitle={mockCatalogTitle} />,
+      <IntlProvider locale="en"><CustomCatalogDetail catalogTitle={mockCatalogTitle} /></IntlProvider>
+      ,
     );
     expect(screen.getByText(mockCatalogTitle)).toBeInTheDocument();
   });

src/Configuration/Provisioning/SubsidyDetailView/PolicyDetailView/tests/PolicyContainer.test.jsx

@@ -1,7 +1,7 @@
 import { render, screen } from '@testing-library/react';
-import '@testing-library/jest-dom/extend-expect';
 import React from 'react';
 import PolicyContainer from '../PolicyContainer';
+import '@testing-library/jest-dom';
 import { initialStateValue, ProvisioningContext } from '../../../../testData/Provisioning';
 import { sampleSinglePolicyPredefinedCatalogQueryFormData } from '../../../../testData/constants';
 

src/Configuration/Provisioning/SubsidyDetailView/PolicyDetailView/tests/PolicyDescription.test.jsx

@@ -1,6 +1,6 @@
 import { render, screen } from '@testing-library/react';
-import '@testing-library/jest-dom/extend-expect';
 import PolicyDescription from '../PolicyDescription';
+import '@testing-library/jest-dom';
 
 const mockDescription = 'I want to be the very best';
 

src/Configuration/Provisioning/SubsidyDetailView/PolicyDetailView/tests/PolicyDetail.test.jsx

@@ -1,8 +1,8 @@
 import { render, screen } from '@testing-library/react';
-import '@testing-library/jest-dom/extend-expect';
 import PolicyDetail from '../PolicyDetail';
 import { initialStateValue, ProvisioningContext } from '../../../../testData/Provisioning';
 import { sampleSinglePolicyPredefinedCatalogQueryFormData } from '../../../../testData/constants';
+import '@testing-library/jest-dom';
 
 const PolicyDetailWrapper = ({
   // eslint-disable-next-line react/prop-types

src/Configuration/Provisioning/SubsidyDetailView/PolicyDetailView/tests/PolicyDetailHeader.test.jsx

@@ -1,7 +1,7 @@
 import { render, screen } from '@testing-library/react';
-import '@testing-library/jest-dom/extend-expect';
 import PolicyDetailHeader from '../PolicyDetailHeader';
 import { initialStateValue, ProvisioningContext } from '../../../../testData/Provisioning';
+import '@testing-library/jest-dom';
 
 const PolicyDetailHeaderWrapper = ({
   // eslint-disable-next-line react/prop-types

src/Configuration/Provisioning/SubsidyDetailView/PolicyDetailView/tests/PolicyDistributionDetail.test.jsx

@@ -1,7 +1,7 @@
 import { render, screen } from '@testing-library/react';
-import '@testing-library/jest-dom/extend-expect';
 import PolicyDistributionDetail from '../PolicyDistributionDetail';
 import { initialStateValue, ProvisioningContext } from '../../../../testData/Provisioning';
+import '@testing-library/jest-dom';
 
 describe('PolicyDistributionDetail', () => {
   it('renders Learner selects option', () => {

src/Configuration/Provisioning/SubsidyDetailView/PolicyDetailView/tests/PolicyLimitsDetail.test.jsx

@@ -1,7 +1,7 @@
 import { render, screen } from '@testing-library/react';
-import '@testing-library/jest-dom/extend-expect';
 import PolicyLimitsDetail from '../PolicyLimitsDetail';
 import { initialStateValue, ProvisioningContext } from '../../../../testData/Provisioning';
+import '@testing-library/jest-dom';
 
 const PolicyLimitsDetailWrapper = ({
   // eslint-disable-next-line react/prop-types

src/Configuration/Provisioning/SubsidyEditView/SaveEditsButton.jsx

@@ -246,6 +246,7 @@ const SaveEditsButton = () => {
   };
   return (
     <StatefulButton
+      data-testid="save-edits-stateful-button"
       className="mr-1"
       labels={buttonLabels}
       variant={submitButtonState === 'error' ? 'danger' : 'primary'}

src/Configuration/Provisioning/SubsidyEditView/tests/CancelButton.test.jsx

@@ -1,9 +1,9 @@
-import '@testing-library/jest-dom/extend-expect';
 import PropTypes from 'prop-types';
 import { screen, waitFor } from '@testing-library/react';
 import Router from 'react-router-dom';
 import userEvent from '@testing-library/user-event';
 import { renderWithRouter } from '@edx/frontend-enterprise-utils';
+import '@testing-library/jest-dom';
 import CancelButton from '../CancelButton';
 import PROVISIONING_PAGE_TEXT from '../../data/constants';
 import { hydratedInitialState, ProvisioningContext } from '../../../testData/Provisioning/ProvisioningContextWrapper';

src/Configuration/Provisioning/SubsidyEditView/tests/SaveEditsButton.test.jsx

@@ -1,6 +1,7 @@
 /* eslint-disable react/prop-types */
-import '@testing-library/jest-dom/extend-expect';
-import { fireEvent, screen, waitFor } from '@testing-library/react';
+import {
+  fireEvent, screen, waitFor, render,
+} from '@testing-library/react';
 import { renderWithRouter } from '@edx/frontend-enterprise-utils';
 import SaveEditsButton from '../SaveEditsButton';
 import PROVISIONING_PAGE_TEXT from '../../data/constants';
@@ -12,6 +13,7 @@ import {
   sampleSinglePolicyCustomCatalogQueryFormData,
   sampleSinglePolicyPredefinedCatalogQueryFormData,
 } from '../../../testData/constants';
+import '@testing-library/jest-dom';
 
 const { SAVE_BUTTON } = PROVISIONING_PAGE_TEXT.FORM;
 
@@ -69,12 +71,11 @@ describe('Save edits button', () => {
     expect(screen.getByText(SAVE_BUTTON.submit)).toBeTruthy();
   });
   it('calls handleSubmit error state when clicked with no data', async () => {
-    renderWithRouter(<SaveEditsButtonWrapper />);
-
+    const { rerender } = render(<SaveEditsButtonWrapper />);
     const submitButton = screen.getByText(SAVE_BUTTON.submit);
-    fireEvent.click(submitButton);
-
-    await waitFor(() => expect(screen.getByText(SAVE_BUTTON.error)).toBeTruthy());
+    await waitFor(() => fireEvent.click(submitButton));
+    rerender(<SaveEditsButtonWrapper />);
+    await waitFor(() => expect(screen.getByText(SAVE_BUTTON.error)).toBeInTheDocument());
   });
   for (let i = 0; i < sampleDataSet.length; i++) {
     it(`calls handleSubmit complete state when clicked with ${Object.keys(sampleDataSet[i])} data`, async () => {

src/Configuration/Provisioning/SubsidyEditView/tests/SubsidyEditView.test.jsx

@@ -1,6 +1,6 @@
 /* eslint-disable react/prop-types */
-import '@testing-library/jest-dom/extend-expect';
 import { renderWithRouter } from '@edx/frontend-enterprise-utils';
+import '@testing-library/jest-dom';
 import { fireEvent, screen, waitFor } from '@testing-library/react';
 import userEvent from '@testing-library/user-event';
 import { initialStateValue, ProvisioningContext } from '../../../testData/Provisioning/ProvisioningContextWrapper';

src/Configuration/test/ConfigurationPage.test.jsx

@@ -1,4 +1,5 @@
 import { render, screen } from '@testing-library/react';
+import { IntlProvider } from '@edx/frontend-platform/i18n';
 import ConfigurationPage from '../ConfigurationPage';
 import ROUTES from '../../data/constants/routes';
 import { titleCase } from '../../utils';
@@ -8,11 +9,11 @@ const { CONFIGURATION: { SUB_DIRECTORY } } = ROUTES;
 
 describe('ConfigurationPage', () => {
   it('renders', () => {
-    render(<ConfigurationPage />);
+    render(<IntlProvider locale="en"><ConfigurationPage /></IntlProvider>);
     expect(screen.getByText(CONFIGURATION_PAGE_TEXT.HEADER)).toBeTruthy();
   });
   it('renders links to subdirectories', () => {
-    render(<ConfigurationPage />);
+    render(<IntlProvider locale="en"><ConfigurationPage /></IntlProvider>);
     Object.keys(SUB_DIRECTORY).forEach((route) => {
       expect(screen.getByText(titleCase(route))).toBeTruthy();
     });

src/FeatureBasedEnrollments/FeatureBasedEnrollment.jsx

@@ -52,7 +52,7 @@ export default function FeatureBasedEnrollment({ courseId, apiFetchSignal }) {
                 </Row>
               </>
             )
-            : (<p className="my-4">No Feature Based Enrollment Configurations were found.</p>)
+            : (<p data-testid="no-enrollment-configuration-message" className="my-4">No Feature Based Enrollment Configurations were found.</p>)
           )
         )
         : (

src/FeatureBasedEnrollments/FeatureBasedEnrollment.test.jsx

@@ -1,6 +1,5 @@
-import { mount } from 'enzyme';
+import { render, screen, waitFor } from '@testing-library/react';
 import React from 'react';
-import { waitFor } from '@testing-library/react';
 import FeatureBasedEnrollment from './FeatureBasedEnrollment';
 import UserMessagesProvider from '../userMessages/UserMessagesProvider';
 import { fbeEnabledResponse } from './data/test/featureBasedEnrollment';
@@ -19,52 +18,54 @@ describe('Feature Based Enrollment', () => {
     apiFetchSignal: true,
   };
 
-  let wrapper;
+  let unmountComponent; let apiMock;
 
   beforeEach(async () => {
     // api file has only one default export, so that will be spied-on
-    jest.spyOn(api, 'default').mockImplementationOnce(() => Promise.resolve(fbeEnabledResponse));
-    wrapper = mount(<FeatureBasedEnrollmentWrapper {...props} />);
+    apiMock = jest.spyOn(api, 'default').mockImplementationOnce(() => Promise.resolve(fbeEnabledResponse));
+    const { unmount } = render(<FeatureBasedEnrollmentWrapper {...props} />);
+    unmountComponent = unmount;
   });
 
   afterEach(() => {
-    wrapper.unmount();
+    unmountComponent();
   });
 
   it('default props', () => {
-    const courseId = wrapper.prop('courseId');
-    expect(courseId).toEqual(props.courseId);
+    expect(apiMock).toBeCalledWith(props.courseId);
   });
 
   it('Successful fetch for FBE data', async () => {
-    const cardList = wrapper.find('Card');
-    const courseTitle = wrapper.find('h4');
+    const cardList = await screen.findAllByTestId('feature-based-enrollment-card');
+    const courseTitle = document.querySelector('h4');
 
-    waitFor(() => {
+    await waitFor(() => {
       expect(cardList).toHaveLength(2);
-      expect(wrapper.find('h3#fbe-title-header').text()).toEqual('Feature Based Enrollment Configuration');
-      expect(courseTitle.text()).toEqual('Course Title: test course');
+      expect(document.querySelector('h3#fbe-title-header').textContent).toEqual('Feature Based Enrollment Configuration');
+      expect(courseTitle.textContent).toEqual('Course Title: test course');
     });
   });
 
   it('No FBE Data', async () => {
+    unmountComponent();
     jest.spyOn(api, 'default').mockImplementationOnce(() => Promise.resolve({}));
-    wrapper = mount(<FeatureBasedEnrollmentWrapper {...props} />);
+    render(<FeatureBasedEnrollmentWrapper {...props} />);
 
-    const cardList = wrapper.find('Card');
-    const noRecordMessage = wrapper.find('p');
+    const cardList = await screen.queryAllByTestId('feature-based-enrollment-card');
+    const noRecordMessage = await screen.findByTestId('no-enrollment-configuration-message');
 
     expect(cardList).toHaveLength(0);
-    expect(wrapper.find('h3#fbe-title-header').text()).toEqual('Feature Based Enrollment Configuration');
-    waitFor(() => expect(noRecordMessage.text()).toEqual('No Feature Based Enrollment Configurations were found.'));
+    expect(document.querySelector('h3#fbe-title-header').textContent).toEqual('Feature Based Enrollment Configuration');
+    await waitFor(() => expect(noRecordMessage.textContent).toEqual('No Feature Based Enrollment Configurations were found.'));
   });
 
   it('Page Loading component render', async () => {
-    wrapper = mount(<FeatureBasedEnrollmentWrapper {...props} />);
-    expect(wrapper.find('PageLoading').html()).toEqual(expect.stringContaining('Loading'));
+    render(<FeatureBasedEnrollmentWrapper {...props} />);
+    expect((await screen.findByTestId('page-loading')).textContent).toEqual(expect.stringContaining('Loading'));
   });
 
   it('Error fetching FBE data', async () => {
+    unmountComponent();
     const fbeErrors = {
       errors: [
         {
@@ -77,9 +78,9 @@ describe('Feature Based Enrollment', () => {
       ],
     };
     jest.spyOn(api, 'default').mockImplementationOnce(() => Promise.resolve(fbeErrors));
-    wrapper = mount(<FeatureBasedEnrollmentWrapper {...props} />);
+    render(<FeatureBasedEnrollmentWrapper {...props} />);
 
-    const alert = wrapper.find('.alert');
-    waitFor(() => expect(alert.text()).toEqual('Error fetching FBE Data'));
+    const alert = document.querySelector('.alert');
+    waitFor(() => expect(alert.textContent).toEqual('Error fetching FBE Data'));
   });
 });