[test] Replace createClientRender
with new createRenderer
API
#29471
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.
TL;DR:
First commit holds most of the work. Subsequent commits are copy&paste.
Our custom wrapper around
render
viacreateClientRender
has proofed invalueable in iterating on more involved testing approaches (StrictMode, test profiling, performance via Emotion cache busting etc). This was made possible by a testing approach that ultimately didn't care about the exact React tree but only the rendered component under test.However, for matching up server-side rendering for hydration we do need to know the exact shape of the React component tree. Hydration always had the requirement of having to match component trees exactly but we could loosen this up a bit. We can no longer looses this up in React 18 withuseId
(see reactwg/react-18#111 (comment) and its thread for more context).The "render same DOM on server and client" still holds. Turns out we just encountered a React bug: facebook/react#22681
But it's safer to render the exact same thing regardless. And the new API makes it impossible to accidentally cause hydration mismatches in a test (unless the component under test causes hydration mismatches).
Specifically, when testing hydration before we could use something like
This pattern is replaced by
The benefit of the new API is that we can continue to add arbitrary wrappers in
render
(orrenderTostring
) whilehydrate
returns the exact same shape asrender
.By hiding the usage of
renderToString
we're also free to swap implementations of the used server renderer (renderToString
should be replaced by the streaming renderer).Regarding naming:
createClientRender
was always supposed to becreateRender
. But when we introducecreateClientRender
we already hadcreateRender
based on Enyme'srender
. Since we removedcreateRender
based on Enzyme in the meantime, we're free to use the originally intended name "createRender(er)".Follow-up:
createServerRender
in favor ofcreateRenderer().renderToString