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.
Hendrik Liebau committed
Jul 3, 2024 at 13:10 UTC
9c6806964f453cb5e8a530881dcc9f33480e7388
1 file changed
+64
packages/react-server-dom-webpack/src/__tests__/ReactFlightDOMBrowser-test.js
+64
@@ -392,6 +392,70 @@ describe('ReactFlightDOMBrowser', () => {
392
expect(container.innerHTML).toBe('<div><span>12345</span>12345</div>');
393
});
394
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
+
459
it('should progressively reveal server components', async () => {
460
let reportedErrors = [];
461