feat(react 18): upgrade to react 18.

[v-rakeshsh]

Details

This feature updates below packages.

1. react from v16 to v18.
2. react-dom from v16 to v18.
3. @types-react from v16 to v18.
4. @types-react-dom from v16 to v18.
5. @testing-library/react from v12 to v15.
6. @fluentui/react from v8.x.x to v8.118.1.
7. Removed react-helmet and added react-helmet-async.

1. Notable changes for react, react-dom:

Motivation: React 18 introduces a new root API which provides better ergonomics for managing roots. The new root API also enables the new concurrent renderer, which allows you to opt-into concurrent features.

In V16, we had below to render the component:
import { render } from 'react-dom';
const container = document.getElementById('app');
render(, container);

• In V18, we have below to render the component:
  import { createRoot } from 'react-dom/client';
  const container = document.getElementById('app');
  const root = createRoot(container); // createRoot(container!) if you use TypeScript
  root.render();

2. Notable changes for @types-react and @types-react-dom:

Motivation: The new types are safer and catch issues that used to be ignored by the type checker. The most notable change is that the children prop now needs to be listed explicitly when defining props

• In old we have below
  WrappedComponent: React.ComponentType

  ,

• In new we have below
  WrappedComponent: React.ComponentType<React.PropsWithChildren

  >,

Approach for type changes: So this Type changes are added using automation script https://github.com/eps1lon/types-react-codemod. This automation script is suggested in react18 migration document.

• Added new package types-react-codemod.
• After adding the package, executed yarn types-react-codemod preset-18 ./src in root, and then selected all option from the list of options.
• This will transform all types of component type having child components to <React.PropsWithChildren

  >.

3. Notable changes for @testing-library/react:

• Current version of @testing-library/react does not support react18, so from v13.x.x, react18 support is added. So updated to latest V15. For reference - https://github.com/testing-library/react-testing-library/releases/tag/v13.0.0
• Wrapped state updates/async operations under act.
• Updated test cases with createRoot for createRootMock instead of render and renderMock.

4. Notable changes for @fluentui/react from v8.x.x to v8.118.1

• Existing fluent ui version does not support react18, test cases were failing, hence after checking v8.118.1 documentation, it supports react and react-dom v18. Hence upadated.

5. Notable changes for react-helmet-async:

• Current react-helmet package throws error 'objects cannot be child, expected elements', for react18, Hence as alternative used react-helmet-async. For reference https://www.npmjs.com/package/react-helmet-async?activeTab=readme because react-helmet-async uses react18 as dependency.
• Wrapped Helmet provider for root, as to pass context of react-helmet-async.
• Created a variable to store data, and then this data was passed as JSX, instead of passing the data as it is. Because it will throw "Objects cannot be used as react elements".

For example:
export const GuidanceTitle = NamedFC<GuidanceTitleProps>('GuidanceTitle', ({ name }) => { const titleValue = Guidance for ${name} - ${productName}; return ( <> <Helmet> <title>{titleValue}</title> </Helmet> <h1>{name}</h1> </> ); });

6. Along with above

• Made changes to mock helpers, because after react18 changes, the JSON structure of component was coming differently, so accordingly corrected the helpers, to get proper component name for snapshots.
• Updated snapshots, because as we are using latest Fluent UI version, new props are introduced which can be seen in snapshots.
• Refactored few test cases, which were wrong logically, like for example:
  using of mockReactComponents in global and inside test case using of useOriginalComponents to get the props using getMockComponentClassPropsForCall which was wrong logically is fixed to use any one approach.
• Updated report package with react, react-dom v18 to keep in sync with AI web.

Context

This PR includes all changes required for migration of AI web from react16 to react18.
It includes test cases fixes.
It includes lint issues fixes.

Pull request checklist

• Addresses an existing issue: #0000
• Ran yarn fastpass
• Added/updated relevant unit test(s) (and ran yarn test)
• Verified code coverage for the changes made. Check coverage report at: <rootDir>/test-results/unit/coverage
• PR title AND final merge commit title both start with a semantic tag (fix:, chore:, feat(feature-name):, refactor:). See CONTRIBUTING.md.
• (UI changes only) Added screenshots/GIFs to description above
• (UI changes only) Verified usability with NVDA/JAWS

[madalynrose]

This PR is a huge effort! Well done, team! I have some questions about changes, mostly in tests.