TestRenderer toJSON should not expose the Array wrapper Suspense uses for hidden trees (#14392)

Author: bvaughn

packages/react-reconciler/src/__tests__/ReactSuspensePlaceholder-test.internal.js

@@ -267,7 +267,7 @@ function runPlaceholderTests(suiteLabel, loadReactNoop) {
 describe('when suspending during mount',()=>{
 it('properly accounts for base durations when a suspended times out in a sync tree',()=>{
 constroot=ReactTestRenderer.create(<AppshouldSuspend={true}/>);
-expect(root.toJSON()).toEqual(['Loading...']);
+expect(root.toJSON()).toEqual('Loading...');
 expect(onRender).toHaveBeenCalledTimes(1);
 
 // Initial mount only shows the "Loading..." Fallback.
@@ -343,7 +343,7 @@ function runPlaceholderTests(suiteLabel, loadReactNoop) {
 expect(onRender.mock.calls[0][3]).toBe(5);
 
 root.update(<AppshouldSuspend={true}textRenderDuration={5}/>);
-expect(root.toJSON()).toEqual(['Loading...']);
+expect(root.toJSON()).toEqual('Loading...');
 expect(onRender).toHaveBeenCalledTimes(2);
 
 // The suspense update should only show the "Loading..." Fallback.
@@ -355,7 +355,7 @@ function runPlaceholderTests(suiteLabel, loadReactNoop) {
 root.update(
 <AppshouldSuspend={true}text="New"textRenderDuration={6}/>,
 );
-expect(root.toJSON()).toEqual(['Loading...']);
+expect(root.toJSON()).toEqual('Loading...');
 expect(onRender).toHaveBeenCalledTimes(3);
 
 // If we force another update while still timed out,

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

@@ -461,7 +461,15 @@ const ReactTestRendererFiber = {
 if(container.children.length===1){
 returntoJSON(container.children[0]);
 }
-
+if(
+container.children.length===2&&
+container.children[0].isHidden===true&&
+container.children[1].isHidden===false
+){
+// Omit timed out children from output entirely, including the fact that we
+// temporarily wrap fallback and timed out children in an array.
+returntoJSON(container.children[1]);
+}
 letrenderedChildren=null;
 if(container.children&&container.children.length){
 for(leti=0;i<container.children.length;i++){

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

@@ -13,6 +13,8 @@ const ReactDOM = require('react-dom');
 
 // Isolate test renderer.
 jest.resetModules();
+constReact=require('react');
+constReactCache=require('react-cache');
 constReactTestRenderer=require('react-test-renderer');
 
 describe('ReactTestRenderer',()=>{
@@ -26,4 +28,76 @@ describe('ReactTestRenderer', () => {
 withoutStack: true,
 });
 });
+
+describe('timed out Suspense hidden subtrees should not be observable via toJSON',()=>{
+letAsyncText;
+letPendingResources;
+letTextResource;
+
+beforeEach(()=>{
+PendingResources={};
+TextResource=ReactCache.unstable_createResource(
+text=>
+newPromise(resolve=>{
+PendingResources[text]=resolve;
+}),
+text=>text,
+);
+
+AsyncText=({text})=>{
+constvalue=TextResource.read(text);
+returnvalue;
+};
+});
+
+it('for root Suspense components',asyncdone=>{
+constApp=({text})=>{
+return(
+<React.Suspensefallback="fallback">
+<AsyncTexttext={text}/>
+</React.Suspense>
+);
+};
+
+constroot=ReactTestRenderer.create(<Apptext="initial"/>);
+PendingResources.initial('initial');
+awaitPromise.resolve();
+expect(root.toJSON()).toEqual('initial');
+
+root.update(<Apptext="dynamic"/>);
+expect(root.toJSON()).toEqual('fallback');
+
+PendingResources.dynamic('dynamic');
+awaitPromise.resolve();
+expect(root.toJSON()).toEqual('dynamic');
+
+done();
+});
+
+it('for nested Suspense components',asyncdone=>{
+constApp=({text})=>{
+return(
+<div>
+<React.Suspensefallback="fallback">
+<AsyncTexttext={text}/>
+</React.Suspense>
+</div>
+);
+};
+
+constroot=ReactTestRenderer.create(<Apptext="initial"/>);
+PendingResources.initial('initial');
+awaitPromise.resolve();
+expect(root.toJSON().children).toEqual(['initial']);
+
+root.update(<Apptext="dynamic"/>);
+expect(root.toJSON().children).toEqual(['fallback']);
+
+PendingResources.dynamic('dynamic');
+awaitPromise.resolve();
+expect(root.toJSON().children).toEqual(['dynamic']);
+
+done();
+});
+});
 });