fix(formatting): symbol description are now quoted

Closes #134

BREAKING CHANGE: Symbol description are now correctly quoted. This change the output if you use Symbol in your code

Author: armandabric

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') {

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', () => {

src/index.spec.js

@@ -131,7 +131,7 @@ describe('reactElementToJSXString(ReactElement)', () => {
       reactElementToJSXString(
         React.createElement('div', { title: Symbol('hello "you"') })
       )
-    ).toEqual('<div title={Symbol(hello "you")} />');
+    ).toEqual('<div title={Symbol(\'hello "you"\')} />');
   });
 
   it('reactElementToJSXString(<div/>)', () => {
@@ -660,7 +660,7 @@ describe('reactElementToJSXString(ReactElement)', () => {
 
   it('reactElementToJSXString(<div type={Symbol("test")}/>)', () => {
     expect(reactElementToJSXString(<div type={Symbol('test')} />)).toEqual(
-      '<div type={Symbol(test)} />'
+      "<div type={Symbol('test')} />"
     );
   });