Added forwardRef fix for displayName

Author: Andrei Toma

src/index.spec.js

@@ -57,6 +57,27 @@ describe('reactElementToJSXString(ReactElement)', () => {
     delete AnonymousStatelessComponent.displayName;
   });
 
+  it('reactElementToJSXString forwardRef with a displayName', () => {
+    const createReactComponent = tagName => {
+      const createForwardRef = ReactComponent => {
+        const forwardRef = (props, ref) => {
+          return <ReactComponent {...props} forwardedRef={ref} />;
+        };
+        forwardRef.displayName = tagName;
+
+        return React.forwardRef(forwardRef);
+      };
+
+      return createForwardRef(React.createElement(tagName));
+    };
+
+    const MyComponent = createReactComponent('my-component');
+
+    expect(reactElementToJSXString(<MyComponent />)).toEqual(
+      '<my-component />'
+    );
+  });
+
   it("reactElementToJSXString(React.createElement('div'))", () => {
     expect(reactElementToJSXString(React.createElement('div'))).toEqual(
       '<div />'

src/parser/parseReactElement.js

@@ -2,6 +2,7 @@
 
 import React, { type Element as ReactElement, Fragment } from 'react';
 import type { Options } from './../options';
+import * as ReactIs from 'react-is';
 import {
   createStringTreeNode,
   createNumberTreeNode,
@@ -12,12 +13,16 @@ import type { TreeNode } from './../tree';
 
 const supportFragment = Boolean(Fragment);
 
-const getReactElementDisplayName = (element: ReactElement<*>): string =>
-  element.type.displayName ||
-  (element.type.name !== '_default' ? element.type.name : null) || // function name
-  (typeof element.type === 'function' // function without a name, you should provide one
-    ? 'No Display Name'
-    : element.type);
+const getReactElementDisplayName = (element: ReactElement<>): string => {
+  return (
+    element.type.displayName ||
+    (element.type.name !== '_default' ? element.type.name : null) || // function name
+    (ReactIs.isForwardRef(element) ? element.type.render.displayName : null) ||
+    (typeof element.type === 'function' // function without a name, you should provide one
+      ? 'No Display Name'
+      : element.type)
+  );
+};
 
 const noChildren = (propsValue, propName) => propName !== 'children';