Don't strip out component stack in assertConsole helpers (#30204)
Use the same normalizeCodeLocInfo that we use everywhere else. We should actually test the component stack itself. Not just that it exists. This was causing false passes. However, the logic was also wrong before because it wouldn't always strip out the last line so wouldn't accurately normalize it. Leading to false failures as well.
Sebastian Markbåge committed
Jul 3, 2024 at 16:57 UTC
15ca8b6bad9c2e51f1a3b6e943c9af494b62a1a6
2 files changed
+67
-50
packages/internal-test-utils/__tests__/ReactInternalTestUtils-test.js
+56
-44
@@ -1002,8 +1002,8 @@ describe('ReactInternalTestUtils console assertions', () => {
1002
- Hi
1003
- Wow
1004
- Bye
1005
- + Wow <component stack>
1006
- + Bye <component stack>"
1005
+ + Wow in div (at **)
1006
+ + Bye in div (at **)"
1007
`);
1008
});
1009
@@ -1025,8 +1025,8 @@ describe('ReactInternalTestUtils console assertions', () => {
1025
- Hi
1026
- Wow
1027
- Bye
1028
- + Hi <component stack>
1029
- + Bye <component stack>"
1028
+ + Hi in div (at **)
1029
+ + Bye in div (at **)"
1030
`);
1031
});
1032
@@ -1048,8 +1048,8 @@ describe('ReactInternalTestUtils console assertions', () => {
1048
- Hi
1049
- Wow
1050
- Bye
1051
- + Hi <component stack>
1052
- + Wow <component stack>"
1051
+ + Hi in div (at **)
1052
+ + Wow in div (at **)"
1053
`);
1054
});
1055
@@ -1071,9 +1071,9 @@ describe('ReactInternalTestUtils console assertions', () => {
1071
1072
- Wow
1073
- Bye
1074
- + Hi <component stack>
1075
- + Wow <component stack>
1076
- + Bye <component stack>"
1074
+ + Hi in div (at **)
1075
+ + Wow in div (at **)
1076
+ + Bye in div (at **)"
1077
`);
1078
});
1079
@@ -1095,9 +1095,9 @@ describe('ReactInternalTestUtils console assertions', () => {
1095
1096
- Hi
1097
- Bye
1098
- + Hi <component stack>
1099
- + Wow <component stack>
1100
- + Bye <component stack>"
1098
+ + Hi in div (at **)
1099
+ + Wow in div (at **)
1100
+ + Bye in div (at **)"
1101
`);
1102
});
1103
@@ -1119,9 +1119,9 @@ describe('ReactInternalTestUtils console assertions', () => {
1119
1120
- Hi
1121
- Wow
1122
- + Hi <component stack>
1123
- + Wow <component stack>
1124
- + Bye <component stack>"
1122
+ + Hi in div (at **)
1123
+ + Wow in div (at **)
1124
+ + Bye in div (at **)"
1125
`);
1126
});
1127
@@ -1297,7 +1297,8 @@ describe('ReactInternalTestUtils console assertions', () => {
1297
"assertConsoleWarnDev(expected)
1298
1299
Unexpected component stack for:
1300
- "Hello <component stack>"
1300
+ "Hello
1301
+ in div (at **)"
1302
1303
If this warning should include a component stack, remove {withoutStack: true} from this warning.
1304
If all warnings should include the component stack, you may need to remove {withoutStack: true} from the assertConsoleWarnDev call."
@@ -1318,10 +1319,12 @@ describe('ReactInternalTestUtils console assertions', () => {
1319
"assertConsoleWarnDev(expected)
1320
1321
Unexpected component stack for:
1321
- "Hello <component stack>"
1322
+ "Hello
1323
+ in div (at **)"
1324
1325
Unexpected component stack for:
1324
- "Bye <component stack>"
1326
+ "Bye
1327
+ in div (at **)"
1328
1329
If this warning should include a component stack, remove {withoutStack: true} from this warning.
1330
If all warnings should include the component stack, you may need to remove {withoutStack: true} from the assertConsoleWarnDev call."
@@ -1444,7 +1447,8 @@ describe('ReactInternalTestUtils console assertions', () => {
1447
"assertConsoleWarnDev(expected)
1448
1449
Unexpected component stack for:
1447
- "Hello <component stack>"
1450
+ "Hello
1451
+ in div (at **)"
1452
1453
If this warning should include a component stack, remove {withoutStack: true} from this warning.
1454
If all warnings should include the component stack, you may need to remove {withoutStack: true} from the assertConsoleWarnDev call."
@@ -1477,10 +1481,12 @@ describe('ReactInternalTestUtils console assertions', () => {
1481
"assertConsoleWarnDev(expected)
1482
1483
Unexpected component stack for:
1480
- "Hello <component stack>"
1484
+ "Hello
1485
+ in div (at **)"
1486
1487
Unexpected component stack for:
1483
- "Bye <component stack>"
1488
+ "Bye
1489
+ in div (at **)"
1490
1491
If this warning should include a component stack, remove {withoutStack: true} from this warning.
1492
If all warnings should include the component stack, you may need to remove {withoutStack: true} from the assertConsoleWarnDev call."
@@ -1934,8 +1940,8 @@ describe('ReactInternalTestUtils console assertions', () => {
1940
- Hi
1941
- Wow
1942
- Bye
1937
- + Wow <component stack>
1938
- + Bye <component stack>"
1943
+ + Wow in div (at **)
1944
+ + Bye in div (at **)"
1945
`);
1946
});
1947
@@ -1957,8 +1963,8 @@ describe('ReactInternalTestUtils console assertions', () => {
1963
- Hi
1964
- Wow
1965
- Bye
1960
- + Hi <component stack>
1961
- + Bye <component stack>"
1966
+ + Hi in div (at **)
1967
+ + Bye in div (at **)"
1968
`);
1969
});
1970
@@ -1980,8 +1986,8 @@ describe('ReactInternalTestUtils console assertions', () => {
1986
- Hi
1987
- Wow
1988
- Bye
1983
- + Hi <component stack>
1984
- + Wow <component stack>"
1989
+ + Hi in div (at **)
1990
+ + Wow in div (at **)"
1991
`);
1992
});
1993
@@ -2003,9 +2009,9 @@ describe('ReactInternalTestUtils console assertions', () => {
2009
2010
- Wow
2011
- Bye
2006
- + Hi <component stack>
2007
- + Wow <component stack>
2008
- + Bye <component stack>"
2012
+ + Hi in div (at **)
2013
+ + Wow in div (at **)
2014
+ + Bye in div (at **)"
2015
`);
2016
});
2017
@@ -2027,9 +2033,9 @@ describe('ReactInternalTestUtils console assertions', () => {
2033
2034
- Hi
2035
- Bye
2030
- + Hi <component stack>
2031
- + Wow <component stack>
2032
- + Bye <component stack>"
2036
+ + Hi in div (at **)
2037
+ + Wow in div (at **)
2038
+ + Bye in div (at **)"
2039
`);
2040
});
2041
@@ -2051,9 +2057,9 @@ describe('ReactInternalTestUtils console assertions', () => {
2057
2058
- Hi
2059
- Wow
2054
- + Hi <component stack>
2055
- + Wow <component stack>
2056
- + Bye <component stack>"
2060
+ + Hi in div (at **)
2061
+ + Wow in div (at **)
2062
+ + Bye in div (at **)"
2063
`);
2064
});
2065
// @gate __DEV__
@@ -2170,7 +2176,7 @@ describe('ReactInternalTestUtils console assertions', () => {
2176
+ Received errors
2177
2178
- This is a completely different message that happens to start with "T"
2173
- + Message that happens to contain a "T" <component stack>"
2179
+ + Message that happens to contain a "T" in div (at **)"
2180
`);
2181
});
2182
@@ -2247,7 +2253,8 @@ describe('ReactInternalTestUtils console assertions', () => {
2253
"assertConsoleErrorDev(expected)
2254
2255
Unexpected component stack for:
2250
- "Hello <component stack>"
2256
+ "Hello
2257
+ in div (at **)"
2258
2259
If this error should include a component stack, remove {withoutStack: true} from this error.
2260
If all errors should include the component stack, you may need to remove {withoutStack: true} from the assertConsoleErrorDev call."
@@ -2268,10 +2275,12 @@ describe('ReactInternalTestUtils console assertions', () => {
2275
"assertConsoleErrorDev(expected)
2276
2277
Unexpected component stack for:
2271
- "Hello <component stack>"
2278
+ "Hello
2279
+ in div (at **)"
2280
2281
Unexpected component stack for:
2274
- "Bye <component stack>"
2282
+ "Bye
2283
+ in div (at **)"
2284
2285
If this error should include a component stack, remove {withoutStack: true} from this error.
2286
If all errors should include the component stack, you may need to remove {withoutStack: true} from the assertConsoleErrorDev call."
@@ -2394,7 +2403,8 @@ describe('ReactInternalTestUtils console assertions', () => {
2403
"assertConsoleErrorDev(expected)
2404
2405
Unexpected component stack for:
2397
- "Hello <component stack>"
2406
+ "Hello
2407
+ in div (at **)"
2408
2409
If this error should include a component stack, remove {withoutStack: true} from this error.
2410
If all errors should include the component stack, you may need to remove {withoutStack: true} from the assertConsoleErrorDev call."
@@ -2427,10 +2437,12 @@ describe('ReactInternalTestUtils console assertions', () => {
2437
"assertConsoleErrorDev(expected)
2438
2439
Unexpected component stack for:
2430
- "Hello <component stack>"
2440
+ "Hello
2441
+ in div (at **)"
2442
2443
Unexpected component stack for:
2433
- "Bye <component stack>"
2444
+ "Bye
2445
+ in div (at **)"
2446
2447
If this error should include a component stack, remove {withoutStack: true} from this error.
2448
If all errors should include the component stack, you may need to remove {withoutStack: true} from the assertConsoleErrorDev call."
@@ -2459,7 +2471,7 @@ describe('ReactInternalTestUtils console assertions', () => {
2471
+ Received errors
2472
2473
- Hello
2462
- + Bye <component stack>"
2474
+ + Bye in div (at **)"
2475
`);
2476
});
2477
});
packages/internal-test-utils/consoleMock.js
+11
-6
@@ -228,7 +228,7 @@ export function assertConsoleLogsCleared() {
228
}
229
}
230
231
-function replaceComponentStack(str) {
231
+function normalizeCodeLocInfo(str) {
232
if (typeof str !== 'string') {
233
return str;
234
}
@@ -239,8 +239,13 @@ function replaceComponentStack(str) {
239
// at Component (/path/filename.js:123:45)
240
// React format:
241
// in Component (at filename.js:123)
242
- return str.replace(/\n +(?:at|in) ([\S]+)[^\n]*.*/, function (m, name) {
243
- return chalk.dim(' <component stack>');
242
+ return str.replace(/\n +(?:at|in) ([\S]+)[^\n]*/g, function (m, name) {
243
+ if (name.endsWith('.render')) {
244
+ // Class components will have the `render` method as part of their stack trace.
245
+ // We strip that out in our normalization to make it look more like component stacks.
246
+ name = name.slice(0, name.length - 7);
247
+ }
248
+ return '\n in ' + name + ' (at **)';
249
});
250
}
251
@@ -382,11 +387,11 @@ export function createLogAssertion(
387
);
388
}
389
385
- expectedMessage = replaceComponentStack(currentExpectedMessage);
390
+ expectedMessage = normalizeCodeLocInfo(currentExpectedMessage);
391
expectedWithoutStack = expectedMessageOrArray[1].withoutStack;
392
} else if (typeof expectedMessageOrArray === 'string') {
393
// Should be in the form assert(['log']) or assert(['log'], {withoutStack: true})
389
- expectedMessage = replaceComponentStack(expectedMessageOrArray);
394
+ expectedMessage = normalizeCodeLocInfo(expectedMessageOrArray);
395
if (consoleMethod === 'log') {
396
expectedWithoutStack = true;
397
} else {
@@ -410,7 +415,7 @@ export function createLogAssertion(
415
);
416
}
417
413
- const normalizedMessage = replaceComponentStack(message);
418
+ const normalizedMessage = normalizeCodeLocInfo(message);
419
receivedLogs.push(normalizedMessage);
420
421
// Check the number of %s interpolations.