Spike React 18 prerelease

[snowystinger]

🙋 Feature Request

We should start by adding a command to run tests against React 18 like we do for 17. Once we do that and know what broke if anything, add that information here. Also go through the breaking changes from Reacts documentation.

🔦 Context

React 18 has a prerelease now, we need to be prepared for when it releases

[snowystinger]

We'll have trouble running the tests until testing-library/react-testing-library#509, but we found testing-library/react-testing-library#937 which will allow us to get started, however, we're still gated by act at the moment reactwg/react-18#23

Started an update to React Hooks Testing Library testing-library/react-hooks-testing-library#655, we also just need to upgrade this in general, it's had several major version releases

Storybook: storybookjs/storybook#10543 is currently closed with a hack workaround, I'm asking if it should be reopened now https://discord.com/channels/486522875931656193/490822261004042240/867482250367205396

ToDo - try:
SSR Tests
Docs
Chromatic
Support 16/17 & 18 simultaneously, we'll need to choose the right render function at run time based on if createRoot is defined

[snowystinger]

Storybook

storybookjs/storybook#10543 is reopened and will track official support

Tests

Integration

We'll have trouble running the tests until testing-library/react-testing-library#509, but we found testing-library/react-testing-library#937 which will allow us to get started, however, we're still gated by act at the moment reactwg/react-18#23
I was able to make changes to our tests to get almost all of them passing in React 18, I was mostly able to support them running in both, I skipped Calendar related tests and useAsyncList tests I could only get passing in one or the other.
The most common issue is that act now flushes the render and we have many things that run on timers after state has changed. This includes RAF's. With 'modern' fake timers, RAF's are finally handled. Most of our test failures are because we do too many things inside of one act, we just needed to split them apart.

Hooks

Started an update to React Hooks Testing Library testing-library/react-hooks-testing-library#655, we also just need to upgrade this in general, it's had several major version releases. It has a similar issue with act that needs to be resolved

SSR

tried to do this, it's not currently working, don't know why, and trying to upgrade to a newer alpha broke everything, so we'll need to try again later

Chromatic

Worked great, no changes from baseline https://www.chromatic.com/build?appId=5f0dd5ad2b5fc10022a2e320&number=111

Other things to try:

Docs - We can continue to use React 17 for docs, we don't need to move this to 18 yet

Follow up work in the meantime

• Upgrade react-testing-library
• Upgrade our dependency on react-hooks-testing-library (I've patched it in the PR)
• Upgrade our tests to use 'modern' timers
• Upgrade jest
• Daniel and Devon should verify ComboBox and DragNDrop tests respectively in this PR

The plan for officially supporting 18

• Tests for React 16/17 will only run against Legacy Mode
• Tests for React 18, we may want to support running against both, but it's probably enough to have them run again only concurrent mode
• Fix useAsyncList tests to work in both the 16/17 && 18 tests, right now i can only get it in one or the other
• Check back in when the alpha has matured a bit more

Open questions

• Determine if we want to support a legacyRoot option for components that currently call ReactDOM.render/createRoot
• How do we fix useId so it doesn't give us warning in DatePickers and others tests
• How to get the React 18 types into TS, there's a line in our TS config commented out in this PR, but it didn't seem to work

[snowystinger]

Closing as we've accomplished what we wanted out of this Issue.