Use functionValue() for functions in complex data structures

src/formatter/formatComplexDataStructure.js

@@ -5,11 +5,10 @@ import stringify from 'stringify-object';
 import sortObject from './sortObject';
 import parseReactElement from './../parser/parseReactElement';
 import formatTreeNode from './formatTreeNode';
+import formatFunction from './formatFunction';
 import spacer from './spacer';
 import type { Options } from './../options';
 
-function noRefCheck() {}
-
 export default (
   value: Object | Array<any>,
   inline: boolean,
@@ -32,7 +31,7 @@ export default (
       }
 
       if (typeof currentValue === 'function') {
-        return noRefCheck;
+        return formatFunction(currentValue, options);
       }
 
       return originalResult;

src/formatter/formatComplexDataStructure.spec.js

@@ -102,4 +102,46 @@ describe('formatComplexDataStructure', () => {
       `{a: /test/g}`
     );
   });
+
+  it('should replace a function with noRefCheck', () => {
+    const fixture = {
+      a: function hello() {
+        return 1;
+      },
+    };
+
+    expect(formatComplexDataStructure(fixture, true, 0, options)).toEqual(
+      '{a: function noRefCheck() {}}'
+    );
+  });
+
+  it('should format a function', () => {
+    const fixture = {
+      a: function hello() {
+        return 1;
+      },
+    };
+
+    expect(
+      formatComplexDataStructure(fixture, true, 0, {
+        ...options,
+        showFunctions: true,
+      })
+    ).toEqual('{a: function hello() {return 1;}}');
+  });
+
+  it('should use the functionValue option', () => {
+    const fixture = {
+      a: function hello() {
+        return 1;
+      },
+    };
+
+    expect(
+      formatComplexDataStructure(fixture, true, 0, {
+        ...options,
+        functionValue: () => '<Test />',
+      })
+    ).toEqual('{a: <Test />}');
+  });
 });

src/formatter/formatFunction.js

@@ -0,0 +1,14 @@
+import type { Options } from './../options';
+
+function noRefCheck() {}
+
+const defaultFunctionValue = (fn: any): any => fn.toString();
+
+export default (fn: Function, options: Options): string => {
+  const { functionValue = defaultFunctionValue, showFunctions } = options;
+  if (!showFunctions && functionValue === defaultFunctionValue) {
+    return functionValue(noRefCheck);
+  }
+
+  return functionValue(fn);
+};

src/formatter/formatFunction.spec.js

@@ -0,0 +1,60 @@
+/* @flow */
+
+import formatFunction from './formatFunction';
+
+jest.mock('./formatReactElementNode.js', () => node =>
+  `<${node.displayName} />`
+);
+
+function hello() {
+  return 1;
+}
+
+describe('formatFunction', () => {
+  it('should replace a function with noRefCheck without showFunctions option', () => {
+    expect(formatFunction(hello, {})).toEqual('function noRefCheck() {}');
+  });
+
+  it('should replace a function with noRefCheck if showFunctions is false', () => {
+    expect(formatFunction(hello, { showFunctions: false })).toEqual(
+      'function noRefCheck() {}'
+    );
+  });
+
+  it('should format a function if showFunctions is true', () => {
+    expect(formatFunction(hello, { showFunctions: true }))
+      .toEqual(`function hello() {
+  return 1;
+}`);
+  });
+
+  it('should format a function without name if showFunctions is true', () => {
+    expect(formatFunction(() => 1, { showFunctions: true })).toEqual(
+      'function () {return 1;}'
+    );
+  });
+
+  it('should use the functionValue option', () => {
+    expect(formatFunction(hello, { functionValue: () => '<Test />' })).toEqual(
+      '<Test />'
+    );
+  });
+
+  it('should use the functionValue option even if showFunctions is true', () => {
+    expect(
+      formatFunction(hello, {
+        showFunctions: true,
+        functionValue: () => '<Test />',
+      })
+    ).toEqual('<Test />');
+  });
+
+  it('should use the functionValue option even if showFunctions is false', () => {
+    expect(
+      formatFunction(hello, {
+        showFunctions: false,
+        functionValue: () => '<Test />',
+      })
+    ).toEqual('<Test />');
+  });
+});

src/formatter/formatPropValue.js

@@ -3,15 +3,13 @@
 import isPlainObject from 'is-plain-object';
 import { isValidElement } from 'react';
 import formatComplexDataStructure from './formatComplexDataStructure';
+import formatFunction from './formatFunction';
 import formatTreeNode from './formatTreeNode';
 import type { Options } from './../options';
 import parseReactElement from './../parser/parseReactElement';
 
-const noRefCheck = () => {};
 const escape = (s: string): string => s.replace(/"/g, '"');
 
-const defaultFunctionValue = (fn: any): any => fn;
-
 const formatPropValue = (
   propValue: any,
   inline: boolean,
@@ -43,12 +41,7 @@ const formatPropValue = (
   }
 
   if (typeof propValue === 'function') {
-    const { functionValue = defaultFunctionValue, showFunctions } = options;
-    if (!showFunctions && functionValue === defaultFunctionValue) {
-      return `{${functionValue(noRefCheck)}}`;
-    }
-
-    return `{${functionValue(propValue)}}`;
+    return `{${formatFunction(propValue, options)}}`;
   }
 
   if (isValidElement(propValue)) {