Merge pull request #19785 from zhyd1997/refactor/ea45781-yadong-jsx-d…

…ecorator

Docs: Improve inherited 'react-element-to-jsx-string'

code/renderers/react/src/docs/jsxDecorator.test.tsx

@@ -1,6 +1,6 @@
 /* eslint-disable jsx-a11y/no-static-element-interactions, jsx-a11y/click-events-have-key-events */
 import type { FC, PropsWithChildren } from 'react';
-import React, { createElement, Profiler } from 'react';
+import React, { StrictMode, createElement, Profiler } from 'react';
 import PropTypes from 'prop-types';
 import { addons, useEffect } from '@storybook/preview-api';
 import { SNIPPET_RENDERED } from '@storybook/docs-tools';
@@ -155,6 +155,40 @@ describe('renderJsx', () => {
     `);
   });
 
+  it('StrictMode', () => {
+    function StrictModeComponent(props: any) {
+      return (
+        <StrictMode>
+          <div>{props.children}</div>
+        </StrictMode>
+      );
+    }
+
+    expect(renderJsx(createElement(StrictModeComponent, {}, 'I am StrictMode'), {}))
+      .toMatchInlineSnapshot(`
+        <StrictModeComponent>
+          I am StrictMode
+        </StrictModeComponent>
+      `);
+  });
+
+  it('Suspense', () => {
+    function SuspenseComponent(props: any) {
+      return (
+        <React.Suspense fallback={null}>
+          <div>{props.children}</div>
+        </React.Suspense>
+      );
+    }
+
+    expect(renderJsx(createElement(SuspenseComponent, {}, 'I am Suspense'), {}))
+      .toMatchInlineSnapshot(`
+      <SuspenseComponent>
+        I am Suspense
+      </SuspenseComponent>
+    `);
+  });
+
   it('should not add default props to string if the prop value has not changed', () => {
     const Container = ({ className, children }: { className: string; children: string }) => {
       return <div className={className}>{children}</div>;

code/renderers/react/src/docs/jsxDecorator.tsx

@@ -11,8 +11,6 @@ import { logger } from '@storybook/client-logger';
 
 import type { ReactRenderer } from '../types';
 
-import { isMemo, isForwardRef } from './lib';
-
 // Recursively remove "_owner" property from elements to avoid crash on docs page when passing components as an array prop (#17482)
 // Note: It may be better to use this function only in development environment.
 function simplifyNodeForStringify(node: ReactNode): ReactNode {
@@ -56,7 +54,7 @@ export const renderJsx = (code: React.ReactElement, options: JSXOptions) => {
   const Type = renderedJSX.type;
 
   // @ts-expect-error (Converted from ts-ignore)
-  for (let i = 0; i < options.skip; i += 1) {
+  for (let i = 0; i < options?.skip; i += 1) {
     if (typeof renderedJSX === 'undefined') {
       logger.warn('Cannot skip undefined element');
       return null;
@@ -80,21 +78,25 @@ export const renderJsx = (code: React.ReactElement, options: JSXOptions) => {
     }
   }
 
-  const displayNameDefaults =
-    typeof options.displayName === 'string'
-      ? { showFunctions: true, displayName: () => options.displayName }
-      : {
-          // To get exotic component names resolving properly
-          displayName: (el: any): string =>
-            el.type.displayName ||
-            (el.type === Symbol.for('react.profiler') ? 'Profiler' : null) ||
-            getDocgenSection(el.type, 'displayName') ||
-            (el.type.name !== '_default' ? el.type.name : null) ||
-            (typeof el.type === 'function' ? 'No Display Name' : null) ||
-            (isForwardRef(el.type) ? el.type.render.name : null) ||
-            (isMemo(el.type) ? el.type.type.name : null) ||
-            el.type,
-        };
+  let displayNameDefaults;
+
+  if (typeof options?.displayName === 'string') {
+    displayNameDefaults = { showFunctions: true, displayName: () => options.displayName };
+    /**
+     * add `renderedJSX?.type`to handle this case:
+     *
+     * https://github.com/zhyd1997/storybook/blob/20863a75ba4026d7eba6b288991a2cf091d4dfff/code/renderers/react/template/stories/errors.stories.tsx#L14
+     *
+     * or it show the error message when run `yarn build-storybook --quiet`:
+     *
+     * Cannot read properties of undefined (reading '__docgenInfo').
+     */
+  } else if (renderedJSX?.type && getDocgenSection(renderedJSX.type, 'displayName')) {
+    displayNameDefaults = {
+      // To get exotic component names resolving properly
+      displayName: (el: any): string => getDocgenSection(el.type, 'displayName'),
+    };
+  }
 
   const filterDefaults = {
     filterProps: (value: any, key: string): boolean => value !== undefined,