Merge pull request #26592 from storybookjs/yann/fix-forward-ref-docge…

…n-usecase Addon Docs: Support Stencil based display names in source snippets
storybookjs · Mar 21, 2024 · d7db290 · d7db290
2 parents 7b9e094 + df17ee6
commit d7db290
Show file tree

Hide file tree

Showing 2 changed files with 45 additions and 18 deletions.
diff --git a/code/renderers/react/src/docs/jsxDecorator.test.tsx b/code/renderers/react/src/docs/jsxDecorator.test.tsx
@@ -123,30 +123,55 @@ describe('renderJsx', () => {
     `);
   });
 
-  it('forwardRef component', () => {
-    const MyExoticComponentRef = React.forwardRef<FC, PropsWithChildren>(
-      function MyExoticComponent(props, _ref) {
-        return <div>{props.children}</div>;
-      }
-    );
+  describe('forwardRef component', () => {
+    it('with no displayName', () => {
+      const MyExoticComponentRef = React.forwardRef<FC, PropsWithChildren>(
+        function MyExoticComponent(props, _ref) {
+          return <div>{props.children}</div>;
+        }
+      );
+
+      expect(renderJsx(<MyExoticComponentRef>I am forwardRef!</MyExoticComponentRef>))
+        .toMatchInlineSnapshot(`
+          <React.ForwardRef>
+            I am forwardRef!
+          </React.ForwardRef>
+        `);
+    });
 
-    expect(renderJsx(<MyExoticComponentRef>I am forwardRef!</MyExoticComponentRef>))
-      .toMatchInlineSnapshot(`
-        <React.ForwardRef>
-          I am forwardRef!
-        </React.ForwardRef>
-      `);
+    it('with displayName coming from docgen', () => {
+      const MyExoticComponentRef = React.forwardRef<FC, PropsWithChildren>(
+        function MyExoticComponent(props, _ref) {
+          return <div>{props.children}</div>;
+        }
+      );
+      (MyExoticComponentRef as any).__docgenInfo = {
+        displayName: 'ExoticComponent',
+      };
+      expect(renderJsx(<MyExoticComponentRef>I am forwardRef!</MyExoticComponentRef>))
+        .toMatchInlineSnapshot(`
+          <ExoticComponent>
+            I am forwardRef!
+          </ExoticComponent>
+        `);
+    });
 
-    // if docgenInfo is present, it should use the displayName from there
-    (MyExoticComponentRef as any).__docgenInfo = {
-      displayName: 'ExoticComponent',
-    };
-    expect(renderJsx(<MyExoticComponentRef>I am forwardRef!</MyExoticComponentRef>))
-      .toMatchInlineSnapshot(`
+    it('with displayName coming from forwarded render function', () => {
+      const MyExoticComponentRef = React.forwardRef<FC, PropsWithChildren>(
+        Object.assign(
+          function MyExoticComponent(props: any, _ref: any) {
+            return <div>{props.children}</div>;
+          },
+          { displayName: 'ExoticComponent' }
+        )
+      );
+      expect(renderJsx(<MyExoticComponentRef>I am forwardRef!</MyExoticComponentRef>))
+        .toMatchInlineSnapshot(`
         <ExoticComponent>
           I am forwardRef!
         </ExoticComponent>
       `);
+    });
   });
 
   it('memo component', () => {

diff --git a/code/renderers/react/src/docs/jsxDecorator.tsx b/code/renderers/react/src/docs/jsxDecorator.tsx
@@ -130,6 +130,8 @@ export const renderJsx = (code: React.ReactElement, options?: JSXOptions) => {
           return el.type.displayName;
         } else if (getDocgenSection(el.type, 'displayName')) {
           return getDocgenSection(el.type, 'displayName');
+        } else if (el.type.render?.displayName) {
+          return el.type.render.displayName;
         } else if (
           typeof el.type === 'symbol' ||
           (el.type.$$typeof && typeof el.type.$$typeof === 'symbol')