[assert helpers] ReactChildren-test (#31844)
Based off https://github.com/facebook/react/pull/31843 Commit to review: https://github.com/facebook/react/pull/31844/commits/2c653b81a73e155f1548c0362e5334629a45351e Moar tests
Ricky committed
Dec 19, 2024 at 13:05 UTC
36d15d58628baf5e15624a52febae873a7a56345
1 file changed
+122
-84
packages/react/src/__tests__/ReactChildren-test.js
+122
-84
@@ -13,12 +13,13 @@ describe('ReactChildren', () => {
13
let React;
14
let ReactDOMClient;
15
let act;
16
+ let assertConsoleErrorDev;
17
18
beforeEach(() => {
19
jest.resetModules();
20
React = require('react');
21
ReactDOMClient = require('react-dom/client');
21
- act = require('internal-test-utils').act;
22
+ ({act, assertConsoleErrorDev} = require('internal-test-utils'));
23
});
24
25
it('should support identity for simple', () => {
@@ -331,14 +332,16 @@ describe('ReactChildren', () => {
332
callback.mockClear();
333
}
334
334
- let instance;
335
- expect(() => {
336
- instance = <div>{threeDivIterable}</div>;
337
- }).toErrorDev(
335
+ const instance = <div>{threeDivIterable}</div>;
336
+ assertConsoleErrorDev(
337
// With the flag on this doesn't warn eagerly but only when rendered
338
gate(flag => flag.enableOwnerStacks)
339
? []
341
- : ['Each child in a list should have a unique "key" prop.'],
340
+ : [
341
+ 'Each child in a list should have a unique "key" prop.\n\n' +
342
+ 'Check the top-level render call using <div>. See https://react.dev/link/warning-keys for more information.\n' +
343
+ ' in div (at **)',
344
+ ],
345
);
346
347
React.Children.forEach(instance.props.children, callback, context);
@@ -359,11 +362,16 @@ describe('ReactChildren', () => {
362
363
const container = document.createElement('div');
364
const root = ReactDOMClient.createRoot(container);
362
- await expect(async () => {
363
- await act(() => {
364
- root.render(instance);
365
- });
366
- }).toErrorDev('Each child in a list should have a unique "key" prop.');
365
+ await act(() => {
366
+ root.render(instance);
367
+ });
368
+ assertConsoleErrorDev([
369
+ 'Each child in a list should have a unique "key" prop.\n\n' +
370
+ 'Check the top-level render call using <div>. It was passed a child from div.' +
371
+ ' See https://react.dev/link/warning-keys for more information.\n' +
372
+ ' in div (at **)' +
373
+ (gate(flag => flag.enableOwnerStacks) ? '' : '\n in div (at **)'),
374
+ ]);
375
});
376
377
it('should be called for each child in an iterable with keys', () => {
@@ -879,15 +887,29 @@ describe('ReactChildren', () => {
887
888
const container = document.createElement('div');
889
const root = ReactDOMClient.createRoot(container);
882
- await expect(async () => {
883
- await act(() => {
884
- root.render(
885
- <ComponentRenderingMappedChildren>
886
- {[<div />]}
887
- </ComponentRenderingMappedChildren>,
888
- );
889
- });
890
- }).toErrorDev(['Each child in a list should have a unique "key" prop.']);
890
+ await act(() => {
891
+ root.render(
892
+ <ComponentRenderingMappedChildren>
893
+ {[<div />]}
894
+ </ComponentRenderingMappedChildren>,
895
+ );
896
+ });
897
+ assertConsoleErrorDev(
898
+ gate(flags => flags.enableOwnerStacks)
899
+ ? [
900
+ 'Each child in a list should have a unique "key" prop.\n\n' +
901
+ 'Check the render method of `ComponentRenderingMappedChildren`.' +
902
+ ' See https://react.dev/link/warning-keys for more information.\n' +
903
+ ' in div (at **)\n' +
904
+ ' in **/ReactChildren-test.js:**:** (at **)',
905
+ ]
906
+ : [
907
+ 'Each child in a list should have a unique "key" prop.\n\n' +
908
+ 'Check the top-level render call using <ComponentRenderingMappedChildren>.' +
909
+ ' See https://react.dev/link/warning-keys for more information.\n' +
910
+ ' in div (at **)',
911
+ ],
912
+ );
913
});
914
915
it('does not warn for mapped static children without keys', async () => {
@@ -903,16 +925,14 @@ describe('ReactChildren', () => {
925
926
const container = document.createElement('div');
927
const root = ReactDOMClient.createRoot(container);
906
- await expect(async () => {
907
- await act(() => {
908
- root.render(
909
- <ComponentRenderingMappedChildren>
910
- <div />
911
- <div />
912
- </ComponentRenderingMappedChildren>,
913
- );
914
- });
915
- }).toErrorDev([]);
928
+ await act(() => {
929
+ root.render(
930
+ <ComponentRenderingMappedChildren>
931
+ <div />
932
+ <div />
933
+ </ComponentRenderingMappedChildren>,
934
+ );
935
+ });
936
});
937
938
it('warns for cloned list children without keys', async () => {
@@ -926,15 +946,28 @@ describe('ReactChildren', () => {
946
947
const container = document.createElement('div');
948
const root = ReactDOMClient.createRoot(container);
929
- await expect(async () => {
930
- await act(() => {
931
- root.render(
932
- <ComponentRenderingClonedChildren>
933
- {[<div />]}
934
- </ComponentRenderingClonedChildren>,
935
- );
936
- });
937
- }).toErrorDev(['Each child in a list should have a unique "key" prop.']);
949
+ await act(() => {
950
+ root.render(
951
+ <ComponentRenderingClonedChildren>
952
+ {[<div />]}
953
+ </ComponentRenderingClonedChildren>,
954
+ );
955
+ });
956
+ assertConsoleErrorDev(
957
+ gate(flags => flags.enableOwnerStacks)
958
+ ? [
959
+ 'Each child in a list should have a unique "key" prop.\n\n' +
960
+ 'Check the render method of `ComponentRenderingClonedChildren`.' +
961
+ ' See https://react.dev/link/warning-keys for more information.\n' +
962
+ ' in div (at **)',
963
+ ]
964
+ : [
965
+ 'Each child in a list should have a unique "key" prop.\n\n' +
966
+ 'Check the top-level render call using <ComponentRenderingClonedChildren>.' +
967
+ ' See https://react.dev/link/warning-keys for more information.\n' +
968
+ ' in div (at **)',
969
+ ],
970
+ );
971
});
972
973
it('does not warn for cloned static children without keys', async () => {
@@ -948,16 +981,14 @@ describe('ReactChildren', () => {
981
982
const container = document.createElement('div');
983
const root = ReactDOMClient.createRoot(container);
951
- await expect(async () => {
952
- await act(() => {
953
- root.render(
954
- <ComponentRenderingClonedChildren>
955
- <div />
956
- <div />
957
- </ComponentRenderingClonedChildren>,
958
- );
959
- });
960
- }).toErrorDev([]);
984
+ await act(() => {
985
+ root.render(
986
+ <ComponentRenderingClonedChildren>
987
+ <div />
988
+ <div />
989
+ </ComponentRenderingClonedChildren>,
990
+ );
991
+ });
992
});
993
994
it('warns for flattened list children without keys', async () => {
@@ -967,15 +998,28 @@ describe('ReactChildren', () => {
998
999
const container = document.createElement('div');
1000
const root = ReactDOMClient.createRoot(container);
970
- await expect(async () => {
971
- await act(() => {
972
- root.render(
973
- <ComponentRenderingFlattenedChildren>
974
- {[<div />]}
975
- </ComponentRenderingFlattenedChildren>,
976
- );
977
- });
978
- }).toErrorDev(['Each child in a list should have a unique "key" prop.']);
1001
+ await act(() => {
1002
+ root.render(
1003
+ <ComponentRenderingFlattenedChildren>
1004
+ {[<div />]}
1005
+ </ComponentRenderingFlattenedChildren>,
1006
+ );
1007
+ });
1008
+ assertConsoleErrorDev(
1009
+ gate(flags => flags.enableOwnerStacks)
1010
+ ? [
1011
+ 'Each child in a list should have a unique "key" prop.\n\n' +
1012
+ 'Check the render method of `ComponentRenderingFlattenedChildren`.' +
1013
+ ' See https://react.dev/link/warning-keys for more information.\n' +
1014
+ ' in div (at **)',
1015
+ ]
1016
+ : [
1017
+ 'Each child in a list should have a unique "key" prop.\n\n' +
1018
+ 'Check the top-level render call using <ComponentRenderingFlattenedChildren>.' +
1019
+ ' See https://react.dev/link/warning-keys for more information.\n' +
1020
+ ' in div (at **)',
1021
+ ],
1022
+ );
1023
});
1024
1025
it('does not warn for flattened static children without keys', async () => {
@@ -985,16 +1029,14 @@ describe('ReactChildren', () => {
1029
1030
const container = document.createElement('div');
1031
const root = ReactDOMClient.createRoot(container);
988
- await expect(async () => {
989
- await act(() => {
990
- root.render(
991
- <ComponentRenderingFlattenedChildren>
992
- <div />
993
- <div />
994
- </ComponentRenderingFlattenedChildren>,
995
- );
996
- });
997
- }).toErrorDev([]);
1032
+ await act(() => {
1033
+ root.render(
1034
+ <ComponentRenderingFlattenedChildren>
1035
+ <div />
1036
+ <div />
1037
+ </ComponentRenderingFlattenedChildren>,
1038
+ );
1039
+ });
1040
});
1041
1042
it('should escape keys', () => {
@@ -1153,18 +1195,16 @@ describe('ReactChildren', () => {
1195
1196
const container = document.createElement('div');
1197
const root = ReactDOMClient.createRoot(container);
1156
- await expect(async () => {
1157
- await act(() => {
1158
- root.render(<ComponentReturningArray />);
1159
- });
1160
- }).toErrorDev(
1161
- '' +
1162
- 'Each child in a list should have a unique "key" prop.' +
1198
+ await act(() => {
1199
+ root.render(<ComponentReturningArray />);
1200
+ });
1201
+ assertConsoleErrorDev([
1202
+ 'Each child in a list should have a unique "key" prop.' +
1203
'\n\nCheck the top-level render call using <ComponentReturningArray>. It was passed a child from ComponentReturningArray. ' +
1204
'See https://react.dev/link/warning-keys for more information.' +
1205
'\n in div (at **)' +
1206
'\n in ComponentReturningArray (at **)',
1167
- );
1207
+ ]);
1208
});
1209
1210
it('does not warn when there are keys on elements in a fragment', async () => {
@@ -1184,17 +1224,15 @@ describe('ReactChildren', () => {
1224
it('warns for keys for arrays at the top level', async () => {
1225
const container = document.createElement('div');
1226
const root = ReactDOMClient.createRoot(container);
1187
- await expect(async () => {
1188
- await act(() => {
1189
- root.render([<div />, <div />]);
1190
- });
1191
- }).toErrorDev(
1192
- '' +
1193
- 'Each child in a list should have a unique "key" prop.' +
1227
+ await act(() => {
1228
+ root.render([<div />, <div />]);
1229
+ });
1230
+ assertConsoleErrorDev([
1231
+ 'Each child in a list should have a unique "key" prop.' +
1232
'\n\nCheck the top-level render call using <Root>. ' +
1233
'See https://react.dev/link/warning-keys for more information.' +
1234
'\n in div (at **)',
1197
- );
1235
+ ]);
1236
});
1237
});
1238
});