Allow multiple root children in test renderer traversal API #13017

gaearon · 2018-06-11T15:14:44Z

This should fix some bugs @sahrens was seeing.

Test renderer traversal API currently treats "fragmenty" nodes (fragments, providers, modes) as passthrough. That usually works, but it breaks down at the top level. The .root node has to point to a Fiber, so if it's a "passthrough" Fiber, we currently invariant.

Ideally I think the root node should have always been a special kind of "root" whose type and props don't match the nearest "materialized" node. But that ship has sailed, and changing this would be breaking.

So for now I want to enable those use cases by only "materializing" a special root node (with type: null, props: null) when it has multiple children.

It should be mostly additive because that kind of code used to throw. It does change the behavior for a top-level non-keyed fragment with many children (we used to ignore all children but the first) but this actually sounds like a bugfix to me, especially given that subsequent children were not ignored in the toJSON() API.

In the future, we probably should change .root to always be a special node, regardless of whether it has one or more children.

pull-bot · 2018-06-11T15:24:12Z

Details of bundled changes.

Comparing: d480782...c99ae2e

react-test-renderer

File	Filesize Diff	Gzip Diff	Prev Size	Current Size	Prev Gzip	Current Gzip	ENV
react-test-renderer.development.js	+0.2%	+0.3%	340.42 KB	341.19 KB	73.62 KB	73.85 KB	UMD_DEV
react-test-renderer.production.min.js	🔺+0.3%	🔺+0.1%	45.78 KB	45.92 KB	14.2 KB	14.22 KB	UMD_PROD
react-test-renderer.development.js	+0.2%	+0.3%	331.26 KB	332.02 KB	70.89 KB	71.12 KB	NODE_DEV
react-test-renderer.production.min.js	🔺+0.3%	🔺+0.2%	44.88 KB	45.03 KB	13.74 KB	13.76 KB	NODE_PROD
ReactTestRenderer-dev.js	+0.2%	+0.3%	337.15 KB	337.87 KB	70.48 KB	70.71 KB	FB_WWW_DEV

Generated by 🚫 dangerJS

flarnie · 2018-06-11T17:54:36Z

What's the issue describing the problem this fixes?

gaearon · 2018-06-11T17:56:42Z

There's no particular issue report but you can try only cherry-picking the new test and apply it on master. You'll see both invariants (in some cases) and mismatches (in other cases).

flarnie

:D This looks like it may fix that bug I was investigating.

flarnie · 2018-06-11T18:06:55Z

packages/react-test-renderer/src/ReactTestRenderer.js

 ]);

+function getChildren(parent: Fiber) {


Nit - we could explicitly flow type the return value; Array<ReactTestInstance | string>.

Also I see that this was copy-pasted from the getChildren method below. Wish there was a docblock, it's not very clear to me why this works the way it does. But that could be for the future.

We don't always Flow-type internal functions because those change more often. I figured that since we still have an outer annotation on the public API, we can leave this one inferred. If it returns something bad the annotation on the calling method should catch it.

flarnie · 2018-06-11T18:19:13Z

packages/react-test-renderer/src/ReactTestRenderer.js

+  if (node.child === null) {
+    return children;
+  }
+  node.child.return = node;


Granted this is copy-pasted - but wondering if you know, why do we mutate the fiber instance to set it's return here?

So, this is a pattern we use everywhere we traverse fibers deeply. It's necessary because each fiber has two copies. The return pointer points to the parent but we don't know which copy (current of work in progress). If we just naïvely follow "return" to go up, we might end up in a different tree copy from the previous update.

This is why every time we descend down, no matter when, we always overwrite the .return pointer to the parent in the tree we're working on. This should have no observable side effect because we do this on every deep traversal, and we never trust the chain of return pointers to give us the "current" tree.

flarnie · 2018-06-11T18:20:38Z

packages/react-test-renderer/src/ReactTestRenderer.js

+    }
+    while (node.sibling === null) {
+      if (node.return === startingNode) {
+        break outer;


flarnie · 2018-06-11T18:24:00Z

packages/react-test-renderer/src/ReactTestRenderer.js

+    }
+    (node.sibling: any).return = node.return;
+    node = (node.sibling: any);
+  }


I'm sure it will become clear as I continue reading, but I was surprised that this method mutates the nodes and goes down to potentially get deeply nested children.

This is just copy pasted from below. I didn't write it.

It works this way to skip over fragments / context consumers / other wrappers in the tree, and only "see" custom components and host nodes in traversal APIs.

sophiebits · 2018-06-11T18:46:26Z

My idea was that .root would give you a node that can be unmounted if it's swapped out, whereas the test renderer itself remains the same object no matter what updates you do. I guess this is consistent with that.

gaearon · 2018-06-11T18:50:07Z

