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

refactor: upgrade to React 18 #396

Closed
wants to merge 1 commit into from
Closed

refactor: upgrade to React 18 #396

wants to merge 1 commit into from

Conversation

kabaros
Copy link
Contributor

@kabaros kabaros commented Sep 12, 2024

The upgrade of our apps and app-platform to React 18 is generally a smooth process for the consuming apps. Most of the changes don't affect our apps directly.

On the other hand, the effect of that upgrade on tests seems quite significant depending on how tests are written. So this PR is mostly about upgrading the tests to adapt for React 18. Testing-library supports React 18 since v13, so the first step is to upgrade that library and the supporting libraries around it. These major versions bumps come with few breaking changes that we're trying to document here:

  • userEvent is async now in @testing-library/user-event. Check the release notes for an idea of the improvements and new aPI https://github.com/testing-library/user-event/releases/tag/v14.0.0
    • in practice, this means mostly that you'd need to add an await for userEvent interactions like userEvent.click
  • renderHook is not a separate library anymore, it is part of the @testing-library/react and it has quite a different API. The changes here were the harder to figure out (mainly because most docs online still points to the old version).
    • do import { renderHook } from '@testing-library/react' instead of import { renderHook } from '@testing-library/react-hooks
    • the return type for renderHook is different - one major difference is the absence of waitForNextUpdate returned from renderHook. This is a pattern we relied on often, now it can be replaced for the waitFor from testing-library, and adding an expectation to wait for, for example.
    • testing hooks that throw errors is different - check PR (use expect(renderHook(() => { ...})).toThrow(....))
  • ? Faking timers can help with tests that seem to fail with concurrency issues (look at test again)
  • Enzyme is dead: https://dev.to/wojtekmaj/enzyme-is-dead-now-what-ekl - there is still no adapter for React 18 (or 17), we need to migrate tests that rely on Enzyme to RTL if that's possible. Otherwise, there is an unofficial React 18 adapter.

Most of these changes are pretty small. The hard part was figuring them out in the first place, but once that's done then it's small manual changes. We'll look through other sample repos and document more patterns and fixes.

For React 18 updates for the app itself, we only needed to change defaultProps to JavaScript native default params to avoid getting a warning in the console.

@kabaros kabaros changed the title refactor(react-18-upgrade): update react-testing-library and co refactor(react-18-upgrade): update tests for react 18 Sep 12, 2024
@kabaros kabaros changed the title refactor(react-18-upgrade): update tests for react 18 refactor: upgrade to React 18 Sep 12, 2024
@kabaros kabaros closed this Oct 24, 2024
@kabaros kabaros deleted the react-upgrade branch October 24, 2024 12:42
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