test: simplify rtlTest test case (#40878)

components/calendar/__tests__/index.test.tsx

@@ -1,9 +1,9 @@
-import MockDate from 'mockdate';
 import Dayjs from 'dayjs';
 import 'dayjs/locale/zh-cn';
+import MockDate from 'mockdate';
+import { type PickerPanelProps } from 'rc-picker';
 import dayjsGenerateConfig from 'rc-picker/lib/generate/dayjs';
 import type { Locale } from 'rc-picker/lib/interface';
-import { type PickerPanelProps } from 'rc-picker';
 import React from 'react';
 import Calendar from '..';
 import mountTest from '../../../tests/shared/mountTest';
@@ -42,7 +42,7 @@ jest.mock('rc-picker', () => {
 
 describe('Calendar', () => {
   mountTest(Calendar);
-  rtlTest(Calendar, { mockDate: true });
+  rtlTest(Calendar, true);
 
   function openSelect(wrapper: HTMLElement, className: string) {
     fireEvent.mouseDown(wrapper.querySelector(className)!.querySelector('.ant-select-selector')!);

components/menu/__tests__/__snapshots__/index.test.tsx.snap

@@ -329,64 +329,58 @@ exports[`Menu all types must be available in the "items" syntax 1`] = `
 `;
 
 exports[`Menu rtl render component should be rendered correctly in RTL direction 1`] = `
-HTMLCollection [
+<ul
-  <ul
+  class="ant-menu ant-menu-root ant-menu-vertical ant-menu-light ant-menu-rtl"
-    class="ant-menu ant-menu-root ant-menu-vertical ant-menu-light ant-menu-rtl"
+  data-menu-list="true"
-    data-menu-list="true"
+  dir="rtl"
-    dir="rtl"
+  role="menu"
-    role="menu"
+  tabindex="0"
-    tabindex="0"
+>
+  <li
+    class="ant-menu-item"
+    data-menu-id="rc-menu-uuid-test-tmp_key-0"
+    role="menuitem"
+    tabindex="-1"
   >
-    <li
+    <span
-      class="ant-menu-item"
+      class="ant-menu-title-content"
-      data-menu-id="rc-menu-uuid-test-tmp_key-0"
+    />
+  </li>
+  <li
+    class="ant-menu-item-group"
+    role="presentation"
+  >
+    <div
+      class="ant-menu-item-group-title"
+      role="presentation"
+    />
+    <ul
+      class="ant-menu-item-group-list"
+      role="group"
+    />
+  </li>
+  <li
+    class="ant-menu-submenu ant-menu-submenu-vertical"
+    role="none"
+  >
+    <div
+      aria-controls="rc-menu-uuid-test-tmp_key-2-popup"
+      aria-expanded="false"
+      aria-haspopup="true"
+      class="ant-menu-submenu-title"
+      data-menu-id="rc-menu-uuid-test-tmp_key-2"
       role="menuitem"
       tabindex="-1"
     >
       <span
         class="ant-menu-title-content"
       />
-    </li>
+      <i
-    <li
+        class="ant-menu-submenu-arrow"
-      class="ant-menu-item-group"
-      role="presentation"
-    >
-      <div
-        class="ant-menu-item-group-title"
-        role="presentation"
-      />
-      <ul
-        class="ant-menu-item-group-list"
-        role="group"
       />
-    </li>
+    </div>
-    <li
+  </li>
-      class="ant-menu-submenu ant-menu-submenu-vertical"
+</ul>
-      role="none"
-    >
-      <div
-        aria-controls="rc-menu-uuid-test-tmp_key-2-popup"
-        aria-expanded="false"
-        aria-haspopup="true"
-        class="ant-menu-submenu-title"
-        data-menu-id="rc-menu-uuid-test-tmp_key-2"
-        role="menuitem"
-        tabindex="-1"
-      >
-        <span
-          class="ant-menu-title-content"
-        />
-        <i
-          class="ant-menu-submenu-arrow"
-        />
-      </div>
-    </li>
-  </ul>,
-  <div
-    aria-hidden="true"
-    style="display: none;"
-  />,
-]
 `;
 
 exports[`Menu should controlled collapse work 1`] = `

components/menu/__tests__/index.test.tsx

@@ -5,12 +5,12 @@ import {
   PieChartOutlined,
   UserOutlined,
 } from '@ant-design/icons';
-import React, { useState, useMemo } from 'react';
+import React, { useMemo, useState } from 'react';
 import type { MenuProps, MenuRef } from '..';
 import Menu from '..';
 import mountTest from '../../../tests/shared/mountTest';
 import rtlTest from '../../../tests/shared/rtlTest';
-import { fireEvent, render, act } from '../../../tests/utils';
+import { act, fireEvent, render } from '../../../tests/utils';
 import Layout from '../../layout';
 import initCollapseMotion from '../../_util/motion';
 import { noop } from '../../_util/warning';
@@ -133,7 +133,7 @@ describe('Menu', () => {
     </Menu>
   );
 
-  rtlTest(RtlDemo, { componentName: 'menu' });
+  rtlTest(RtlDemo);
 
   let div: HTMLDivElement;
 

tests/shared/rtlTest.tsx

@@ -1,18 +1,12 @@
-import React from 'react';
 import dayjs from 'dayjs';
 import MockDate from 'mockdate';
-import { render } from '../utils';
+import React from 'react';
 import ConfigProvider from '../../components/config-provider';
+import { render } from '../utils';
 
-interface TestOptions {
+const rtlTest = (Component: React.ComponentType, mockDate = false) => {
-  mockDate?: boolean;
+  describe('rtl render', () => {
-  componentName?: string;
+    it('component should be rendered correctly in RTL direction', () => {
-}
-
-function rtlTest(Component: React.ComponentType, { mockDate, componentName }: TestOptions = {}) {
-  describe(`rtl render`, () => {
-    it(`component should be rendered correctly in RTL direction`, () => {
-      const isArray = componentName && ['menu'].includes(componentName);
       if (mockDate) {
         MockDate.set(dayjs('2000-09-28').valueOf());
       }
@@ -21,13 +15,13 @@ function rtlTest(Component: React.ComponentType, { mockDate, componentName }: Te
           <Component />
         </ConfigProvider>,
       );
-      expect(isArray ? container.children : container.firstChild).toMatchSnapshot();
+      expect(container.firstChild).toMatchSnapshot();
       if (mockDate) {
         MockDate.reset();
       }
     });
   });
-}
+};
 
 // eslint-disable-next-line jest/no-export
 export default rtlTest;