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:
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.
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.0awaitforuserEventinteractions likeuserEvent.click@testing-library/reactand 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 of ~import { renderHook } from '@testing-library/react-hooks~renderHookis different - one major difference is the absence ofwaitForNextUpdatereturned fromrenderHook. This is a pattern we relied on often, now it can be replaced for thewaitForfrom 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.