diff --git a/code/renderers/react/src/docs/jsxDecorator.test.tsx b/code/renderers/react/src/docs/jsxDecorator.test.tsx
index 57b1f3d4f61e..c7d3aaaf02df 100644
--- a/code/renderers/react/src/docs/jsxDecorator.test.tsx
+++ b/code/renderers/react/src/docs/jsxDecorator.test.tsx
@@ -1,5 +1,5 @@
/* eslint-disable jsx-a11y/no-static-element-interactions, jsx-a11y/click-events-have-key-events */
-import React, { createElement, FC, PropsWithChildren } from 'react';
+import React, { createElement, FC, Profiler, PropsWithChildren } from 'react';
import PropTypes from 'prop-types';
import { addons, useEffect } from '@storybook/addons';
import { SNIPPET_RENDERED } from '@storybook/docs-tools';
@@ -137,6 +137,23 @@ describe('renderJsx', () => {
`);
});
+ it('Profiler', () => {
+ function ProfilerComponent(props: any) {
+ return (
+ {}}>
+ {props.children}
+
+ );
+ }
+
+ expect(renderJsx(createElement(ProfilerComponent, {}, 'I am Profiler'), {}))
+ .toMatchInlineSnapshot(`
+
+ I am Profiler
+
+ `);
+ });
+
it('should not add default props to string if the prop value has not changed', () => {
const Container = ({ className, children }: { className: string; children: string }) => {
return
{children}
;
diff --git a/code/renderers/react/src/docs/jsxDecorator.tsx b/code/renderers/react/src/docs/jsxDecorator.tsx
index 343c30de9d95..c12fd692296a 100644
--- a/code/renderers/react/src/docs/jsxDecorator.tsx
+++ b/code/renderers/react/src/docs/jsxDecorator.tsx
@@ -79,6 +79,7 @@ export const renderJsx = (code: React.ReactElement, options: JSXOptions) => {
// 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) ||
@@ -119,7 +120,7 @@ export const renderJsx = (code: React.ReactElement, options: JSXOptions) => {
return string;
}).join('\n');
- return result.replace(/function\s+noRefCheck\(\)\s+\{\}/, '() => {}');
+ return result.replace(/function\s+noRefCheck\(\)\s+\{\}/g, '() => {}');
};
const defaultOpts = {