Skip to content
New issue

Have a question about this project? Sign up for a free GitHub account to open an issue and contact its maintainers and the community.

By clicking “Sign up for GitHub”, you agree to our terms of service and privacy statement. We’ll occasionally send you account related emails.

Already on GitHub? Sign in to your account

feat!: React 18 Upgrade #2714

Merged
merged 5 commits into from
Feb 2, 2024
Merged

feat!: React 18 Upgrade #2714

merged 5 commits into from
Feb 2, 2024

Conversation

jpandersen87
Copy link
Contributor

Summary

Updates the project's react/react-dom dependency to 18.2.0 with updates to relevant react-related dependencies. Fixes tests and typescript typing issues.

Of note:

  • focus-trap-react is updated to 9.0.2. beyond this version IE compatibility is dropped
  • a new mock file was added to make needed option changes to a library focus-trap-react uses that is incompatible with the testing environment
  • fixes to modal tests were made where the first expect statement after an asynchronous action (such as open, close, or unmount) are waited on (errors after React 18 upgrade assumed to be related to strict-mode/concurrency)
  • @types/react is forced to resolve to 18.2.48 for all dependencies to prevent type errors due to version variance

Related Issues or PRs

Fixes #2222

How To Test

  • Successfully build and reference in another project
  • Run local storybook

Screenshots (optional)

- react/react-dom and other react-related depdencies updated
- @testing-library/react-hooks removed as it is now merged into @testing-library/react
- focus-trap-react updated to 9.0.2 (upgrading beyond this version will break IE11 compatibility)
- tabbable.js mock file added to fix JSDom testing compatibility issues with Modal (with a comment added to Modal test file)
- DatePicker tests updated to wait on the next expect after async actions such as open/close/unmount
- Various type fixes including...
- SocialLink logic tweaked to fix type issues
- Prop typing on InPageNavigation updated to omit the content property from the joined JSX.IntrinsicElements['div'] type as it is being overidden (not combined) to prevent type issues
@jpandersen87 jpandersen87 requested a review from a team as a code owner January 18, 2024 20:10
@jpandersen87 jpandersen87 changed the title React 18 Upgrade feat!: React 18 Upgrade Jan 18, 2024
Copy link
Contributor

@brandonlenz brandonlenz left a comment

Choose a reason for hiding this comment

The reason will be displayed to describe this comment to others. Learn more.

I think this looks great! One question and one nit before I approve

edit: Oh and a conflict on package.json that will get in the way of merging

__mocks__/tabbable.js Outdated Show resolved Hide resolved
src/components/Modal/Modal.test.tsx Show resolved Hide resolved
src/components/Modal/utils.test.ts Show resolved Hide resolved
src/components/forms/DatePicker/utils.tsx Outdated Show resolved Hide resolved
@brandonlenz brandonlenz merged commit af2d2d6 into trussworks:main Feb 2, 2024
7 checks passed
@jpandersen87 jpandersen87 deleted the react-18 branch February 2, 2024 19:36
Sign up for free to join this conversation on GitHub. Already have an account? Sign in to comment
Labels
None yet
Projects
None yet
Development

Successfully merging this pull request may close these issues.

[feat] Upgrade to React 18(+)
2 participants