refactor: rename qrcode to qr-code (#43607)

* refactor: rename qrcode to qr-code

* test: patch test case

* chore: fix Form missing displayName

* chore: patch displayName

* chore: style path

* chore: fix compile

components/auto-complete/index.tsx

@@ -168,6 +168,7 @@ const RefAutoComplete = React.forwardRef<RefSelectProps, AutoCompleteProps>(
     ref?: React.Ref<BaseSelectRef>;
   },
 ) => React.ReactElement) & {
+  displayName?: string;
   Option: typeof Option;
   _InternalPanelDoNotUseOrYouWillBeFired: typeof PurePanel;
 };
@@ -180,7 +181,7 @@ RefAutoComplete.Option = Option;
 RefAutoComplete._InternalPanelDoNotUseOrYouWillBeFired = PurePanel;
 
 if (process.env.NODE_ENV !== 'production') {
-  AutoComplete.displayName = 'AutoComplete';
+  RefAutoComplete.displayName = 'AutoComplete';
 }
 
 export default RefAutoComplete;

components/back-top/index.tsx

@@ -121,4 +121,4 @@ if (process.env.NODE_ENV !== 'production') {
   BackTop.displayName = 'BackTop';
 }
 
-export default React.memo(BackTop);
+export default BackTop;

components/date-picker/generatePicker/generateRangePicker.tsx

@@ -146,5 +146,9 @@ export default function generateRangePicker<DateType>(generateConfig: GenerateCo
     );
   });
 
+  if (process.env.NODE_ENV !== 'production') {
+    RangePicker.displayName = 'RangePicker';
+  }
+
   return RangePicker as unknown as PickerComponentClass<DateRangePickerProps>;
 }

components/date-picker/generatePicker/index.tsx

@@ -17,7 +17,7 @@ import generateRangePicker from './generateRangePicker';
 import generateSinglePicker from './generateSinglePicker';
 
 const DataPickerPlacements = ['bottomLeft', 'bottomRight', 'topLeft', 'topRight'] as const;
-type DataPickerPlacement = (typeof DataPickerPlacements)[number];
+type DataPickerPlacement = typeof DataPickerPlacements[number];
 
 type InjectDefaultProps<Props> = Omit<
   Props,
@@ -85,6 +85,7 @@ function generatePicker<DateType>(generateConfig: GenerateConfig<DateType>) {
 
   // =========================== Export ===========================
   type MergedDatePickerType = typeof DatePicker & {
+    displayName?: string;
     WeekPicker: typeof WeekPicker;
     MonthPicker: typeof MonthPicker;
     YearPicker: typeof YearPicker;
@@ -101,6 +102,10 @@ function generatePicker<DateType>(generateConfig: GenerateConfig<DateType>) {
   MergedDatePicker.TimePicker = TimePicker;
   MergedDatePicker.QuarterPicker = QuarterPicker;
 
+  if (process.env.NODE_ENV !== 'production') {
+    MergedDatePicker.displayName = 'DatePicker';
+  }
+
   return MergedDatePicker;
 }
 

components/float-button/FloatButton.tsx

@@ -101,13 +101,13 @@ const FloatButton: React.ForwardRefRenderFunction<
   );
 };
 
-if (process.env.NODE_ENV !== 'production') {
-  FloatButton.displayName = 'FloatButton';
-}
-
 const ForwardFloatButton = React.forwardRef<
   HTMLAnchorElement | HTMLButtonElement,
   FloatButtonProps
 >(FloatButton) as CompoundedComponent;
 
+if (process.env.NODE_ENV !== 'production') {
+  ForwardFloatButton.displayName = 'FloatButton';
+}
+
 export default ForwardFloatButton;

components/form/Form.tsx

@@ -186,9 +186,13 @@ const InternalForm: React.ForwardRefRenderFunction<FormInstance, FormProps> = (p
   );
 };
 
-const Form = React.forwardRef<FormInstance, FormProps>(InternalForm) as <Values = any>(
+const Form = React.forwardRef<FormInstance, FormProps>(InternalForm) as (<Values = any>(
   props: React.PropsWithChildren<FormProps<Values>> & { ref?: React.Ref<FormInstance<Values>> },
-) => React.ReactElement;
+) => React.ReactElement) & { displayName?: string };
+
+if (process.env.NODE_ENV !== 'production') {
+  Form.displayName = 'Form';
+}
 
 export { List, useForm, useWatch, type FormInstance };
 

components/grid/__tests__/demo.test.ts

