Skip to content

Commit 36d15d5

Browse files
rickhanloniirickhanlonii
authored
[assert helpers] ReactChildren-test (facebook#31844)
Based off facebook#31843 Commit to review: facebook@2c653b8 Moar tests
1 parent c70ab3f commit 36d15d5

File tree

1 file changed

+122
-84
lines changed

1 file changed

+122
-84
lines changed

‎packages/react/src/__tests__/ReactChildren-test.js‎

Lines changed: 122 additions & 84 deletions
Original file line numberDiff line numberDiff line change
@@ -13,12 +13,13 @@ describe('ReactChildren', () => {
1313
let React;
1414
let ReactDOMClient;
1515
let act;
16+
let assertConsoleErrorDev;
1617

1718
beforeEach(() => {
1819
jest.resetModules();
1920
React = require('react');
2021
ReactDOMClient = require('react-dom/client');
21-
act = require('internal-test-utils').act;
22+
({act, assertConsoleErrorDev} = require('internal-test-utils'));
2223
});
2324

2425
it('should support identity for simple', () => {
@@ -331,14 +332,16 @@ describe('ReactChildren', () => {
331332
callback.mockClear();
332333
}
333334

334-
let instance;
335-
expect(() => {
336-
instance = <div>{threeDivIterable}</div>;
337-
}).toErrorDev(
335+
const instance = <div>{threeDivIterable}</div>;
336+
assertConsoleErrorDev(
338337
// With the flag on this doesn't warn eagerly but only when rendered
339338
gate(flag => flag.enableOwnerStacks)
340339
? []
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+
],
342345
);
343346

344347
React.Children.forEach(instance.props.children, callback, context);
@@ -359,11 +362,16 @@ describe('ReactChildren', () => {
359362

360363
const container = document.createElement('div');
361364
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+
]);
367375
});
368376

369377
it('should be called for each child in an iterable with keys', () => {
@@ -879,15 +887,29 @@ describe('ReactChildren', () => {
879887

880888
const container = document.createElement('div');
881889
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+
);
891913
});
892914

893915
it('does not warn for mapped static children without keys', async () => {
@@ -903,16 +925,14 @@ describe('ReactChildren', () => {
903925

904926
const container = document.createElement('div');
905927
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+
});
916936
});
917937

918938
it('warns for cloned list children without keys', async () => {
@@ -926,15 +946,28 @@ describe('ReactChildren', () => {
926946

927947
const container = document.createElement('div');
928948
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+
);
938971
});
939972

940973
it('does not warn for cloned static children without keys', async () => {
@@ -948,16 +981,14 @@ describe('ReactChildren', () => {
948981

949982
const container = document.createElement('div');
950983
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+
});
961992
});
962993

963994
it('warns for flattened list children without keys', async () => {
@@ -967,15 +998,28 @@ describe('ReactChildren', () => {
967998

968999
const container = document.createElement('div');
9691000
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+
);
9791023
});
9801024

9811025
it('does not warn for flattened static children without keys', async () => {
@@ -985,16 +1029,14 @@ describe('ReactChildren', () => {
9851029

9861030
const container = document.createElement('div');
9871031
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+
});
9981040
});
9991041

10001042
it('should escape keys', () => {
@@ -1153,18 +1195,16 @@ describe('ReactChildren', () => {
11531195

11541196
const container = document.createElement('div');
11551197
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.' +
11631203
'\n\nCheck the top-level render call using <ComponentReturningArray>. It was passed a child from ComponentReturningArray. ' +
11641204
'See https://react.dev/link/warning-keys for more information.' +
11651205
'\n in div (at **)' +
11661206
'\n in ComponentReturningArray (at **)',
1167-
);
1207+
]);
11681208
});
11691209

11701210
it('does not warn when there are keys on elements in a fragment', async () => {
@@ -1184,17 +1224,15 @@ describe('ReactChildren', () => {
11841224
it('warns for keys for arrays at the top level', async () => {
11851225
const container = document.createElement('div');
11861226
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.' +
11941232
'\n\nCheck the top-level render call using <Root>. ' +
11951233
'See https://react.dev/link/warning-keys for more information.' +
11961234
'\n in div (at **)',
1197-
);
1235+
]);
11981236
});
11991237
});
12001238
});

0 commit comments

Comments
 (0)