Skip to content

Commit 9c68069

Browse files
authored
Add regression test for #30172 (#30198)
The issue reported in #30172 was fixed with #29823. The 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, the existing test would have also succeeded before applying the changes from #29823. Therefore, I believe it makes sense to add an additional test `should resolve deduped objects in nested children of blocked models`, which does not succeed without #29823, to prevent regressions.
1 parent 572ded3 commit 9c68069

File tree

1 file changed

+64
-0
lines changed

1 file changed

+64
-0
lines changed

packages/react-server-dom-webpack/src/__tests__/ReactFlightDOMBrowser-test.js

+64
Original file line numberDiff line numberDiff line change
@@ -392,6 +392,70 @@ describe('ReactFlightDOMBrowser', () => {
392392
expect(container.innerHTML).toBe('<div><span>12345</span>12345</div>');
393393
});
394394

395+
it('should resolve deduped objects in nested children of blocked models', async () => {
396+
let resolveOuterClientComponentChunk;
397+
let resolveInnerClientComponentChunk;
398+
399+
const ClientOuter = clientExports(
400+
function ClientOuter({children, value}) {
401+
return children;
402+
},
403+
'1',
404+
'/outer.js',
405+
new Promise(resolve => (resolveOuterClientComponentChunk = resolve)),
406+
);
407+
408+
function PassthroughServerComponent({children}) {
409+
return children;
410+
}
411+
412+
const ClientInner = clientExports(
413+
function ClientInner({children}) {
414+
return JSON.stringify(children);
415+
},
416+
'2',
417+
'/inner.js',
418+
new Promise(resolve => (resolveInnerClientComponentChunk = resolve)),
419+
);
420+
421+
const value = {};
422+
423+
function Server() {
424+
return (
425+
<ClientOuter value={value}>
426+
<PassthroughServerComponent>
427+
<ClientInner>{value}</ClientInner>
428+
</PassthroughServerComponent>
429+
</ClientOuter>
430+
);
431+
}
432+
433+
const stream = await serverAct(() =>
434+
ReactServerDOMServer.renderToReadableStream(<Server />, webpackMap),
435+
);
436+
437+
function ClientRoot({response}) {
438+
return use(response);
439+
}
440+
441+
const response = ReactServerDOMClient.createFromReadableStream(stream);
442+
const container = document.createElement('div');
443+
const root = ReactDOMClient.createRoot(container);
444+
445+
await act(() => {
446+
root.render(<ClientRoot response={response} />);
447+
});
448+
449+
expect(container.innerHTML).toBe('');
450+
451+
await act(() => {
452+
resolveInnerClientComponentChunk();
453+
resolveOuterClientComponentChunk();
454+
});
455+
456+
expect(container.innerHTML).toBe('{}');
457+
});
458+
395459
it('should progressively reveal server components', async () => {
396460
let reportedErrors = [];
397461

0 commit comments

Comments
 (0)