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.
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:
@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.0await
foruserEvent
interactions likeuserEvent.click
@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).import { renderHook } from '@testing-library/react'
instead ofimport { renderHook } from '@testing-library/react-hooksrenderHook
is different - one major difference is the absence ofwaitForNextUpdate
returned fromrenderHook
. This is a pattern we relied on often, now it can be replaced for thewaitFor
from testing-library, and adding an expectation to wait for, for example.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.