Skip to content

Commit

Permalink
Add regression test for #30172 (#30198)
Browse files Browse the repository at this point in the history
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.
  • Loading branch information
unstubbable committed Jul 3, 2024
1 parent 572ded3 commit 9c68069
Showing 1 changed file with 64 additions and 0 deletions.
Original file line number Diff line number Diff line change
Expand Up @@ -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 = [];

Expand Down

0 comments on commit 9c68069

Please sign in to comment.