diff --git a/packages/react-devtools-shared/src/__tests__/utils-test.js b/packages/react-devtools-shared/src/__tests__/utils-test.js index 02bc6be4657a7..383274602a1ad 100644 --- a/packages/react-devtools-shared/src/__tests__/utils-test.js +++ b/packages/react-devtools-shared/src/__tests__/utils-test.js @@ -121,6 +121,21 @@ describe('utils', () => { expect(formatWithStyles(undefined)).toEqual(undefined); }); + it('should format non string inputs', () => { + expect(formatWithStyles([{foo: 'bar'}])).toEqual([{foo: 'bar'}]); + expect(formatWithStyles([[1, 2, 3]])).toEqual([[1, 2, 3]]); + expect(formatWithStyles([{foo: 'bar'}], 'color: gray')).toEqual([ + '%c%o', + 'color: gray', + {foo: 'bar'}, + ]); + expect(formatWithStyles([[1, 2, 3]], 'color: gray')).toEqual([ + '%c%o', + 'color: gray', + [1, 2, 3], + ]); + }); + it('should bail out of strings with styles', () => { expect( formatWithStyles(['%ca', 'color: green', 'b', 'c'], 'color: gray'), diff --git a/packages/react-devtools-shared/src/backend/utils.js b/packages/react-devtools-shared/src/backend/utils.js index 4a01b1804b9dd..5c4b1289855b2 100644 --- a/packages/react-devtools-shared/src/backend/utils.js +++ b/packages/react-devtools-shared/src/backend/utils.js @@ -190,7 +190,7 @@ export function formatWithStyles( // Matches any of %(o|O|d|i|s|f), but not %%(o|O|d|i|s|f) const REGEXP = /([^%]|^)((%%)*)(%([oOdisf]))/g; - if (inputArgs[0].match(REGEXP)) { + if (typeof inputArgs[0] === 'string' && inputArgs[0].match(REGEXP)) { return [`%c${inputArgs[0]}`, style, ...inputArgs.slice(1)]; } else { const firstArg = inputArgs.reduce((formatStr, elem, i) => {