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

Migrate to React 19 #4409

Draft
wants to merge 57 commits into
base: master
Choose a base branch
from

Conversation

aryaemami59
Copy link
Contributor

@aryaemami59 aryaemami59 commented May 14, 2024

This PR:

  • Updates react and react-dom to v19 beta.
  • Sets the @types/react and @types/react-dom package resolutions to npm:types-react and npm:types-react-dom according to the React 19 migration guide.
  • Runs tests against different versions of React during CI. Not sure if we want to keep this addition but for now it serves as a way for us to make sure the changes we make are non-breaking and can work with both React 18 and 19.
  • Updates @testing-library/react to latest version.
  • Updates @testing-library/user-event to latest version.
  • Adds latest version of @testing-library/dom.
  • Replaces the now removed ReactDOM.render calls with the render function from @testing-library/react as recommended in the React 19 migration guide.
  • Replaces the now removed ReactDOM.unmountComponentAtNode calls with the cleanup function from @testing-library/react as recommended in the React 19 migration guide.
  • Removes redundant act wrappers around fireEvent method calls since they are already wrapped in act calls.
  • Expands version ranges of react in peerDependencies to include version 19.
  • Updates React-related code snippets in docs.
  • Fixes some issues related to console spies.
  • Fixes some issues related to stubbing environments.
  • Fixes some issues related to act warnings emitted by @testing-library/react.
  • Fixes some issues related to sinon fake timers.

Copy link

codesandbox bot commented May 14, 2024

Review or Edit in CodeSandbox

Open the branch in Web EditorVS CodeInsiders

Open Preview

Copy link

codesandbox-ci bot commented May 14, 2024

This pull request is automatically built and testable in CodeSandbox.

To see build info of the built libraries, click here or the icon next to each commit SHA.

Latest deployment of this branch, based on commit 8fb2a7c:

Sandbox Source
@examples-query-react/basic Configuration
@examples-query-react/advanced Configuration
@examples-action-listener/counter Configuration
rtk-esm-cra Configuration

Copy link

netlify bot commented May 14, 2024

Deploy Preview for redux-starter-kit-docs ready!

Name Link
🔨 Latest commit 8fb2a7c
🔍 Latest deploy log https://app.netlify.com/sites/redux-starter-kit-docs/deploys/66e4bea48daa290008d2b24a
😎 Deploy Preview https://deploy-preview-4409--redux-starter-kit-docs.netlify.app
📱 Preview on mobile
Toggle QR Code...

QR Code

Use your smartphone camera to open QR code link.

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

- We set the `@types/react` and `@types/react-dom` package resolutions to `npm:types-react` and `npm:types-react-dom` according to the React 19 migration guide.
- According to latest documentation of `@testing-library/react`, `fireEvent` methods are already wrapped inside `act` calls making manual wrapping unnecessary.
- There currently seems to be an issue involving `sinon` fake timers used by `vitest`, `@testing-library/react` only supporting `jest` fake timers and  `@testing-library/user-event` using `setTimeout` internally to simulate user actions such as button presses. Currently `@testing-library/react` only works with `jest` fake timers, which means if there are any component updates while `sinon` fake timers are running in `vitest` , `@testing-library/react` will not catch it and things start to break.
- To workaround this issue, We have to setup the `user` by calling `userEvent.setup({ delay: null })`. The reason why We do this is because `@testing-library/user-event` uses `setTimeout` internally which cannot be awaited in a test while fake timers are running as it can cause the tests to indefinitely hang. So the current workaround is to disable the `delay` functionality of `userEvent` and prevent it from calling `setTimeout`. We also have to pass in `shouldAdvanceTime: true` to `vi.useFakeTimers()` as it can get around the issue of `@testing-library/react` not tracking `sinon` fake timers in `vitest`.
- Fixed test names in `fork.test.ts` which could cause the terminal to flicker in Windows.
- `.mockReset()` should not be called in spies since it calls `.mockClear()` and returns the implementation to its **initial** form. In this case it was silencing some of the `act` related warnings emitted by `@testing-library/react` which needed to be resolved since they were calling issues. So `.mockReset()` calls on spies need to be changed to `.mockRestore()` calls since `.mockRestore()` restores the implementation to its **original** form.
- This was done to make sure `toHaveBeenCalledWith` will fail if we pass in the wrong Error constructor. For example the assertion will now fail if we pass in an `Error` instead of a `TypeError`.
- This was done because it was causing the unit tests in example workspaces to fail.
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.

1 participant