[assert helpers] forwardRef-test (#31843)
Starting to convert the rest of tests to the `assertConsoleTypeDev` helpers.
Ricky committed
Dec 19, 2024 at 11:50 UTC
8f92ea467e2672a436e3e032299d5230d03187ed
2 files changed
+60
-45
packages/internal-test-utils/consoleMock.js
+1
@@ -273,6 +273,7 @@ function normalizeCodeLocInfo(str) {
273
// We strip that out in our normalization to make it look more like component stacks.
274
name = name.slice(0, name.length - 7);
275
}
276
+ name = name.replace(/.*\/([^\/]+):\d+:\d+/, '**/$1:**:**');
277
return '\n in ' + name + ' (at **)';
278
});
279
}
packages/react/src/__tests__/forwardRef-test.js
+59
-45
@@ -13,6 +13,7 @@ describe('forwardRef', () => {
13
let React;
14
let ReactNoop;
15
let waitForAll;
16
+ let assertConsoleErrorDev;
17
18
beforeEach(() => {
19
jest.resetModules();
@@ -21,6 +22,7 @@ describe('forwardRef', () => {
22
23
const InternalTestUtils = require('internal-test-utils');
24
waitForAll = InternalTestUtils.waitForAll;
25
+ assertConsoleErrorDev = InternalTestUtils.assertConsoleErrorDev;
26
});
27
28
it('should update refs when switching between children', async () => {
@@ -114,25 +116,31 @@ describe('forwardRef', () => {
116
});
117
118
it('should warn if not provided a callback during creation', () => {
117
- expect(() => React.forwardRef(undefined)).toErrorDev(
118
- 'forwardRef requires a render function but was given undefined.',
119
+ React.forwardRef(undefined);
120
+ assertConsoleErrorDev(
121
+ ['forwardRef requires a render function but was given undefined.'],
122
{withoutStack: true},
123
);
121
- expect(() => React.forwardRef(null)).toErrorDev(
122
- 'forwardRef requires a render function but was given null.',
124
+
125
+ React.forwardRef(null);
126
+ assertConsoleErrorDev(
127
+ ['forwardRef requires a render function but was given null.'],
128
{
129
withoutStack: true,
130
},
131
);
127
- expect(() => React.forwardRef('foo')).toErrorDev(
128
- 'forwardRef requires a render function but was given string.',
132
+
133
+ React.forwardRef('foo');
134
+ assertConsoleErrorDev(
135
+ ['forwardRef requires a render function but was given string.'],
136
{withoutStack: true},
137
);
138
});
139
140
it('should warn if no render function is provided', () => {
134
- expect(React.forwardRef).toErrorDev(
135
- 'forwardRef requires a render function but was given undefined.',
141
+ React.forwardRef();
142
+ assertConsoleErrorDev(
143
+ ['forwardRef requires a render function but was given undefined.'],
144
{withoutStack: true},
145
);
146
});
@@ -143,9 +151,12 @@ describe('forwardRef', () => {
151
}
152
renderWithDefaultProps.defaultProps = {};
153
146
- expect(() => React.forwardRef(renderWithDefaultProps)).toErrorDev(
147
- 'forwardRef render functions do not support defaultProps. ' +
148
- 'Did you accidentally pass a React component?',
154
+ React.forwardRef(renderWithDefaultProps);
155
+ assertConsoleErrorDev(
156
+ [
157
+ 'forwardRef render functions do not support defaultProps. ' +
158
+ 'Did you accidentally pass a React component?',
159
+ ],
160
{withoutStack: true},
161
);
162
});
@@ -159,9 +170,12 @@ describe('forwardRef', () => {
170
it('should warn if the render function provided does not use the forwarded ref parameter', () => {
171
const arityOfOne = props => <div {...props} />;
172
162
- expect(() => React.forwardRef(arityOfOne)).toErrorDev(
163
- 'forwardRef render functions accept exactly two parameters: props and ref. ' +
164
- 'Did you forget to use the ref parameter?',
173
+ React.forwardRef(arityOfOne);
174
+ assertConsoleErrorDev(
175
+ [
176
+ 'forwardRef render functions accept exactly two parameters: props and ref. ' +
177
+ 'Did you forget to use the ref parameter?',
178
+ ],
179
{withoutStack: true},
180
);
181
});
@@ -174,9 +188,12 @@ describe('forwardRef', () => {
188
it('should warn if the render function provided expects to use more than two parameters', () => {
189
const arityOfThree = (props, ref, x) => <div {...props} ref={ref} x={x} />;
190
177
- expect(() => React.forwardRef(arityOfThree)).toErrorDev(
178
- 'forwardRef render functions accept exactly two parameters: props and ref. ' +
179
- 'Any additional parameter will be undefined.',
191
+ React.forwardRef(arityOfThree);
192
+ assertConsoleErrorDev(
193
+ [
194
+ 'forwardRef render functions accept exactly two parameters: props and ref. ' +
195
+ 'Any additional parameter will be undefined.',
196
+ ],
197
{withoutStack: true},
198
);
199
});
@@ -190,15 +207,16 @@ describe('forwardRef', () => {
207
<RefForwardingComponent />
208
</p>,
209
);
193
- await expect(async () => {
194
- await waitForAll([]);
195
- }).toErrorDev(
210
+ await waitForAll([]);
211
+ assertConsoleErrorDev([
212
'Each child in a list should have a unique "key" prop.' +
213
'\n\nCheck the top-level render call using <ForwardRef>. It was passed a child from ForwardRef. ' +
214
'See https://react.dev/link/warning-keys for more information.\n' +
215
' in span (at **)\n' +
200
- ' in ',
201
- );
216
+ (gate(flags => flags.enableOwnerStacks)
217
+ ? ' in **/forwardRef-test.js:**:** (at **)'
218
+ : ' in p (at **)'),
219
+ ]);
220
});
221
222
it('should use the inner function name for the stack', async () => {
@@ -210,16 +228,16 @@ describe('forwardRef', () => {
228
<RefForwardingComponent />
229
</p>,
230
);
213
- await expect(async () => {
214
- await waitForAll([]);
215
- }).toErrorDev(
231
+
232
+ await waitForAll([]);
233
+ assertConsoleErrorDev([
234
'Each child in a list should have a unique "key" prop.' +
235
'\n\nCheck the top-level render call using <ForwardRef(Inner)>. It was passed a child from ForwardRef(Inner). ' +
236
'See https://react.dev/link/warning-keys for more information.\n' +
237
' in span (at **)\n' +
238
' in Inner (at **)' +
239
(gate(flags => flags.enableOwnerStacks) ? '' : '\n in p (at **)'),
222
- );
240
+ ]);
241
});
242
243
it('should use the inner name in the stack', async () => {
@@ -233,16 +251,15 @@ describe('forwardRef', () => {
251
<RefForwardingComponent />
252
</p>,
253
);
236
- await expect(async () => {
237
- await waitForAll([]);
238
- }).toErrorDev(
254
+ await waitForAll([]);
255
+ assertConsoleErrorDev([
256
'Each child in a list should have a unique "key" prop.' +
257
'\n\nCheck the top-level render call using <ForwardRef(Inner)>. It was passed a child from ForwardRef(Inner). ' +
258
'See https://react.dev/link/warning-keys for more information.\n' +
259
' in span (at **)\n' +
260
' in Inner (at **)' +
261
(gate(flags => flags.enableOwnerStacks) ? '' : '\n in p (at **)'),
245
- );
262
+ ]);
263
});
264
265
it('can use the outer displayName in the stack', async () => {
@@ -255,16 +272,15 @@ describe('forwardRef', () => {
272
<RefForwardingComponent />
273
</p>,
274
);
258
- await expect(async () => {
259
- await waitForAll([]);
260
- }).toErrorDev(
275
+ await waitForAll([]);
276
+ assertConsoleErrorDev([
277
'Each child in a list should have a unique "key" prop.' +
278
'\n\nCheck the top-level render call using <Outer>. It was passed a child from Outer. ' +
279
'See https://react.dev/link/warning-keys for more information.\n' +
280
' in span (at **)\n' +
281
' in Outer (at **)' +
282
(gate(flags => flags.enableOwnerStacks) ? '' : '\n in p (at **)'),
267
- );
283
+ ]);
284
});
285
286
it('should prefer the inner name to the outer displayName in the stack', async () => {
@@ -279,16 +295,15 @@ describe('forwardRef', () => {
295
<RefForwardingComponent />
296
</p>,
297
);
282
- await expect(async () => {
283
- await waitForAll([]);
284
- }).toErrorDev(
298
+ await waitForAll([]);
299
+ assertConsoleErrorDev([
300
'Each child in a list should have a unique "key" prop.' +
301
'\n\nCheck the top-level render call using <Outer>. It was passed a child from Outer. ' +
302
'See https://react.dev/link/warning-keys for more information.\n' +
303
' in span (at **)\n' +
304
' in Inner (at **)' +
305
(gate(flags => flags.enableOwnerStacks) ? '' : '\n in p (at **)'),
291
- );
306
+ ]);
307
});
308
309
it('should not bailout if forwardRef is not wrapped in memo', async () => {
@@ -419,13 +434,12 @@ describe('forwardRef', () => {
434
});
435
436
it('warns on forwardRef(memo(...))', () => {
422
- expect(() => {
423
- React.forwardRef(
424
- React.memo((props, ref) => {
425
- return null;
426
- }),
427
- );
428
- }).toErrorDev(
437
+ React.forwardRef(
438
+ React.memo((props, ref) => {
439
+ return null;
440
+ }),
441
+ );
442
+ assertConsoleErrorDev(
443
[
444
'forwardRef requires a render function but received a `memo` ' +
445
'component. Instead of forwardRef(memo(...)), use ' +