@@ -2,4 +2,5 @@ import demoTest from '../../../tests/shared/demoTest';
 
 demoTest('grid', {
   testRootProps: false,
+  nameCheckPathOnly: true,
 });

components/icon/__tests__/demo.test.ts

@@ -2,4 +2,5 @@ import demoTest from '../../../tests/shared/demoTest';
 
 demoTest('icon', {
   testRootProps: false,
+  nameCheckPathOnly: true,
 });

components/index.ts

@@ -95,8 +95,8 @@ export { default as Popover } from './popover';
 export type { PopoverProps } from './popover';
 export { default as Progress } from './progress';
 export type { ProgressProps } from './progress';
-export { default as QRCode } from './qrcode';
-export type { QRCodeProps, QRPropsCanvas, QRPropsSvg } from './qrcode/interface';
+export { default as QRCode } from './qr-code';
+export type { QRCodeProps, QRPropsCanvas, QRPropsSvg } from './qr-code/interface';
 export { default as Radio } from './radio';
 export type { RadioChangeEvent, RadioGroupProps, RadioProps } from './radio';
 export { default as Rate } from './rate';

components/message/__tests__/demo.test.ts

@@ -2,4 +2,5 @@ import demoTest from '../../../tests/shared/demoTest';
 
 demoTest('message', {
   testRootProps: false,
+  nameCheckPathOnly: true,
 });

components/notification/__tests__/demo.test.ts

@@ -2,4 +2,5 @@ import demoTest from '../../../tests/shared/demoTest';
 
 demoTest('notification', {
   testRootProps: false,
+  nameCheckPathOnly: true,
 });

components/qr-code/__tests__/__snapshots__/demo-extend.test.ts.snap

@@ -1,6 +1,6 @@
 // Jest Snapshot v1, https://goo.gl/fbAQLP
 
