This repository has been archived by the owner on Sep 25, 2024. It is now read-only.
React 18 Support #2241
Merged
React 18 Support #2241
Conversation
This file contains bidirectional Unicode text that may be interpreted or compiled differently than what appears below. To review, open the file in an editor that reveals hidden Unicode characters.
Learn more about bidirectional Unicode characters
ryanwilsonperkin
force-pushed
the
react-18
branch
2 times, most recently
from
c6fba21
to
7af2f19
Compare
4 tasks
ryanwilsonperkin
force-pushed
the
react-18
branch
4 times, most recently
from
70e8d27
to
187f52c
Compare
Need to account for the changes to the children-are-no-longer-implicit-in-components typing that's in more recent versions
New version required to appropriately perform reflection on v18
Needs to match the major version that we're using in our main app or else the versions of React will clash and the a11y test runner doesn't work correctly.
ryanwilsonperkin
force-pushed
the
react-18
branch
from
187f52c
to
cdbb3aa
Compare
Loom typically looks for setupFiles under tests/setup/environment.* but we have ours under the additional sub-directory of src/ because of the way that react-testing lays out its own tests.
The previous ReactDOM.render method is deprecated and instead tests should be making use of createRoot to generate a "Root" element and then calling render/unmount on that. This causes some confusion here because we already have a concept of a "Root" in react-testing, and so we use the name "reactRoot" to differentiate here.
Ensure that we're awaiting the promise within the scope of the act block and use the flushSync API to mimic the behaviour of React 17 to synchronously flush state to the render rather than trying to batch it. Without the use of flushSync, we were seeing issues in shopify/web tests where a previously tested component that left a promise in the act queue could cause subsequent mounts in other tests to fail.
In React < 18 returning a value that isn't a promise to act will result in a console warning, we need to match the previous behaviour of react-testing for applications that are still using React 17 to avoid introducing a warning.
Both versions are already functionally installed because react-server is still using React 17. This installs them both under namespaced packages as react17 and react18. We'll use these values to allow testing under particular react versions using the REACT_VERSION env var.
React 17 doesn't have a react-dom/client directory, nor does it have a createRoot or Root API. We provide backwards compatibility for this in the compat module so that our root.tsx code can still use "createRoot" just in React < 18 it'll be our own version of createRoot which wraps ReactDOM.render and ReactDOM.unmountComponentAtNode
Makes it clearer what that 14/16/17/18 numbers correspond to
React 18 - @shopify/react-testing
|
CI blocks because it's got branch requirements on test names that are being change as part of this PR, will force the merge and then update the CI requirements in branch settings |
Sign up for free
to subscribe to this conversation on GitHub.
Already have an account?
Sign in.
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.
Description
Base branch for React 18 support. Aiming to add support for React 18 to any libraries that
webuses while maintaining backwards compatibility for React 17 since these libraries are still being used by other applications.Child branches will tackle individual packages/features like
@shopify/react-testing,@shopify/react-router, etcSee previous effort: #2112
Fixes (issue #)
Type of change
Checklist