feat: upgrade react to v18

[huniafatima-99]

Description

This PR upgrades react to v18. It also updated the test cases to remove the deprecated approaches according to react 18.

How Has This Been Tested?

All the test suites were ran and they were successful. In addition, major functionalities are working when ran the MFE in the browser.

Merge Checklist

• If your update includes visual changes, have they been reviewed by a designer? Send them a link to the Sandbox, if applicable.
• Is there adequate test coverage for your changes?

Post-merge Checklist

• Deploy the changes to prod after verifying on stage or ask @openedx/edx-infinity to do it.
• 🎉 🙌 Celebrate! Thanks for your contribution.

[codecov]

Codecov Report

Attention: Patch coverage is 0% with 3 lines in your changes missing coverage. Please review.

Project coverage is 58.50%. Comparing base (17e12f7) to head (b71f55a).
Report is 2 commits behind head on master.

Files with missing lines	Patch %	Lines
src/index.jsx	0.00%	3 Missing ⚠️

Additional details and impacted files

@@            Coverage Diff             @@
##           master    #1220      +/-   ##
==========================================
- Coverage   58.53%   58.50%   -0.03%     
==========================================
  Files         117      117              
  Lines        2320     2321       +1     
  Branches      639      641       +2     
==========================================
  Hits         1358     1358              
- Misses        901      902       +1     
  Partials       61       61              

☔ View full report in Codecov by Sentry.
📢 Have feedback on the report? Share it here.

🚀 New features to boost your workflow:

• ❄️ Test Analytics: Detect flaky tests, report on failures, and find test suite problems.
• 📦 JS Bundle Analysis: Save yourself from yourself by tracking and limiting bundle sizes in JS merges.

[brian-smith-tcril]

Thank you so much for opening this PR! The plan for the React 18 upgrades is to use StrictMode - would you be able to update this PR to do that?

https://react.dev/reference/react/StrictMode

[huniafatima-99]

@brian-smith-tcril sure, let me update the PR.

[brian-smith-tcril]

Thank you so much for this! Overall it's looking great. Just one small note about a snapshot test that seems to have broken.

[brian-smith-tcril]

It looks like something broke this snapshot.

[huniafatima-99]

@brian-smith-tcril resolved.

[brian-smith-tcril]

@huniafatima-99 it looks like this changed but now instead of replacing the actual snapshot with

exports[`SuccessModal should match open success modal snapshot 1`] = `undefined`;

it doesn't even say "SuccessModal should match open success modal snapshot" anymore

[brian-smith-tcril]

I did a bit of digging into this. If you replace SuccessModal.test.jsx with

import React from 'react';
import renderer from 'react-test-renderer';
import { IntlProvider, injectIntl } from '@edx/frontend-platform/i18n';

import { waitFor } from '@testing-library/react';
import { SuccessModal } from './SuccessModal'; // eslint-disable-line import/first

// Modal creates a portal.  Overriding createPortal allows portals to be tested in jest.
jest.mock('react-dom', () => ({
  ...jest.requireActual('react-dom'),
  createPortal: jest.fn(node => node), // Mock portal behavior
}));

const IntlSuccessModal = injectIntl(SuccessModal);

describe('SuccessModal', () => {
  let props = {};

  beforeEach(() => {
    props = {
      onClose: jest.fn(),
      status: null,
    };
  });

  it('should match default closed success modal snapshot', async () => {
    await waitFor(() => {
      const tree = renderer.create((
        <IntlProvider locale="en"><IntlSuccessModal {...props} /></IntlProvider>))
        .toJSON();
      expect(tree).toMatchSnapshot();
    });

    await waitFor(() => {
      const tree = renderer.create((
        <IntlProvider locale="en"><IntlSuccessModal {...props} status="confirming" /></IntlProvider>))
        .toJSON();
      expect(tree).toMatchSnapshot();
    });

    await waitFor(() => {
      const tree = renderer.create((
        <IntlProvider locale="en"><IntlSuccessModal {...props} status="pending" /></IntlProvider>))
        .toJSON();
      expect(tree).toMatchSnapshot();
    });

    await waitFor(() => {
      const tree = renderer.create((
        <IntlProvider locale="en"><IntlSuccessModal {...props} status="failed" /></IntlProvider>))
        .toJSON();
      expect(tree).toMatchSnapshot();
    });
  });

  it('should match open success modal snapshot', async () => {
    await waitFor(() => {
      const tree = renderer
        .create((
          <IntlProvider locale="en">
            <IntlSuccessModal
              {...props}
              status="deleted"
            />
          </IntlProvider>
        ))
        .toJSON();
      expect(tree).toMatchSnapshot();
    });
  });
});

it will match the snapshots as they are currently saved on master.

It does feel a bit odd that we have a bunch of snapshots specifically looking for null - but I consider cleaning that up as out of scope for this PR. I looked through the history and found those changed in #654, so continuing to check for null snapshots in this PR is fine.

[huniafatima-99]

@brian-smith-tcril You are right, waiting for react and document to be ready before taking the snapshot did the magic. Thank you for the solution. Much appreciated.

[open-craft-grove]

Sandbox deployment failed 💥
Please check the settings and requirements.
Retry deployment by pushing a new commit or updating the requirements/settings in the pull request's description.
📜 Failure Logs
ℹ️ Grove Config, Tutor Config, Tutor Requirements

[open-craft-grove]

Sandbox deployment successful 🚀
🎓 LMS
📝 Studio
ℹ️ Grove Config, Tutor Config, Tutor Requirements

[brian-smith-tcril]

LGTM!

Note

The codecov difference is just because index.jsx is not covered by any tests in this repo. I consider it non-blocking.