[Flight] Gated test for dropped transport of undefined object values (#26478)
## Summary With https://github.com/facebook/react/pull/26349 we now serialize `undefined`. However, deserializing it on the client is currently indistinguishable from the value missing entirely due to how `JSON.parse` treats `undefined` return value of reviver functions. This leads to inconsistent behavior of the `Object.hasOwn` or `in` operator (used for narrowing in TypeScript). In TypeScript-speak, `{ prop: T | undefined}` will arrive as `{ prop?: T }`. ## How did you test this change? - Added test that is expected to fail. Though ideally the implementation of the component would not care whether it's used on the client or server.
This commit is contained in:
parent
fd0511c728
commit
f118b7cebf
|
@ -213,6 +213,40 @@ describe('ReactFlight', () => {
|
|||
expect(ReactNoop).toMatchRenderedOutput(null);
|
||||
});
|
||||
|
||||
// @gate FIXME
|
||||
it('should transport undefined object values', async () => {
|
||||
function ServerComponent(props) {
|
||||
return 'prop' in props
|
||||
? `\`prop\` in props as '${props.prop}'`
|
||||
: '`prop` not in props';
|
||||
}
|
||||
const ClientComponent = clientReference(ServerComponent);
|
||||
|
||||
const model = (
|
||||
<>
|
||||
<div>
|
||||
Server: <ServerComponent prop={undefined} />
|
||||
</div>
|
||||
<div>
|
||||
Client: <ClientComponent prop={undefined} />
|
||||
</div>
|
||||
</>
|
||||
);
|
||||
|
||||
const transport = ReactNoopFlightServer.render(model);
|
||||
|
||||
await act(async () => {
|
||||
ReactNoop.render(await ReactNoopFlightClient.read(transport));
|
||||
});
|
||||
|
||||
expect(ReactNoop).toMatchRenderedOutput(
|
||||
<>
|
||||
<div>Server: `prop` in props as 'undefined'</div>
|
||||
<div>Client: `prop` in props as 'undefined'</div>
|
||||
</>,
|
||||
);
|
||||
});
|
||||
|
||||
it('can render an empty fragment', async () => {
|
||||
function Empty() {
|
||||
return <React.Fragment />;
|
||||
|
|
Loading…
Reference in New Issue