diff --git a/packages/react/src/__tests__/ReactChildren-test.js b/packages/react/src/__tests__/ReactChildren-test.js
index 2723755abfe4a..5cce6b24873f0 100644
--- a/packages/react/src/__tests__/ReactChildren-test.js
+++ b/packages/react/src/__tests__/ReactChildren-test.js
@@ -13,12 +13,13 @@ describe('ReactChildren', () => {
let React;
let ReactDOMClient;
let act;
+ let assertConsoleErrorDev;
beforeEach(() => {
jest.resetModules();
React = require('react');
ReactDOMClient = require('react-dom/client');
- act = require('internal-test-utils').act;
+ ({act, assertConsoleErrorDev} = require('internal-test-utils'));
});
it('should support identity for simple', () => {
@@ -331,14 +332,16 @@ describe('ReactChildren', () => {
callback.mockClear();
}
- let instance;
- expect(() => {
- instance =
. See https://react.dev/link/warning-keys for more information.\n' +
+ ' in div (at **)',
+ ],
);
React.Children.forEach(instance.props.children, callback, context);
@@ -359,11 +362,16 @@ describe('ReactChildren', () => {
const container = document.createElement('div');
const root = ReactDOMClient.createRoot(container);
- await expect(async () => {
- await act(() => {
- root.render(instance);
- });
- }).toErrorDev('Each child in a list should have a unique "key" prop.');
+ await act(() => {
+ root.render(instance);
+ });
+ assertConsoleErrorDev([
+ 'Each child in a list should have a unique "key" prop.\n\n' +
+ 'Check the top-level render call using
. It was passed a child from div.' +
+ ' See https://react.dev/link/warning-keys for more information.\n' +
+ ' in div (at **)' +
+ (gate(flag => flag.enableOwnerStacks) ? '' : '\n in div (at **)'),
+ ]);
});
it('should be called for each child in an iterable with keys', () => {
@@ -879,15 +887,29 @@ describe('ReactChildren', () => {
const container = document.createElement('div');
const root = ReactDOMClient.createRoot(container);
- await expect(async () => {
- await act(() => {
- root.render(
-
- {[]}
- ,
- );
- });
- }).toErrorDev(['Each child in a list should have a unique "key" prop.']);
+ await act(() => {
+ root.render(
+
+ {[]}
+ ,
+ );
+ });
+ assertConsoleErrorDev(
+ gate(flags => flags.enableOwnerStacks)
+ ? [
+ 'Each child in a list should have a unique "key" prop.\n\n' +
+ 'Check the render method of `ComponentRenderingMappedChildren`.' +
+ ' See https://react.dev/link/warning-keys for more information.\n' +
+ ' in div (at **)\n' +
+ ' in **/ReactChildren-test.js:**:** (at **)',
+ ]
+ : [
+ '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 **)',
+ ],
+ );
});
it('does not warn for mapped static children without keys', async () => {
@@ -903,16 +925,14 @@ describe('ReactChildren', () => {
const container = document.createElement('div');
const root = ReactDOMClient.createRoot(container);
- await expect(async () => {
- await act(() => {
- root.render(
-
-
-
- ,
- );
- });
- }).toErrorDev([]);
+ await act(() => {
+ root.render(
+
+
+
+ ,
+ );
+ });
});
it('warns for cloned list children without keys', async () => {
@@ -926,15 +946,28 @@ describe('ReactChildren', () => {
const container = document.createElement('div');
const root = ReactDOMClient.createRoot(container);
- await expect(async () => {
- await act(() => {
- root.render(
-
- {[]}
- ,
- );
- });
- }).toErrorDev(['Each child in a list should have a unique "key" prop.']);
+ await act(() => {
+ root.render(
+
+ {[]}
+ ,
+ );
+ });
+ assertConsoleErrorDev(
+ gate(flags => flags.enableOwnerStacks)
+ ? [
+ 'Each child in a list should have a unique "key" prop.\n\n' +
+ 'Check the render method of `ComponentRenderingClonedChildren`.' +
+ ' See https://react.dev/link/warning-keys for more information.\n' +
+ ' in div (at **)',
+ ]
+ : [
+ '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 **)',
+ ],
+ );
});
it('does not warn for cloned static children without keys', async () => {
@@ -948,16 +981,14 @@ describe('ReactChildren', () => {
const container = document.createElement('div');
const root = ReactDOMClient.createRoot(container);
- await expect(async () => {
- await act(() => {
- root.render(
-
-
-
- ,
- );
- });
- }).toErrorDev([]);
+ await act(() => {
+ root.render(
+
+
+
+ ,
+ );
+ });
});
it('warns for flattened list children without keys', async () => {
@@ -967,15 +998,28 @@ describe('ReactChildren', () => {
const container = document.createElement('div');
const root = ReactDOMClient.createRoot(container);
- await expect(async () => {
- await act(() => {
- root.render(
-
- {[]}
- ,
- );
- });
- }).toErrorDev(['Each child in a list should have a unique "key" prop.']);
+ await act(() => {
+ root.render(
+
+ {[]}
+ ,
+ );
+ });
+ assertConsoleErrorDev(
+ gate(flags => flags.enableOwnerStacks)
+ ? [
+ 'Each child in a list should have a unique "key" prop.\n\n' +
+ 'Check the render method of `ComponentRenderingFlattenedChildren`.' +
+ ' See https://react.dev/link/warning-keys for more information.\n' +
+ ' in div (at **)',
+ ]
+ : [
+ '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 **)',
+ ],
+ );
});
it('does not warn for flattened static children without keys', async () => {
@@ -985,16 +1029,14 @@ describe('ReactChildren', () => {
const container = document.createElement('div');
const root = ReactDOMClient.createRoot(container);
- await expect(async () => {
- await act(() => {
- root.render(
-
-
-
- ,
- );
- });
- }).toErrorDev([]);
+ await act(() => {
+ root.render(
+
+
+
+ ,
+ );
+ });
});
it('should escape keys', () => {
@@ -1153,18 +1195,16 @@ describe('ReactChildren', () => {
const container = document.createElement('div');
const root = ReactDOMClient.createRoot(container);
- await expect(async () => {
- await act(() => {
- root.render();
- });
- }).toErrorDev(
- '' +
- 'Each child in a list should have a unique "key" prop.' +
+ await act(() => {
+ root.render();
+ });
+ assertConsoleErrorDev([
+ 'Each child in a list should have a unique "key" prop.' +
'\n\nCheck the top-level render call using . It was passed a child from ComponentReturningArray. ' +
'See https://react.dev/link/warning-keys for more information.' +
'\n in div (at **)' +
'\n in ComponentReturningArray (at **)',
- );
+ ]);
});
it('does not warn when there are keys on elements in a fragment', async () => {
@@ -1184,17 +1224,15 @@ describe('ReactChildren', () => {
it('warns for keys for arrays at the top level', async () => {
const container = document.createElement('div');
const root = ReactDOMClient.createRoot(container);
- await expect(async () => {
- await act(() => {
- root.render([, ]);
- });
- }).toErrorDev(
- '' +
- 'Each child in a list should have a unique "key" prop.' +
+ await act(() => {
+ root.render([, ]);
+ });
+ assertConsoleErrorDev([
+ '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.' +
'\n in div (at **)',
- );
+ ]);
});
});
});