test: migrate part of rtlTest tests (#37315)

* test: migrate part of rtlTest tests

* style: performance optimize

* fix: add type

* fix: fallback

components/calendar/__tests__/index.test.js

@@ -14,7 +14,7 @@ import Header from '../Header';
 
 describe('Calendar', () => {
   mountTest(Calendar);
-  rtlTest(Calendar, true);
+  rtlTest(Calendar, { mockDate: true });
 
   function openSelect(wrapper, className) {
     wrapper.find(className).find('.ant-select-selector').simulate('mousedown');

components/calendar/__tests__/index.test.tsx

@@ -15,7 +15,7 @@ import Header from '../Header';
 
 describe('Calendar', () => {
   mountTest(Calendar);
-  rtlTest(Calendar, true);
+  rtlTest(Calendar, { mockDate: true });
 
   function openSelect(wrapper: HTMLElement, className: string) {
     fireEvent.mouseDown(wrapper.querySelector(className)!.querySelector('.ant-select-selector')!);

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

@@ -324,7 +324,7 @@ 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`] = `
-Array [
+HTMLCollection [
   <ul
     class="ant-menu ant-menu-root ant-menu-vertical ant-menu-light ant-menu-rtl"
     data-menu-list="true"

components/menu/__tests__/index.test.tsx

@@ -126,13 +126,15 @@ describe('Menu', () => {
     </Menu>
   ));
 
-  rtlTest(() => (
+  const RtlDemo: React.FC = () => (
     <Menu>
       <Menu.Item />
       <Menu.ItemGroup />
       <Menu.SubMenu />
     </Menu>
-  ));
+  );
+
+  rtlTest(RtlDemo, { componentName: 'menu' });
 
   let div: HTMLDivElement;
 

components/transfer/__tests__/__snapshots__/index.test.js.snap

@@ -48,7 +48,8 @@ exports[`Transfer rtl render component should be rendered correctly in RTL direc
       <span
         class="ant-transfer-list-header-selected"
       >
-        0 item
+        0
+        item
       </span>
       <span
         class="ant-transfer-list-header-title"
@@ -207,7 +208,8 @@ exports[`Transfer rtl render component should be rendered correctly in RTL direc
       <span
         class="ant-transfer-list-header-selected"
       >
-        0 item
+        0
+        item
       </span>
       <span
         class="ant-transfer-list-header-title"

tests/shared/imageTest.tsx

@@ -20,7 +20,7 @@ export default function imageTest(component: React.ReactElement) {
     await jestPuppeteer.resetPage();
     await page.setRequestInterception(true);
     const onRequestHandle = (request: any) => {
-      if (['image'].indexOf(request.resourceType()) !== -1) {
+      if (['image'].includes(request.resourceType())) {
         request.abort();
       } else {
         request.continue();

tests/shared/rtlTest.tsx

@@ -1,25 +1,33 @@
 import React from 'react';
 import Moment from 'moment';
 import MockDate from 'mockdate';
-import { mount } from 'enzyme';
+import { render } from '../utils';
 import ConfigProvider from '../../components/config-provider';
 
-// eslint-disable-next-line jest/no-export
+interface TestOptions {
-export default function rtlTest(Component: React.ComponentType, mockDate?: boolean) {
+  mockDate?: boolean;
+  componentName?: string;
+}
+
+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(Moment('2000-09-28').valueOf());
       }
-      const wrapper = mount(
+      const { container } = render(
         <ConfigProvider direction="rtl">
           <Component />
         </ConfigProvider>,
       );
-      expect(wrapper.render()).toMatchSnapshot();
+      expect(isArray ? container.children : container.firstChild).toMatchSnapshot();
       if (mockDate) {
         MockDate.reset();
       }
     });
   });
 }
+
+// eslint-disable-next-line jest/no-export
+export default rtlTest;