[BD-46] feat: updates to React 18

[PKulkoRaccoonGang]

Description

Include a description of your changes here, along with a link to any relevant Jira tickets and/or Github issues.

Deploy Preview

Include a direct link to your changes in this PR's deploy preview here (e.g., a specific component page).

Merge Checklist

• If your update includes visual changes, have they been reviewed by a designer? Send them a link to the Netlify deploy preview, if applicable.
• Does your change adhere to the documented style conventions?
• Do any prop types have missing descriptions in the Props API tables in the documentation site (check deploy preview)?
• Were your changes tested using all available themes (see theme switcher in the header of the deploy preview, under the "Settings" icon)?
• Were your changes tested in the example app?
• Is there adequate test coverage for your changes?
• Consider whether this change needs to reviewed/QA'ed for accessibility (a11y). If so, please add wittjeff and adamstankiewicz as reviewers on this PR.

Post-merge Checklist

• Verify your changes were released to NPM at the expected version.
• If you'd like, share your contribution in #show-and-tell.
• 🎉 🙌 Celebrate! Thanks for your contribution.

[openedx-webhooks]

Thanks for the pull request, @PKulkoRaccoonGang!

This is currently a draft pull request. When it is ready for our review and all tests are green, click "Ready for Review", or remove "WIP" from the title, as appropriate.

[netlify]

✅ Deploy Preview for paragon-openedx ready!

Built without sensitive environment variables

Name	Link
🔨 Latest commit	25c9c4a
🔍 Latest deploy log	https://app.netlify.com/sites/paragon-openedx/deploys/655621a26a3084000896eaaa
😎 Deploy Preview	https://deploy-preview-2774--paragon-openedx.netlify.app
📱 Preview on mobile	Toggle QR Code... Use your smartphone camera to open QR code link.

---

To edit notification comments on pull requests, go to your Netlify site configuration.

[brian-smith-tcril]

I was able to get to a point where npm install is working with react 18 here https://github.com/openedx/paragon/compare/master...brian-smith-tcril:react18?expand=1, but I was unable to start the docsite. This is because I needed to upgrade gatsby-plugin-mdx, which will require https://www.gatsbyjs.com/plugins/gatsby-plugin-mdx/#migrating-from-v3-to-v4

I think doing that migration is a good next step.

Sidenote: it's not clear to me what switching tests to be async has to do with upgrading to react 18. Could you elaborate as to why that's included in this PR?

[PKulkoRaccoonGang]

@brian-smith-tcril after updating the version of React and testing packages, I noticed that there were problems with the successful execution of tests and a large number of errors in the console. Switching tests to asynchrony and wrapping the necessary elements in act/waitFor helps eliminate errors when running tests. It seems to me that a significant increase in the version of @testing-library/react from 12.1.4 to 14.0.0 slightly changed the behavior of the tests. For example, where previously we received warnings or errors (which did not affect the successful execution of the test), now we receive an error and the test is not considered successful.

[brian-smith-tcril]

Switching tests to asynchrony and wrapping the necessary elements in act/waitFor helps eliminate errors when running tests.

I figure if we're moving all the tests to async to support RTL 14 we should figure out what patterns we life. I looked into what it would take to get the tests in FormAutosuggest.test.jsx working with RTL 14 to get a feel for what our options are.

Using the patterns outlined in https://testing-library.com/docs/dom-testing-library/api-async/#findby-queries and https://testing-library.com/docs/user-event/intro#writing-tests-with-userevent I came up with 119eeb0

In most places it was just a matter of changing userEvent. to await user., which I'm quite happy with. I'm unsure what's going on with the "check focus on input after esc" test. I tried using expect(input).toHaveFocus() too and it wasn't working.

where previously we received warnings or errors (which did not affect the successful execution of the test), now we receive an error and the test is not considered successful

could you provide some examples of these?

[PKulkoRaccoonGang]

I figure if we're moving all the tests to async to support RTL 14 we should figure out what patterns we life. I looked into what it would take to get the tests in FormAutosuggest.test.jsx working with RTL 14 to get a feel for what our options are.
Using the patterns outlined in https://testing-library.com/docs/dom-testing-library/api-async/#findby-queries and https://testing-library.com/docs/user-event/intro#writing-tests-with-userevent I came up with 119eeb0

@brian-smith-tcril Thank you! This is an excellent solution that can be actively used in our tests! 💯

where previously we received warnings or errors (which did not affect the successful execution of the test), now we receive an error and the test is not considered successful

Immediately after successfully updating the dependencies, I encountered errors related to incorrect expectations in the tests. For example, this test in the Breadcrumb component will display an error after running:

Error: expect(jest.fn()).toHaveBeenCalled()
Expected number of calls: >= 1
Received number of calls: 0

I tried the option you suggested from the official documentation and it works great

[brian-smith-tcril]

I'm so glad you got this working! Couple tiny suggestions to ensure we're following the recommended patterns from the docs

Note that, while directly invoking APIs such as userEvent.click() (which will trigger setup internally) is still supported in v14, this option exists to ease the migration from v13 to v14, and for simple tests. We recommend using the methods on the instances returned by userEvent.setup().

[brian-smith-tcril]

Suggested change

	setup(<Breadcrumb {...baseProps} clickHandler={clickHandler} />);
	const { user } = setup(<Breadcrumb {...baseProps} clickHandler={clickHandler} />);

[brian-smith-tcril]

Suggested change

	await userEvent.click(links[0]);
	await user.click(links[0]);