-
-
- loaded data
-
-
- mockFn return value
-
+
+
+ loaded data
+
+
+ mockFn return value
diff --git a/code/renderers/react/src/docs/jsxDecorator.test.tsx b/code/renderers/react/src/docs/jsxDecorator.test.tsx
index bfb20fdd5f0d..6ed0f0eda179 100644
--- a/code/renderers/react/src/docs/jsxDecorator.test.tsx
+++ b/code/renderers/react/src/docs/jsxDecorator.test.tsx
@@ -1,3 +1,4 @@
+/* eslint-disable no-underscore-dangle */
import type { FC, PropsWithChildren } from 'react';
import React, { StrictMode, createElement, Profiler } from 'react';
import type { Mock } from 'vitest';
@@ -5,7 +6,7 @@ import { vi, describe, it, expect, beforeEach } from 'vitest';
import PropTypes from 'prop-types';
import { addons, useEffect } from '@storybook/preview-api';
import { SNIPPET_RENDERED } from '@storybook/docs-tools';
-import { renderJsx, jsxDecorator } from './jsxDecorator';
+import { renderJsx, jsxDecorator, getReactSymbolName } from './jsxDecorator';
vi.mock('@storybook/preview-api');
const mockedAddons = vi.mocked(addons);
@@ -16,6 +17,18 @@ expect.addSnapshotSerializer({
test: (val) => typeof val === 'string',
});
+describe('converts React Symbol to displayName string', () => {
+ const symbolCases = [
+ ['react.suspense', 'React.Suspense'],
+ ['react.strict_mode', 'React.StrictMode'],
+ ['react.server_context.defaultValue', 'React.ServerContext.DefaultValue'],
+ ];
+
+ it.each(symbolCases)('"%s" to "%s"', (symbol, expectedValue) => {
+ expect(getReactSymbolName(Symbol(symbol))).toEqual(expectedValue);
+ });
+});
+
describe('renderJsx', () => {
it('basic', () => {
expect(renderJsx(
hello
, {})).toMatchInlineSnapshot(`
@@ -139,53 +152,71 @@ describe('renderJsx', () => {
});
it('Profiler', () => {
- function ProfilerComponent({ children }: any) {
- return (
+ expect(
+ renderJsx(
{}}>
- {children}
-
- );
- }
-
- expect(renderJsx(createElement(ProfilerComponent, {}, 'I am Profiler'), {}))
- .toMatchInlineSnapshot(`
-
- I am Profiler
-
+
I am in a Profiler
+ ,
+ {}
+ )
+ ).toMatchInlineSnapshot(`
+
{}}
+ >
+
+ I am in a Profiler
+
+
`);
});
it('StrictMode', () => {
- function StrictModeComponent({ children }: any) {
- return (
-
- {children}
-
- );
+ expect(renderJsx(
I am StrictMode, {})).toMatchInlineSnapshot(`
+
+ I am StrictMode
+
+ `);
+ });
+
+ it('displayName coming from docgenInfo', () => {
+ function BasicComponent({ label }: any) {
+ return
;
}
+ BasicComponent.__docgenInfo = {
+ description: 'Some description',
+ methods: [],
+ displayName: 'Button',
+ props: {},
+ };
- expect(renderJsx(createElement(StrictModeComponent, {}, 'I am StrictMode'), {}))
- .toMatchInlineSnapshot(`
-
- I am StrictMode
-
- `);
+ expect(
+ renderJsx(
+ createElement(
+ BasicComponent,
+ {
+ label:
Abcd
,
+ },
+ undefined
+ )
+ )
+ ).toMatchInlineSnapshot(`