Failing test case for deeply nested Suspense in Fallback

When a deep Suspense boundary is partially complete before a parent boundary resolves it can trigger a scenario that React thinks is a bug. This change implements a test case demonstrating this bug. It does not solve it

Author: gnoff

packages/react-dom/src/__tests__/ReactDOMFizzServer-test.js

@@ -10447,4 +10447,142 @@ describe('ReactDOMFizzServer', () => {
       </html>,
     );
   });
+
+  // @gate enablePostpone
+  it('aaaaaa', async () => {
+    jest.useRealTimers();
+    writable.on('data', console.log);
+
+    function Awaiter({promise, children}) {
+      const awaited = React.use(promise);
+      return children(awaited);
+    }
+
+    function createPromise() {
+      return new Promise(resolve => setTimeout(resolve));
+    }
+
+    const controller = new AbortController();
+
+    function App() {
+      setTimeout(() => {
+        controller.abort('done');
+      }, 0);
+      queueMicrotask(() => {
+        jest.runAllTimers();
+      });
+
+      const promise = createPromise();
+
+      return (
+        <div>
+          <Suspense
+            fallback={
+              <Suspense fallback="Loading...">
+                <Awaiter promise={promise}>
+                  {() => [
+                    <Suspense key={0} fallback="Loading more...">
+                      <Awaiter promise={createPromise()}>{() => null}</Awaiter>
+                    </Suspense>,
+                  ]}
+                </Awaiter>
+              </Suspense>
+            }>
+            <Awaiter promise={promise}>{() => <div>Success</div>}</Awaiter>
+          </Suspense>
+        </div>
+      );
+    }
+
+    const prerendered = await ReactDOMFizzStatic.prerenderToNodeStream(
+      <App />,
+      {signal: controller.signal},
+    );
+    console.log({prerendered});
+    expect(prerendered.postponed).not.toBe(null);
+
+    const resumed = await ReactDOMFizzServer.resumeToPipeableStream(
+      <App />,
+      JSON.parse(JSON.stringify(prerendered.postponed)),
+    );
+
+    console.log({resumed});
+
+    // Create a separate stream so it doesn't close the writable. I.e. simple concat.
+    const preludeWritable = new Stream.PassThrough();
+    preludeWritable.setEncoding('utf8');
+    preludeWritable.on('data', chunk => {
+      writable.write(chunk);
+    });
+
+    await act(() => {
+      prerendered.prelude.pipe(preludeWritable);
+    });
+
+    expect(getVisibleChildren(container)).toEqual(<div>Loading...</div>);
+
+    await act(() => {
+      resumed.pipe(writable);
+    });
+
+    expect(getVisibleChildren(container)).toEqual(
+      <div>
+        <div>Success</div>
+      </div>,
+    );
+
+    await act(() => {});
+    await act(() => {});
+    await act(() => {});
+    await act(() => {});
+    await act(() => {});
+  });
+
+  fit('should not error when discarding deeply nested Suspense boundaries in a parent fallback partially complete before the parent boundary resolves', async () => {
+    let resolve1;
+    const promise1 = new Promise(r => (resolve1 = r));
+    let resolve2;
+    const promise2 = new Promise(r => (resolve2 = r));
+    const promise3 = new Promise(r => {});
+
+    function Use({children, promise}) {
+      React.use(promise);
+      return children;
+    }
+    function App2() {
+      return (
+        <div>
+          <Suspense
+            fallback={
+              <Suspense fallback="Loading...">
+                <Use promise={promise1}>
+                  <Suspense fallback="Loading more...">
+                    <Use promise={promise3}>
+                      <div>deep fallback</div>
+                    </Use>
+                  </Suspense>
+                </Use>
+              </Suspense>
+            }>
+            <Use promise={promise2}>Success!</Use>
+          </Suspense>
+        </div>
+      );
+    }
+
+    writable.on('data', console.log);
+    await act(() => {
+      const {pipe} = renderToPipeableStream(<App2 />);
+      pipe(writable);
+    });
+
+    expect(getVisibleChildren(container)).toEqual(<div>Loading...</div>);
+
+    await act(() => {
+      resolve1('resolved');
+      resolve2('resolved');
+    });
+
+    expect(getVisibleChildren(container)).toEqual(<div>Success!</div>);
+  });
 });