diff --git a/src/formatter/formatPropValue.js b/src/formatter/formatPropValue.js index 9fade670a..93879ba07 100644 --- a/src/formatter/formatPropValue.js +++ b/src/formatter/formatPropValue.js @@ -30,7 +30,16 @@ const formatPropValue = ( // @see: https://flow.org/en/docs/types/primitives/ // $FlowFixMe: Flow does not support Symbol if (typeof propValue === 'symbol') { - return `{${String(propValue)}}`; + const symbolDescription = propValue + .valueOf() + .toString() + .replace(/Symbol\((.*)\)/, '$1'); + + if (!symbolDescription) { + return `{Symbol()}`; + } + + return `{Symbol('${symbolDescription}')}`; } if (typeof propValue === 'function') { diff --git a/src/formatter/formatPropValue.spec.js b/src/formatter/formatPropValue.spec.js index 8f719a86a..62dfb8b37 100644 --- a/src/formatter/formatPropValue.spec.js +++ b/src/formatter/formatPropValue.spec.js @@ -30,7 +30,12 @@ describe('formatPropValue', () => { }); it('should format a symbol prop value', () => { - expect(formatPropValue(Symbol('Foo'), false, 0, {})).toBe('{Symbol(Foo)}'); + expect(formatPropValue(Symbol('Foo'), false, 0, {})).toBe( + "{Symbol('Foo')}" + ); + + // eslint-disable-next-line symbol-description + expect(formatPropValue(Symbol(), false, 0, {})).toBe('{Symbol()}'); }); it('should replace a function prop value by a an empty generic function by default', () => { diff --git a/src/index.spec.js b/src/index.spec.js index 62944985b..695d8851b 100644 --- a/src/index.spec.js +++ b/src/index.spec.js @@ -131,7 +131,7 @@ describe('reactElementToJSXString(ReactElement)', () => { reactElementToJSXString( React.createElement('div', { title: Symbol('hello "you"') }) ) - ).toEqual('
'); + ).toEqual('
'); }); it('reactElementToJSXString(
)', () => { @@ -660,7 +660,7 @@ describe('reactElementToJSXString(ReactElement)', () => { it('reactElementToJSXString(
)', () => { expect(reactElementToJSXString(
)).toEqual( - '
' + "
" ); });