From 985e4a677afb0f11d6cd502416c9b7c560e51e9e Mon Sep 17 00:00:00 2001
From: Hendrik Liebau <mail@hendrik-liebau.de>
Date: Wed, 3 Jul 2024 10:43:05 +0200
Subject: [PATCH] Add regression test for #30172

The issue reported in #30172 was fixed with #29823. This PR also added
the test [`should resolve deduped objects that are themselves
blocked`](https://github.com/facebook/react/blob/6d2a97a7113dfac2ad45067001b7e49a98718324/packages/react-server-dom-webpack/src/__tests__/ReactFlightDOMBrowser-test.js#L348-L393),
which tests a similar scenario. However, this test would have also
succeeded before applying the changes from #29823. Therefore, I believe
it makes sense to add this additional test, which does not succeed
without #29823, to prevent regressions.
---
 .../__tests__/ReactFlightDOMBrowser-test.js   | 64 +++++++++++++++++++
 1 file changed, 64 insertions(+)

diff --git a/packages/react-server-dom-webpack/src/__tests__/ReactFlightDOMBrowser-test.js b/packages/react-server-dom-webpack/src/__tests__/ReactFlightDOMBrowser-test.js
index 90393e435e91f..49f2823c8b387 100644
--- a/packages/react-server-dom-webpack/src/__tests__/ReactFlightDOMBrowser-test.js
+++ b/packages/react-server-dom-webpack/src/__tests__/ReactFlightDOMBrowser-test.js
@@ -392,6 +392,70 @@ describe('ReactFlightDOMBrowser', () => {
     expect(container.innerHTML).toBe('<div><span>12345</span>12345</div>');
   });
 
+  it('should resolve deduped objects in nested children of blocked models', async () => {
+    let resolveOuterClientComponentChunk;
+    let resolveInnerClientComponentChunk;
+
+    const ClientOuter = clientExports(
+      function ClientOuter({children, value}) {
+        return children;
+      },
+      '1',
+      '/outer.js',
+      new Promise(resolve => (resolveOuterClientComponentChunk = resolve)),
+    );
+
+    function PassthroughServerComponent({children}) {
+      return children;
+    }
+
+    const ClientInner = clientExports(
+      function ClientInner({children}) {
+        return JSON.stringify(children);
+      },
+      '2',
+      '/inner.js',
+      new Promise(resolve => (resolveInnerClientComponentChunk = resolve)),
+    );
+
+    const value = {};
+
+    function Server() {
+      return (
+        <ClientOuter value={value}>
+          <PassthroughServerComponent>
+            <ClientInner>{value}</ClientInner>
+          </PassthroughServerComponent>
+        </ClientOuter>
+      );
+    }
+
+    const stream = await serverAct(() =>
+      ReactServerDOMServer.renderToReadableStream(<Server />, webpackMap),
+    );
+
+    function ClientRoot({response}) {
+      return use(response);
+    }
+
+    const response = ReactServerDOMClient.createFromReadableStream(stream);
+    const container = document.createElement('div');
+    const root = ReactDOMClient.createRoot(container);
+
+    await act(() => {
+      root.render(<ClientRoot response={response} />);
+    });
+
+    expect(container.innerHTML).toBe('');
+
+    await act(() => {
+      resolveInnerClientComponentChunk();
+      resolveOuterClientComponentChunk();
+    });
+
+    expect(container.innerHTML).toBe('{}');
+  });
+
   it('should progressively reveal server components', async () => {
     let reportedErrors = [];