. ' +
+ 'See https://react.dev/link/warning-keys for more information.\n' +
+ ' in NoKey (at **)',
+ ]);
+ }
});
// @gate !__DEV__ || enableOwnerStacks
it('should warn in DEV a child is missing keys on a fragment', () => {
- expect(() => {
- // While we're on the server we need to have the Server version active to track component stacks.
- jest.resetModules();
- jest.mock('react', () => ReactServer);
- const transport = ReactNoopFlightServer.render(
- ReactServer.createElement(
- 'div',
- null,
- Array(6).fill(ReactServer.createElement(ReactServer.Fragment)),
- ),
- );
- jest.resetModules();
- jest.mock('react', () => React);
- ReactNoopFlightClient.read(transport);
- }).toErrorDev('Each child in a list should have a unique "key" prop.');
+ // While we're on the server we need to have the Server version active to track component stacks.
+ jest.resetModules();
+ jest.mock('react', () => ReactServer);
+ const transport = ReactNoopFlightServer.render(
+ ReactServer.createElement(
+ 'div',
+ null,
+ Array(6).fill(ReactServer.createElement(ReactServer.Fragment)),
+ ),
+ );
+ jest.resetModules();
+ jest.mock('react', () => React);
+ ReactNoopFlightClient.read(transport);
+ if (gate(flags => flags.enableOwnerStacks)) {
+ assertConsoleErrorDev([
+ 'Each child in a list should have a unique "key" prop. ' +
+ 'See https://react.dev/link/warning-keys for more information.\n' +
+ ' in Fragment (at **)',
+ 'Each child in a list should have a unique "key" prop. ' +
+ 'See https://react.dev/link/warning-keys for more information.\n' +
+ ' in Fragment (at **)',
+ ]);
+ } else {
+ assertConsoleErrorDev([
+ 'Each child in a list should have a unique "key" prop.\n\n' +
+ 'Check the top-level render call using
. ' +
+ 'See https://react.dev/link/warning-keys for more information.\n' +
+ ' in Fragment (at **)',
+ ]);
+ }
});
it('should warn in DEV a child is missing keys in client component', async () => {
function ParentClient({children}) {
return children;
}
- const Parent = clientReference(ParentClient);
- await expect(async () => {
+
+ await act(async () => {
+ const Parent = clientReference(ParentClient);
const transport = ReactNoopFlightServer.render(
{Array(6).fill(no key
)},
);
ReactNoopFlightClient.read(transport);
- await act(async () => {
- ReactNoop.render(await ReactNoopFlightClient.read(transport));
- });
- }).toErrorDev(
- gate(flags => flags.enableOwnerStacks)
- ? 'Each child in a list should have a unique "key" prop.' +
- '\n\nCheck the top-level render call using
. ' +
- 'See https://react.dev/link/warning-keys for more information.'
- : 'Each child in a list should have a unique "key" prop. ' +
- 'See https://react.dev/link/warning-keys for more information.',
- );
+
+ ReactNoop.render(await ReactNoopFlightClient.read(transport));
+ });
+ if (gate(flags => flags.enableOwnerStacks)) {
+ assertConsoleErrorDev([
+ 'Each child in a list should have a unique "key" prop.\n\n' +
+ 'Check the top-level render call using . ' +
+ 'See https://react.dev/link/warning-keys for more information.\n' +
+ ' in div (at **)',
+ ]);
+ } else {
+ assertConsoleErrorDev([
+ 'Each child in a list should have a unique "key" prop. ' +
+ 'See https://react.dev/link/warning-keys for more information.\n' +
+ ' in div (at **)',
+ ]);
+ }
});
it('should error if a class instance is passed to a host component', () => {
@@ -3135,19 +3445,17 @@ describe('ReactFlight', () => {
},
);
- let transport;
- expect(() => {
- // Reset the modules so that we get a new overridden console on top of the
- // one installed by expect. This ensures that we still emit console.error
- // calls.
- jest.resetModules();
- jest.mock('react', () => require('react/react.react-server'));
- ReactServer = require('react');
- ReactNoopFlightServer = require('react-noop-renderer/flight-server');
- transport = ReactNoopFlightServer.render({
- root: ReactServer.createElement(App),
- });
- }).toErrorDev('err');
+ // Reset the modules so that we get a new overridden console on top of the
+ // one installed by expect. This ensures that we still emit console.error
+ // calls.
+ jest.resetModules();
+ jest.mock('react', () => require('react/react.react-server'));
+ ReactServer = require('react');
+ ReactNoopFlightServer = require('react-noop-renderer/flight-server');
+ const transport = ReactNoopFlightServer.render({
+ root: ReactServer.createElement(App),
+ });
+ assertConsoleErrorDev(['Error: err']);
expect(mockConsoleLog).toHaveBeenCalledTimes(1);
expect(mockConsoleLog.mock.calls[0][0]).toBe('hi');