Yeah I think this is still true.

The case where you first render fragment with one child and then render it with multiple children might be a bit confusing because .root would point to different nodes between re-renders even though the state is preserved. Do you think this is too strange?

sophiebits · 2018-06-11T18:50:34Z

#7516 was where that was discussed I guess. But I think we got rid of that restriction.

gaearon · 2018-06-11T18:52:17Z

renderer.update(<Fragment><div /></Fragment>).root // div
renderer.update(<Fragment><div /><div /></Fragment>).root // rooty mcrootface -- is that weird?

sophiebits · 2018-06-11T18:56:40Z

I think it's OK.

sahrens · 2018-06-12T20:43:59Z

Great, thanks for the fix!

193: Update dependency react to v16.4.1 r=magopian a=renovate[bot] This Pull Request updates dependency [react](https://github.com/facebook/react) from `v16.4.0` to `v16.4.1` <details> <summary>Release Notes</summary> ### [`v16.4.1`](https://github.com/facebook/react/blob/master/CHANGELOG.md#1641-June-13-2018) [Compare Source](facebook/react@v16.4.0...v16.4.1) ##### React * You can now assign `propTypes` to components returned by `React.ForwardRef`. ([@bvaughn] in [#12911](`https://github.com/facebook/react/pull/12911`)) ##### React DOM * Fix a crash when the input `type` changes from some other types to `text`. ([@spirosikmd] in [#12135](`https://github.com/facebook/react/pull/12135`)) * Fix a crash in IE11 when restoring focus to an SVG element. ([@ThaddeusJiang] in [#12996](`https://github.com/facebook/react/pull/12996`)) * Fix a range input not updating in some cases. ([@Illu] in [#12939](`https://github.com/facebook/react/pull/12939`)) * Fix input validation triggering unnecessarily in Firefox. ([@nhunzaker] in [#12925](`https://github.com/facebook/react/pull/12925`)) * Fix an incorrect `event.target` value for the `onChange` event in IE9. ([@nhunzaker] in [#12976](`https://github.com/facebook/react/pull/12976`)) * Fix a false positive error when returning an empty `<React.Fragment />` from a component. ([@philipp-spiess] in [#12966](`https://github.com/facebook/react/pull/12966`)) ##### React DOM Server * Fix an incorrect value being provided by new context API. ([@ericsoderberghp] in [#12985](`https://github.com/facebook/react/pull/12985`), [@gaearon] in [#13019](`https://github.com/facebook/react/pull/13019`)) ##### React Test Renderer * Allow multiple root children in test renderer traversal API. ([@gaearon] in [#13017](`https://github.com/facebook/react/pull/13017`)) * Fix `getDerivedStateFromProps()` in the shallow renderer to not discard the pending state. ([@fatfisz] in [#13030](`https://github.com/facebook/react/pull/13030`)) --- </details> --- This PR has been generated by [Renovate Bot](https://renovatebot.com). Co-authored-by: Renovate Bot <[email protected]>

25: Update react monorepo to v16.4.1 r=renovate[bot] a=renovate[bot] This Pull Request renovates the package group "react monorepo". - [react-dom](https://github.com/facebook/react) (`dependencies`): from `16.4.0` to `16.4.1` - [react](https://github.com/facebook/react) (`dependencies`): from `16.4.0` to `16.4.1` # Release Notes <details> <summary>facebook/react</summary> ### [`v16.4.1`](https://github.com/facebook/react/blob/master/CHANGELOG.md#1641-June-13-2018) [Compare Source](facebook/react@v16.4.0...v16.4.1) ##### React * You can now assign `propTypes` to components returned by `React.ForwardRef`. ([@bvaughn] in [#12911](`https://github.com/facebook/react/pull/12911`)) ##### React DOM * Fix a crash when the input `type` changes from some other types to `text`. ([@spirosikmd] in [#12135](`https://github.com/facebook/react/pull/12135`)) * Fix a crash in IE11 when restoring focus to an SVG element. ([@ThaddeusJiang] in [#12996](`https://github.com/facebook/react/pull/12996`)) * Fix a range input not updating in some cases. ([@Illu] in [#12939](`https://github.com/facebook/react/pull/12939`)) * Fix input validation triggering unnecessarily in Firefox. ([@nhunzaker] in [#12925](`https://github.com/facebook/react/pull/12925`)) * Fix an incorrect `event.target` value for the `onChange` event in IE9. ([@nhunzaker] in [#12976](`https://github.com/facebook/react/pull/12976`)) * Fix a false positive error when returning an empty `<React.Fragment />` from a component. ([@philipp-spiess] in [#12966](`https://github.com/facebook/react/pull/12966`)) ##### React DOM Server * Fix an incorrect value being provided by new context API. ([@ericsoderberghp] in [#12985](`https://github.com/facebook/react/pull/12985`), [@gaearon] in [#13019](`https://github.com/facebook/react/pull/13019`)) ##### React Test Renderer * Allow multiple root children in test renderer traversal API. ([@gaearon] in [#13017](`https://github.com/facebook/react/pull/13017`)) * Fix `getDerivedStateFromProps()` in the shallow renderer to not discard the pending state. ([@fatfisz] in [#13030](`https://github.com/facebook/react/pull/13030`)) --- </details> --- This PR has been generated by [Renovate Bot](https://renovatebot.com). Co-authored-by: Renovate Bot <[email protected]>

Allow multiple root children in test renderer traversal API

c99ae2e

gaearon requested review from sophiebits and bvaughn June 11, 2018 15:14

facebook-github-bot added the CLA Signed label Jun 11, 2018

flarnie approved these changes Jun 11, 2018

View reviewed changes

gaearon merged commit 30bc8ef into facebook:master Jun 11, 2018

gaearon deleted the root-stuff branch June 11, 2018 19:07

dependencies bot mentioned this pull request Oct 1, 2018

Update react-dom in /modules/frontend from 16.3.0 to 16.5.2 project-accelerate/accelerate#277

Open

This was referenced Nov 1, 2018

Update react-dom in / from 16.2.0 to 16.6.0 leonardofaria/leozera-ui#253

Closed

Update react in / from 16.2.0 to 16.6.0 leonardofaria/leozera-ui#254

Closed

This was referenced Dec 1, 2018

Update react-test-renderer in /modules/frontend from 16.3.0 to 16.6.3 project-accelerate/accelerate#312

Open

Update react in /modules/frontend from 16.3.0 to 16.6.3 project-accelerate/accelerate#313

Open

NMinhNguyen referenced this pull request in enzymejs/react-shallow-renderer Jan 29, 2020

Allow multiple root children in test renderer traversal API (#13017)

14a6c6c

This was referenced Mar 15, 2021

chore(deps): bump react-dom from 16.4.0 to 16.4.2 in /intro-react-v5 samuelsilvadev/front-end-master-courses#9

Merged

Bump react-dom from 16.4.0 to 16.4.2 in /client cdhenry/pivot#1

Open

This was referenced Sep 5, 2024

[Snyk] Fix for 104 vulnerabilities Omrisnyk/lock-walker#65

Open

[Snyk] Fix for 104 vulnerabilities Omrisnyk/lock-walker#66

Open

Provide feedback

Saved searches

Use saved searches to filter your results more quickly

Allow multiple root children in test renderer traversal API #13017

Allow multiple root children in test renderer traversal API #13017

gaearon commented Jun 11, 2018 •

edited

Loading

pull-bot commented Jun 11, 2018

react-test-renderer

flarnie commented Jun 11, 2018

gaearon commented Jun 11, 2018

flarnie left a comment

flarnie Jun 11, 2018

gaearon Jun 11, 2018

flarnie Jun 11, 2018

gaearon Jun 11, 2018

flarnie Jun 11, 2018

flarnie Jun 11, 2018

gaearon Jun 11, 2018

sophiebits commented Jun 11, 2018

gaearon commented Jun 11, 2018 •

edited

Loading

sophiebits commented Jun 11, 2018

gaearon commented Jun 11, 2018 •

edited

Loading

sophiebits commented Jun 11, 2018

sahrens commented Jun 12, 2018

Allow multiple root children in test renderer traversal API #13017

Allow multiple root children in test renderer traversal API #13017

Conversation

gaearon commented Jun 11, 2018 • edited Loading

pull-bot commented Jun 11, 2018

react-test-renderer

flarnie commented Jun 11, 2018

gaearon commented Jun 11, 2018

flarnie left a comment

Choose a reason for hiding this comment

flarnie Jun 11, 2018

Choose a reason for hiding this comment

gaearon Jun 11, 2018

Choose a reason for hiding this comment

flarnie Jun 11, 2018

Choose a reason for hiding this comment

gaearon Jun 11, 2018

Choose a reason for hiding this comment

flarnie Jun 11, 2018

Choose a reason for hiding this comment

flarnie Jun 11, 2018

Choose a reason for hiding this comment

gaearon Jun 11, 2018

Choose a reason for hiding this comment

sophiebits commented Jun 11, 2018

gaearon commented Jun 11, 2018 • edited Loading

sophiebits commented Jun 11, 2018

gaearon commented Jun 11, 2018 • edited Loading

sophiebits commented Jun 11, 2018

sahrens commented Jun 12, 2018

gaearon commented Jun 11, 2018 •

edited

Loading

gaearon commented Jun 11, 2018 •

edited

Loading

gaearon commented Jun 11, 2018 •

edited

Loading