DevTools console patching should handle Symbols without erroring (#21368)
Brian Vaughn committed
Apr 27, 2021 at 16:36 UTC
22ab39be681251f1c0f257af7e636cb8debf31c4
3 files changed
+20
-1
packages/react-devtools-shared/src/__tests__/console-test.js
+12
@@ -453,4 +453,16 @@ describe('console', () => {
453
'\n in Child (at **)\n in Intermediate (at **)\n in Parent (at **)',
454
);
455
});
456
+
457
+ it('should correctly log Symbols', () => {
458
+ const Component = ({children}) => {
459
+ fakeConsole.warn('Symbol:', Symbol(''));
460
+ return null;
461
+ };
462
+
463
+ act(() => ReactDOM.render(<Component />, document.createElement('div')));
464
+
465
+ expect(mockWarn).toHaveBeenCalledTimes(1);
466
+ expect(mockWarn.mock.calls[0][0]).toBe('Symbol:');
467
+ });
468
});
packages/react-devtools-shared/src/backend/console.js
+1
-1
@@ -144,7 +144,7 @@ export function patch({
144
if (consoleSettingsRef.appendComponentStack) {
145
const lastArg = args.length > 0 ? args[args.length - 1] : null;
146
const alreadyHasComponentStack =
147
- lastArg !== null && isStringComponentStack(lastArg);
147
+ typeof lastArg === 'string' && isStringComponentStack(lastArg);
148
149
// If we are ever called with a string that already has a component stack,
150
// e.g. a React error/warning, don't append a second stack.
packages/react-devtools-shell/src/app/InlineWarnings/index.js
+7
@@ -149,6 +149,12 @@ function ComponentWithMissingKey({children}) {
149
return [<div />];
150
}
151
152
+function ComponentWithSymbolWarning() {
153
+ console.warn('this is a symbol', Symbol('foo'));
154
+ console.error('this is a symbol', Symbol.for('bar'));
155
+ return null;
156
+}
157
+
158
export default function ErrorsAndWarnings() {
159
const [count, setCount] = useState(0);
160
const handleClick = () => setCount(count + 1);
@@ -176,6 +182,7 @@ export default function ErrorsAndWarnings() {
182
<ReallyLongErrorMessageThatWillCauseTextToBeTruncated />
183
<DuplicateWarningsAndErrors />
184
<MultipleWarningsAndErrors />
185
+ <ComponentWithSymbolWarning />
186
</Fragment>
187
);
188
}