-exports[`renders components/qrcode/demo/Popover.tsx extend context correctly 1`] = `
+exports[`renders components/qr-code/demo/Popover.tsx extend context correctly 1`] = `
 Array [
   <img
     alt="icon"
@@ -44,7 +44,7 @@ Array [
 ]
 `;
 
-exports[`renders components/qrcode/demo/base.tsx extend context correctly 1`] = `
+exports[`renders components/qr-code/demo/base.tsx extend context correctly 1`] = `
 <div
   class="ant-space ant-space-vertical ant-space-align-center"
 >
@@ -77,7 +77,7 @@ exports[`renders components/qrcode/demo/base.tsx extend context correctly 1`] =
 </div>
 `;
 
-exports[`renders components/qrcode/demo/customColor.tsx extend context correctly 1`] = `
+exports[`renders components/qr-code/demo/customColor.tsx extend context correctly 1`] = `
 <div
   class="ant-space ant-space-horizontal ant-space-align-center"
 >
@@ -113,7 +113,7 @@ exports[`renders components/qrcode/demo/customColor.tsx extend context correctly
 </div>
 `;
 
-exports[`renders components/qrcode/demo/customSize.tsx extend context correctly 1`] = `
+exports[`renders components/qr-code/demo/customSize.tsx extend context correctly 1`] = `
 Array [
   <div
     class="ant-btn-group"
@@ -205,7 +205,7 @@ Array [
 ]
 `;
 
-exports[`renders components/qrcode/demo/download.tsx extend context correctly 1`] = `
+exports[`renders components/qr-code/demo/download.tsx extend context correctly 1`] = `
 <div
   id="myqrcode"
 >
@@ -230,7 +230,7 @@ exports[`renders components/qrcode/demo/download.tsx extend context correctly 1`
 </div>
 `;
 
-exports[`renders components/qrcode/demo/errorlevel.tsx extend context correctly 1`] = `
+exports[`renders components/qr-code/demo/errorlevel.tsx extend context correctly 1`] = `
 Array [
   <div
     class="ant-qrcode"
@@ -310,7 +310,7 @@ Array [
 ]
 `;
 
-exports[`renders components/qrcode/demo/icon.tsx extend context correctly 1`] = `
+exports[`renders components/qr-code/demo/icon.tsx extend context correctly 1`] = `
 <div
   class="ant-qrcode"
   style="width: 160px; height: 160px; background-color: transparent;"
@@ -327,7 +327,7 @@ exports[`renders components/qrcode/demo/icon.tsx extend context correctly 1`] =
 </div>
 `;
 
-exports[`renders components/qrcode/demo/status.tsx extend context correctly 1`] = `
+exports[`renders components/qr-code/demo/status.tsx extend context correctly 1`] = `
 <div
   class="ant-space ant-space-horizontal ant-space-align-center"
   style="flex-wrap: wrap; margin-bottom: -8px;"
@@ -431,7 +431,7 @@ exports[`renders components/qrcode/demo/status.tsx extend context correctly 1`]
 </div>
 `;
 
-exports[`renders components/qrcode/demo/type.tsx extend context correctly 1`] = `
+exports[`renders components/qr-code/demo/type.tsx extend context correctly 1`] = `
 <div
   class="ant-space ant-space-horizontal ant-space-align-center"
 >

components/qr-code/__tests__/__snapshots__/demo.test.ts.snap

@@ -1,6 +1,6 @@
 // Jest Snapshot v1, https://goo.gl/fbAQLP
 
-exports[`renders components/qrcode/demo/Popover.tsx correctly 1`] = `
+exports[`renders components/qr-code/demo/Popover.tsx correctly 1`] = `
 <img
   alt="icon"
   height="100"
@@ -9,7 +9,7 @@ exports[`renders components/qrcode/demo/Popover.tsx correctly 1`] = `
 />
 `;
 
-exports[`renders components/qrcode/demo/base.tsx correctly 1`] = `
+exports[`renders components/qr-code/demo/base.tsx correctly 1`] = `
 <div
   class="ant-space ant-space-vertical ant-space-align-center"
 >
@@ -42,7 +42,7 @@ exports[`renders components/qrcode/demo/base.tsx correctly 1`] = `
 </div>
 `;
 
-exports[`renders components/qrcode/demo/customColor.tsx correctly 1`] = `
+exports[`renders components/qr-code/demo/customColor.tsx correctly 1`] = `
 <div
   class="ant-space ant-space-horizontal ant-space-align-center"
 >
@@ -78,7 +78,7 @@ exports[`renders components/qrcode/demo/customColor.tsx correctly 1`] = `
 </div>
 `;
 
-exports[`renders components/qrcode/demo/customSize.tsx correctly 1`] = `
+exports[`renders components/qr-code/demo/customSize.tsx correctly 1`] = `
 Array [
   <div
     class="ant-btn-group"
@@ -170,7 +170,7 @@ Array [
 ]
 `;
 
-exports[`renders components/qrcode/demo/download.tsx correctly 1`] = `
+exports[`renders components/qr-code/demo/download.tsx correctly 1`] = `
 <div
   id="myqrcode"
 >
@@ -195,7 +195,7 @@ exports[`renders components/qrcode/demo/download.tsx correctly 1`] = `
 </div>
 `;
 
-exports[`renders components/qrcode/demo/errorlevel.tsx correctly 1`] = `
+exports[`renders components/qr-code/demo/errorlevel.tsx correctly 1`] = `
 Array [
   <div
     class="ant-qrcode"
@@ -275,7 +275,7 @@ Array [
 ]
 `;
 
-exports[`renders components/qrcode/demo/icon.tsx correctly 1`] = `
+exports[`renders components/qr-code/demo/icon.tsx correctly 1`] = `
 <div
   class="ant-qrcode"
   style="width:160px;height:160px;background-color:transparent"
@@ -292,7 +292,7 @@ exports[`renders components/qrcode/demo/icon.tsx correctly 1`] = `
 </div>
 `;
 
-exports[`renders components/qrcode/demo/status.tsx correctly 1`] = `
+exports[`renders components/qr-code/demo/status.tsx correctly 1`] = `
 <div
   class="ant-space ant-space-horizontal ant-space-align-center"
   style="flex-wrap:wrap;margin-bottom:-8px"
@@ -396,7 +396,7 @@ exports[`renders components/qrcode/demo/status.tsx correctly 1`] = `
 </div>
 `;
 
-exports[`renders components/qrcode/demo/type.tsx correctly 1`] = `
+exports[`renders components/qr-code/demo/type.tsx correctly 1`] = `
 <div
   class="ant-space ant-space-horizontal ant-space-align-center"
 >

components/qr-code/__tests__/demo-extend.test.ts

@@ -1,3 +1,3 @@
 import { extendTest } from '../../../tests/shared/demoTest';
 
-extendTest('qrcode');
+extendTest('qr-code');

components/qr-code/__tests__/demo.test.ts

@@ -1,3 +1,3 @@
 import demoTest from '../../../tests/shared/demoTest';
 
-demoTest('qrcode');
+demoTest('qr-code');

components/qr-code/__tests__/image.test.ts

@@ -1,5 +1,5 @@
 import { imageDemoTest } from '../../../tests/shared/imageTest';
 
 describe('QRCode image', () => {
-  imageDemoTest('qrcode');
+  imageDemoTest('qr-code');
 });

components/qr-code/interface.ts

@@ -0,0 +1,37 @@
+import type { CSSProperties } from 'react';
+
+interface ImageSettings {
+  src: string;
+  height: number;
+  width: number;
+  excavate: boolean;
+  x?: number;
+  y?: number;
+}
+
+export interface QRProps {
+  value: string;
+  type?: 'canvas' | 'svg';
+  size?: number;
+  color?: string;
+  style?: CSSProperties;
+  includeMargin?: boolean;
+  imageSettings?: ImageSettings;
+  bgColor?: string;
+}
+
+export type QRPropsCanvas = QRProps & React.CanvasHTMLAttributes<HTMLCanvasElement>;
+
+export type QRPropsSvg = QRProps & React.SVGAttributes<SVGSVGElement>;
+
+export interface QRCodeProps extends QRProps {
+  className?: string;
+  rootClassName?: string;
+  prefixCls?: string;
+  icon?: string;
+  iconSize?: number;
+  bordered?: boolean;
+  errorLevel?: 'L' | 'M' | 'Q' | 'H';
+  status?: 'active' | 'expired' | 'loading';
+  onRefresh?: () => void;
+}

components/qr-code/style/index.ts

@@ -0,0 +1,65 @@
+import { resetComponent } from '../../style';
+import type { FullToken, GenerateStyle } from '../../theme/internal';
+import { genComponentStyleHook, mergeToken } from '../../theme/internal';
+
+export interface ComponentToken {}
+
+interface QRCodeToken extends FullToken<'QRCode'> {
+  QRCodeExpiredTextColor: string;
+  QRCodeMaskBackgroundColor: string;
+}
+
+const genQRCodeStyle: GenerateStyle<QRCodeToken> = (token) => {
+  const { componentCls } = token;
+  return {
+    [componentCls]: {
+      ...resetComponent(token),
+      display: 'flex',
+      justifyContent: 'center',
+      alignItems: 'center',
+      padding: token.paddingSM,
+      backgroundColor: token.colorWhite,
+      borderRadius: token.borderRadiusLG,
+      border: `${token.lineWidth}px ${token.lineType} ${token.colorSplit}`,
+      position: 'relative',
+      width: '100%',
+      height: '100%',
+      overflow: 'hidden',
+      [`& > ${componentCls}-mask`]: {
+        position: 'absolute',
+        insetBlockStart: 0,
+        insetInlineStart: 0,
+        zIndex: 10,
+        display: 'flex',
+        flexDirection: 'column',
+        justifyContent: 'center',
+        alignItems: 'center',
+        width: '100%',
+        height: '100%',
+        color: token.colorText,
+        lineHeight: token.lineHeight,
+        background: token.QRCodeMaskBackgroundColor,
+        textAlign: 'center',
+        [`& > ${componentCls}-expired`]: {
+          color: token.QRCodeExpiredTextColor,
+        },
+      },
+      '&-icon': {
+        marginBlockEnd: token.marginXS,
+        fontSize: token.controlHeight,
+      },
+    },
+    [`${componentCls}-borderless`]: {
+      borderColor: 'transparent',
+    },
+  };
+};
+
+export default genComponentStyleHook<'QRCode'>('QRCode', (token) =>
+  genQRCodeStyle(
+    mergeToken<QRCodeToken>(token, {
+      QRCodeExpiredTextColor: 'rgba(0, 0, 0, 0.88)',
+      QRCodeMaskBackgroundColor: 'rgba(255, 255, 255, 0.96)',
+    }),
+  ),
+);

components/qrcode/index.ts

@@ -0,0 +1,5 @@
+// Legacy path. Please use `qr-code` instead.
+// Keep file here in case developer import directly from the old path.
+import QRCode from '../qr-code';
+
+export default QRCode;

components/qrcode/interface.ts

@@ -1,37 +1,3 @@
-import type { CSSProperties } from 'react';
-
-interface ImageSettings {
-  src: string;
-  height: number;
-  width: number;
-  excavate: boolean;
-  x?: number;
-  y?: number;
-}
-
-export interface QRProps {
-  value: string;
-  type?: 'canvas' | 'svg';
-  size?: number;
-  color?: string;
-  style?: CSSProperties;
-  includeMargin?: boolean;
-  imageSettings?: ImageSettings;
-  bgColor?: string;
-}
-
-export type QRPropsCanvas = QRProps & React.CanvasHTMLAttributes<HTMLCanvasElement>;
-
-export type QRPropsSvg = QRProps & React.SVGAttributes<SVGSVGElement>;
-
-export interface QRCodeProps extends QRProps {
-  className?: string;
-  rootClassName?: string;
-  prefixCls?: string;
-  icon?: string;
-  iconSize?: number;
-  bordered?: boolean;
-  errorLevel?: 'L' | 'M' | 'Q' | 'H';
-  status?: 'active' | 'expired' | 'loading';
-  onRefresh?: () => void;
-}
+// Legacy path. Please use `qr-code` instead.
+// Keep file here in case developer import directly from the old path.
+export * from '../qr-code/interface';

components/qrcode/style/index.ts

@@ -1,65 +1,3 @@
-import { resetComponent } from '../../style';
-import type { FullToken, GenerateStyle } from '../../theme/internal';
-import { genComponentStyleHook, mergeToken } from '../../theme/internal';
-
-export interface ComponentToken {}
-
-interface QRCodeToken extends FullToken<'QRCode'> {
-  QRCodeExpiredTextColor: string;
-  QRCodeMaskBackgroundColor: string;
-}
-
-const genQRCodeStyle: GenerateStyle<QRCodeToken> = (token) => {
-  const { componentCls } = token;
-  return {
-    [componentCls]: {
-      ...resetComponent(token),
-      display: 'flex',
-      justifyContent: 'center',
-      alignItems: 'center',
-      padding: token.paddingSM,
-      backgroundColor: token.colorWhite,
-      borderRadius: token.borderRadiusLG,
-      border: `${token.lineWidth}px ${token.lineType} ${token.colorSplit}`,
-      position: 'relative',
-      width: '100%',
-      height: '100%',
-      overflow: 'hidden',
-      [`& > ${componentCls}-mask`]: {
-        position: 'absolute',
-        insetBlockStart: 0,
-        insetInlineStart: 0,
-        zIndex: 10,
-        display: 'flex',
-        flexDirection: 'column',
-        justifyContent: 'center',
-        alignItems: 'center',
-        width: '100%',
-        height: '100%',
-        color: token.colorText,
-        lineHeight: token.lineHeight,
-        background: token.QRCodeMaskBackgroundColor,
-        textAlign: 'center',
-        [`& > ${componentCls}-expired`]: {
-          color: token.QRCodeExpiredTextColor,
-        },
-      },
-      '&-icon': {
-        marginBlockEnd: token.marginXS,
-        fontSize: token.controlHeight,
-      },
-    },
-    [`${componentCls}-borderless`]: {
-      borderColor: 'transparent',
-    },
-  };
-};
-
-export default genComponentStyleHook<'QRCode'>('QRCode', (token) =>
-  genQRCodeStyle(
-    mergeToken<QRCodeToken>(token, {
-      QRCodeExpiredTextColor: 'rgba(0, 0, 0, 0.88)',
-      QRCodeMaskBackgroundColor: 'rgba(255, 255, 255, 0.96)',
-    }),
-  ),
-);
+// Legacy path. Please use `qr-code` instead.
+// Keep file here in case developer import directly from the old path.
+export * from '../../qr-code/style';

components/select/index.tsx

@@ -275,6 +275,7 @@ const Select = React.forwardRef(InternalSelect) as unknown as (<
     ref?: React.Ref<BaseSelectRef>;
   },
 ) => React.ReactElement) & {
+  displayName?: string;
   SECRET_COMBOBOX_MODE_DO_NOT_USE: string;
   Option: typeof Option;
   OptGroup: typeof OptGroup;
@@ -290,4 +291,8 @@ Select.Option = Option;
 Select.OptGroup = OptGroup;
 Select._InternalPanelDoNotUseOrYouWillBeFired = PurePanel;
 
+if (process.env.NODE_ENV !== 'production') {
+  Select.displayName = 'Select';
+}
+
 export default Select;

components/table/Table.tsx

@@ -23,6 +23,7 @@ const Table = <RecordType extends AnyObject = AnyObject>(
 };
 
 const ForwardTable = React.forwardRef(Table) as unknown as RefTable & {
+  displayName?: string;
   SELECTION_COLUMN: typeof SELECTION_COLUMN;
   EXPAND_COLUMN: typeof EXPAND_COLUMN;
   SELECTION_ALL: typeof SELECTION_ALL;
@@ -42,4 +43,8 @@ ForwardTable.Column = Column;
 ForwardTable.ColumnGroup = ColumnGroup;
 ForwardTable.Summary = Summary;
 
+if (process.env.NODE_ENV !== 'production') {
+  ForwardTable.displayName = 'Table';
+}
+
 export default ForwardTable;

components/theme/interface/components.ts

@@ -33,7 +33,7 @@ import type { ComponentToken as PaginationComponentToken } from '../../paginatio
 import type { ComponentToken as PopconfirmComponentToken } from '../../popconfirm/style';
 import type { ComponentToken as PopoverComponentToken } from '../../popover/style';
 import type { ComponentToken as ProgressComponentToken } from '../../progress/style';
-import type { ComponentToken as QRCodeComponentToken } from '../../qrcode/style';
+import type { ComponentToken as QRCodeComponentToken } from '../../qr-code/style';
 import type { ComponentToken as RadioComponentToken } from '../../radio/style';
 import type { ComponentToken as RateComponentToken } from '../../rate/style';
 import type { ComponentToken as ResultComponentToken } from '../../result/style';

components/tree-select/index.tsx

@@ -292,6 +292,7 @@ const TreeSelectRef = React.forwardRef(InternalTreeSelect) as <
 type InternalTreeSelectType = typeof TreeSelectRef;
 
 type CompoundedComponent = InternalTreeSelectType & {
+  displayName?: string;
   TreeNode: typeof TreeNode;
   SHOW_ALL: typeof SHOW_ALL;
   SHOW_PARENT: typeof SHOW_PARENT;
@@ -311,6 +312,10 @@ TreeSelect.SHOW_PARENT = SHOW_PARENT;
 TreeSelect.SHOW_CHILD = SHOW_CHILD;
 TreeSelect._InternalPanelDoNotUseOrYouWillBeFired = PurePanel;
 
+if (process.env.NODE_ENV !== 'production') {
+  TreeSelect.displayName = 'TreeSelect';
+}
+
 export { TreeNode };
 
 export default TreeSelect;

scripts/generate-cssinjs.ts

@@ -13,7 +13,7 @@ interface GenCssinjsOptions {
 export const styleFiles = globSync(
   path.join(
     process.cwd(),
-    'components/!(version|config-provider|icon|auto-complete|col|row|time-picker)/style/index.?(ts|tsx)',
+    'components/!(version|config-provider|icon|auto-complete|col|row|time-picker|qrcode)/style/index.?(ts|tsx)',
   ),
 );
 

tests/shared/demoTest.tsx

@@ -4,6 +4,7 @@ import { globSync } from 'glob';
 import path from 'path';
 import * as React from 'react';
 import { renderToString } from 'react-dom/server';
+import { kebabCase } from 'lodash';
 import { render } from '../utils';
 import { TriggerMockContext } from './demoTestContext';
 import { excludeWarning } from './excludeWarning';
@@ -17,6 +18,10 @@ export type Options = {
   skip?: boolean | string[];
   testingLib?: boolean;
   testRootProps?: false | object;
+  /**
+   * Not check component `displayName`, check path only
+   */
+  nameCheckPathOnly?: boolean;
 };
 
 function baseText(doInject: boolean, component: string, options: Options = {}) {
@@ -71,13 +76,33 @@ function baseText(doInject: boolean, component: string, options: Options = {}) {
   });
 }
 
+/**
+ * Inject Trigger to force open in test snapshots
+ */
 export function extendTest(component: string, options: Options = {}) {
   baseText(true, component, options);
 }
 
+/**
+ * Test all the demo snapshots
+ */
 export default function demoTest(component: string, options: Options = {}) {
   baseText(false, component, options);
 
+  // Test component name is match the kebab-case
+  const testName = test;
+  testName('component name is match the kebab-case', () => {
+    const kebabName = kebabCase(component);
+
+    // Path should exist
+    // eslint-disable-next-line global-require, import/no-dynamic-require
+    const { default: Component } = require(`../../components/${kebabName}`);
+
+    if (options.nameCheckPathOnly !== true) {
+      expect(kebabCase(Component.displayName || '')).toEqual(kebabName);
+    }
+  });
+
   if (options?.testRootProps !== false) {
     rootPropsTest(component, null!, {
       props: options?.testRootProps,