V rakeshsh/main react18 merge #7364
Merged
Conversation
This file contains bidirectional Unicode text that may be interpreted or compiled differently than what appears below. To review, open the file in an editor that reveals hidden Unicode characters.
Learn more about bidirectional Unicode characters
Bumps playwright from v1.44.0-focal to v1.44.1-focal. [](https://docs.github.com/en/github/managing-security-vulnerabilities/about-dependabot-security-updates#about-compatibility-scores) Dependabot will resolve any conflicts with this PR as long as you don't alter it yourself. You can also trigger a rebase manually by commenting `@dependabot rebase`. [//]: # (dependabot-automerge-start) [//]: # (dependabot-automerge-end) --- <details> <summary>Dependabot commands and options</summary> <br /> You can trigger Dependabot actions by commenting on this PR: - `@dependabot rebase` will rebase this PR - `@dependabot recreate` will recreate this PR, overwriting any edits that have been made to it - `@dependabot merge` will merge this PR after your CI passes on it - `@dependabot squash and merge` will squash and merge this PR after your CI passes on it - `@dependabot cancel merge` will cancel a previously requested merge and block automerging - `@dependabot reopen` will reopen this PR if it is closed - `@dependabot close` will close this PR and stop Dependabot recreating it. You can achieve the same result by closing it manually - `@dependabot show <dependency name> ignore conditions` will show all of the ignore conditions of the specified dependency - `@dependabot ignore this major version` will close this PR and stop Dependabot creating any more for this major version (unless you reopen the PR or upgrade to it yourself) - `@dependabot ignore this minor version` will close this PR and stop Dependabot creating any more for this minor version (unless you reopen the PR or upgrade to it yourself) - `@dependabot ignore this dependency` will close this PR and stop Dependabot creating any more for this dependency (unless you reopen the PR or upgrade to it yourself) </details> --------- Signed-off-by: dependabot[bot] <[email protected]> Co-authored-by: dependabot[bot] <49699333+dependabot[bot]@users.noreply.github.com> Co-authored-by: Anjali Singh <[email protected]>
#### 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(<App tab="home" />, 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(<App tab="home" />);
**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<P>,
- In new we have below
WrappedComponent: React.ComponentType<**React.PropsWithChildren<P>**>,
**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<P>>.
**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.
<!-- Are there any parts that you've intentionally left out-of-scope for
a later PR to handle? -->
<!-- Were there any alternative approaches you considered? What
tradeoffs did you consider? -->
#### Pull request checklist
<!-- If a checklist item is not applicable to this change, write "n/a"
in the checkbox -->
- [ ] Addresses an existing issue: #0000
- [x] Ran `yarn fastpass`
- [x] Added/updated relevant unit test(s) (and ran `yarn test`)
- [x] Verified code coverage for the changes made. Check coverage report
at: `<rootDir>/test-results/unit/coverage`
- [x] 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
- [x] (UI changes only) Verified usability with NVDA/JAWS
---------
Co-authored-by: Jeevani Chinthala <[email protected]>
Co-authored-by: JeevaniChinthala <[email protected]>
Co-authored-by: v-sharmachir <[email protected]>
Co-authored-by: Chirag Sharma <[email protected]>
Co-authored-by: Saanica Ghate <[email protected]>
Co-authored-by: Saanica Ghate <[email protected]>
v-viyada
approved these changes
Jun 20, 2024
Sign up for free
to join this conversation on GitHub.
Already have an account?
Sign in to comment
Add this suggestion to a batch that can be applied as a single commit.
This suggestion is invalid because no changes were made to the code.
Suggestions cannot be applied while the pull request is closed.
Suggestions cannot be applied while viewing a subset of changes.
Only one suggestion per line can be applied in a batch.
Add this suggestion to a batch that can be applied as a single commit.
Applying suggestions on deleted lines is not supported.
You must change the existing code in this line in order to create a valid suggestion.
Outdated suggestions cannot be applied.
This suggestion has been applied or marked resolved.
Suggestions cannot be applied from pending reviews.
Suggestions cannot be applied on multi-line comments.
Suggestions cannot be applied while the pull request is queued to merge.
Suggestion cannot be applied right now. Please check back later.
Details
Merge latest main into fluent ui v9 branch
Motivation
Context
Pull request checklist
yarn fastpassyarn test)<rootDir>/test-results/unit/coveragefix:,chore:,feat(feature-name):,refactor:). SeeCONTRIBUTING.md.