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 0e44c574413a5..db8edf7ad6831 100644 --- a/packages/react-server-dom-webpack/src/__tests__/ReactFlightDOMBrowser-test.js +++ b/packages/react-server-dom-webpack/src/__tests__/ReactFlightDOMBrowser-test.js @@ -525,7 +525,7 @@ describe('ReactFlightDOMBrowser', () => { expect(container.innerHTML).toBe('{"foo":1}{"foo":1}'); }); - it('should handle deduped props of elements in fragments', async () => { + it('should handle deduped props of re-used elements in fragments (same-chunk reference)', async () => { let resolveFooClientComponentChunk; const FooClient = clientExports( @@ -542,7 +542,58 @@ describe('ReactFlightDOMBrowser', () => { function Server() { return ( - {shared} + <>{shared} + + ); + } + + const stream = await serverAct(() => + ReactServerDOMServer.renderToReadableStream(, 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(); + }); + + expect(container.innerHTML).toBe(''); + + await act(() => { + resolveFooClientComponentChunk(); + }); + + expect(container.innerHTML).toBe('
'); + }); + + it('should handle deduped props of re-used elements in server components (cross-chunk reference)', async () => { + let resolveFooClientComponentChunk; + + function PassthroughServerComponent({children}) { + return children; + } + + const FooClient = clientExports( + function Foo({children, item}) { + return children; + }, + '1', + '/foo.js', + new Promise(resolve => (resolveFooClientComponentChunk = resolve)), + ); + + const shared =
; + + function Server() { + return ( + + {shared} ); }