test: rm legacy react-dom/test-utils for compatible React-18.3.1 (#48667)

* test: rm legacy react-dom/test-utils for compatible React-18.3.0

* fix: fix

* chore: cls

* chore: update

* fix: fix

components/auto-complete/__tests__/focus.test.tsx

@@ -1,8 +1,7 @@
 import React from 'react';
-import { act } from 'react-dom/test-utils';
 
 import AutoComplete from '..';
-import { render } from '../../../tests/utils';
+import { act, render } from '../../../tests/utils';
 
 describe('AutoComplete children could be focus', () => {
   beforeAll(() => {

components/badge/__tests__/index.test.tsx

@@ -1,6 +1,5 @@
 import React from 'react';
-import { fireEvent, render } from '@testing-library/react';
-import { act } from 'react-dom/test-utils';
+import { act, fireEvent, render } from '@testing-library/react';
 
 import type { GetRef } from '../../_util/type';
 import mountTest from '../../../tests/shared/mountTest';

components/button/__tests__/delay-timer.test.tsx

@@ -1,7 +1,6 @@
 import React, { useState } from 'react';
-import { act } from 'react-dom/test-utils';
 
-import { fireEvent, render } from '../../../tests/utils';
+import { act, fireEvent, render } from '../../../tests/utils';
 import Button from '../button';
 
 const specialDelay = 9529;

components/button/__tests__/index.test.tsx

@@ -1,13 +1,12 @@
 import React, { Suspense, useRef, useState } from 'react';
 import { SearchOutlined } from '@ant-design/icons';
 import { resetWarned } from 'rc-util/lib/warning';
-import { act } from 'react-dom/test-utils';
 
 import Button from '..';
 import type { GetRef } from '../../_util/type';
 import mountTest from '../../../tests/shared/mountTest';
 import rtlTest from '../../../tests/shared/rtlTest';
-import { fireEvent, render, waitFakeTimer } from '../../../tests/utils';
+import { act, fireEvent, render, waitFakeTimer } from '../../../tests/utils';
 import ConfigProvider from '../../config-provider';
 import type { BaseButtonProps } from '../button';
 

components/collapse/__tests__/index.test.tsx

@@ -1,8 +1,7 @@
 import React from 'react';
-import { act } from 'react-dom/test-utils';
 
 import { resetWarned } from '../../_util/warning';
-import { fireEvent, render, waitFakeTimer } from '../../../tests/utils';
+import { act, fireEvent, render, waitFakeTimer } from '../../../tests/utils';
 
 describe('Collapse', () => {
   // eslint-disable-next-line global-require
@@ -157,7 +156,7 @@ describe('Collapse', () => {
     jest.useFakeTimers();
     const spiedRAF = jest
       .spyOn(window, 'requestAnimationFrame')
-      .mockImplementation((cb) => setTimeout(cb, 16.66));
+      .mockImplementation((cb) => setTimeout(cb, 1000 / 60));
 
     let setActiveKeyOuter: React.Dispatch<React.SetStateAction<React.Key | undefined>>;
     const Test: React.FC = () => {

components/config-provider/__tests__/form.test.tsx

@@ -1,10 +1,9 @@
 import React from 'react';
 import type { ValidateMessages } from 'rc-field-form/es/interface';
-import { act } from 'react-dom/test-utils';
 import scrollIntoView from 'scroll-into-view-if-needed';
 
 import ConfigProvider from '..';
-import { fireEvent, render, waitFakeTimer } from '../../../tests/utils';
+import { act, fireEvent, render, waitFakeTimer } from '../../../tests/utils';
 import Button from '../../button';
 import type { FormInstance } from '../../form';
 import Form from '../../form';

components/drawer/__tests__/Drawer.test.tsx

@@ -1,12 +1,11 @@
 import React from 'react';
-import { act } from 'react-dom/test-utils';
 
 import type { DrawerProps } from '..';
 import Drawer from '..';
 import { resetWarned } from '../../_util/warning';
 import mountTest from '../../../tests/shared/mountTest';
 import rtlTest from '../../../tests/shared/rtlTest';
-import { fireEvent, render } from '../../../tests/utils';
+import { act, fireEvent, render } from '../../../tests/utils';
 import ConfigProvider from '../../config-provider';
 
 const DrawerTest: React.FC<DrawerProps> = ({ getContainer }) => (

components/form/__tests__/list-noStyle.test.tsx

@@ -1,8 +1,7 @@
 import React from 'react';
-import { act } from 'react-dom/test-utils';
 
 import Form from '..';
-import { fireEvent, render, waitFakeTimer } from '../../../tests/utils';
+import { act, fireEvent, render, waitFakeTimer } from '../../../tests/utils';
 import Input from '../../input';
 import type { FormListOperation } from '../FormList';
 

components/grid/__tests__/index.test.tsx

@@ -1,10 +1,9 @@
 import React, { useState } from 'react';
-import { act } from 'react-dom/test-utils';
 
 import { Col, Row } from '..';
 import mountTest from '../../../tests/shared/mountTest';
 import rtlTest from '../../../tests/shared/rtlTest';
-import { fireEvent, render } from '../../../tests/utils';
+import { act, fireEvent, render } from '../../../tests/utils';
 import useBreakpoint from '../hooks/useBreakpoint';
 
 // Mock for `responsiveObserve` to test `unsubscribe` call

components/layout/__tests__/index.test.tsx

@@ -1,12 +1,11 @@
 import React, { useState } from 'react';
 import { UserOutlined } from '@ant-design/icons';
 import { renderToString } from 'react-dom/server';
-import { act } from 'react-dom/test-utils';
 
 import Layout from '..';
 import mountTest from '../../../tests/shared/mountTest';
 import rtlTest from '../../../tests/shared/rtlTest';
-import { fireEvent, render } from '../../../tests/utils';
+import { act, fireEvent, render } from '../../../tests/utils';
 import Menu from '../../menu';
 
 const { Sider, Content, Footer, Header } = Layout;

components/message/__tests__/hooks.test.tsx

@@ -1,10 +1,9 @@
 /* eslint-disable jsx-a11y/control-has-associated-label */
 import React, { useEffect } from 'react';
 import { createCache, extractStyle, StyleProvider } from '@ant-design/cssinjs';
-import { act } from 'react-dom/test-utils';
 
 import message from '..';
-import { fireEvent, render } from '../../../tests/utils';
+import { act, fireEvent, render } from '../../../tests/utils';
 import ConfigProvider from '../../config-provider';
 import { triggerMotionEnd } from './util';
 

components/modal/__tests__/confirm.test.tsx

@@ -4,11 +4,10 @@ import CSSMotion from 'rc-motion';
 import { genCSSMotion } from 'rc-motion/lib/CSSMotion';
 import KeyCode from 'rc-util/lib/KeyCode';
 import { resetWarned } from 'rc-util/lib/warning';
-import TestUtils from 'react-dom/test-utils';
 
 import type { ModalFuncProps } from '..';
 import Modal from '..';
-import { act, waitFakeTimer } from '../../../tests/utils';
+import { act, fireEvent, waitFakeTimer } from '../../../tests/utils';
 import ConfigProvider from '../../config-provider';
 import type { ModalFunc } from '../confirm';
 import destroyFns from '../destroyFns';
@@ -191,9 +190,7 @@ describe('Modal.confirm triggers callbacks correctly', () => {
     await waitFakeTimer();
 
     expect($$(`.ant-modal-confirm-confirm`)).toHaveLength(1);
-    TestUtils.Simulate.keyDown($$('.ant-modal')[0], {
-      keyCode: KeyCode.ESC,
-    });
+    fireEvent.keyDown($$('.ant-modal')[0], { keyCode: KeyCode.ESC });
 
     await waitFakeTimer(0);
 
@@ -706,9 +703,7 @@ describe('Modal.confirm triggers callbacks correctly', () => {
         await waitFakeTimer();
 
         expect($$(`.ant-modal-confirm-${type}`)).toHaveLength(1);
-        TestUtils.Simulate.keyDown($$('.ant-modal')[0], {
-          keyCode: KeyCode.ESC,
-        });
+        fireEvent.keyDown($$('.ant-modal')[0], { keyCode: KeyCode.ESC });
 
         await waitFakeTimer(0);
 

components/modal/__tests__/hook.test.tsx

@@ -2,10 +2,9 @@ import React from 'react';
 import CSSMotion from 'rc-motion';
 import { genCSSMotion } from 'rc-motion/lib/CSSMotion';
 import KeyCode from 'rc-util/lib/KeyCode';
-import { act } from 'react-dom/test-utils';
 
 import Modal from '..';
-import { fireEvent, render, waitFakeTimer } from '../../../tests/utils';
+import { act, fireEvent, render, waitFakeTimer } from '../../../tests/utils';
 import Button from '../../button';
 import ConfigProvider from '../../config-provider';
 import Input from '../../input';

components/tag/__tests__/index.test.tsx

@@ -1,6 +1,5 @@
 import React from 'react';
 import { CheckCircleOutlined } from '@ant-design/icons';
-import { Simulate } from 'react-dom/test-utils';
 
 import Tag from '..';
 import { resetWarned } from '../../_util/warning';
@@ -89,40 +88,20 @@ describe('Tag', () => {
     });
   });
 
-  it('should trigger onClick', () => {
+  it('should trigger onClick on Tag', () => {
     const onClick = jest.fn();
     const { container } = render(<Tag onClick={onClick} />);
-    const target = container.querySelectorAll('.ant-tag')[0];
-    Simulate.click(target);
-    expect(onClick).toHaveBeenCalledWith(
-      expect.objectContaining({
-        type: 'click',
-        target,
-        preventDefault: expect.any(Function),
-        nativeEvent: {
-          type: 'click',
-          target,
-        },
-      }),
-    );
+    const tagElement = container.querySelector<HTMLSpanElement>('.ant-tag')!;
+    fireEvent.click(tagElement);
+    expect(onClick).toHaveBeenCalled();
   });
 
-  it('should trigger onClick on CheckableTag', () => {
+  it('should trigger onClick on Tag.CheckableTag', () => {
     const onClick = jest.fn();
     const { container } = render(<Tag.CheckableTag checked={false} onClick={onClick} />);
-    const target = container.querySelectorAll('.ant-tag')[0];
-    Simulate.click(target);
-    expect(onClick).toHaveBeenCalledWith(
-      expect.objectContaining({
-        type: 'click',
-        target,
-        preventDefault: expect.any(Function),
-        nativeEvent: {
-          type: 'click',
-          target,
-        },
-      }),
-    );
+    const tagElement = container.querySelector<HTMLSpanElement>('.ant-tag')!;
+    fireEvent.click(tagElement);
+    expect(onClick).toHaveBeenCalled();
   });
 
   // https://github.com/ant-design/ant-design/issues/20344

components/tooltip/__tests__/tooltip.test.tsx

@@ -1,6 +1,5 @@
 import React from 'react';
 import { spyElementPrototype } from 'rc-util/lib/test/domHook';
-import { act } from 'react-dom/test-utils';
 
 import type { TooltipPlacement } from '..';
 import Tooltip from '..';
@@ -8,7 +7,7 @@ import getPlacements from '../../_util/placements';
 import { resetWarned } from '../../_util/warning';
 import mountTest from '../../../tests/shared/mountTest';
 import rtlTest from '../../../tests/shared/rtlTest';
-import { fireEvent, render, waitFakeTimer } from '../../../tests/utils';
+import { act, fireEvent, render, waitFakeTimer } from '../../../tests/utils';
 import Button from '../../button';
 import DatePicker from '../../date-picker';
 import Input from '../../input';

components/transfer/__tests__/dropdown.test.tsx

@@ -1,33 +1,16 @@
 /* eslint no-use-before-define: "off" */
 import React from 'react';
-import { act } from 'react-dom/test-utils';
 
 import Transfer from '..';
-import { fireEvent, render } from '../../../tests/utils';
+import { act, fireEvent, render } from '../../../tests/utils';
 
 const listProps = {
   dataSource: [
-    {
-      key: 'a',
-      title: 'a',
-      disabled: true,
-    },
-    {
-      key: 'b',
-      title: 'b',
-    },
-    {
-      key: 'c',
-      title: 'c',
-    },
-    {
-      key: 'd',
-      title: 'd',
-    },
-    {
-      key: 'e',
-      title: 'e',
-    },
+    { key: 'a', title: 'a', disabled: true },
+    { key: 'b', title: 'b' },
+    { key: 'c', title: 'c' },
+    { key: 'd', title: 'd' },
+    { key: 'e', title: 'e' },
   ],
   selectedKeys: ['b'],
   targetKeys: [],

components/transfer/__tests__/search.test.tsx

@@ -9,21 +9,9 @@ describe('Transfer.Search', () => {
   const errorSpy = jest.spyOn(console, 'error').mockImplementation(() => {});
 
   const dataSource = [
-    {
-      key: 'a',
-      title: 'a',
-      description: 'a',
-    },
-    {
-      key: 'b',
-      title: 'b',
-      description: 'b',
-    },
-    {
-      key: 'c',
-      title: 'c',
-      description: 'c',
-    },
+    { key: 'a', title: 'a', description: 'a' },
+    { key: 'b', title: 'b', description: 'b' },
+    { key: 'c', title: 'c', description: 'c' },
   ];
 
   afterEach(() => {

components/typography/__tests__/ellipsis.test.tsx

@@ -1,8 +1,14 @@
 import React from 'react';
 import { spyElementPrototypes } from 'rc-util/lib/test/domHook';
-import { act } from 'react-dom/test-utils';
 
-import { fireEvent, render, triggerResize, waitFakeTimer, waitFor } from '../../../tests/utils';
+import {
+  act,
+  fireEvent,
+  render,
+  triggerResize,
+  waitFakeTimer,
+  waitFor,
+} from '../../../tests/utils';
 import type { EllipsisConfig } from '../Base';
 import Base from '../Base';
 

package.json

@@ -189,7 +189,7 @@
     "@stackblitz/sdk": "^1.9.0",
     "@testing-library/dom": "^10.0.0",
     "@testing-library/jest-dom": "^6.4.2",
-    "@testing-library/react": "^15.0.4",
+    "@testing-library/react": "^15.0.5",
     "@testing-library/user-event": "^14.5.2",
     "@types/adm-zip": "^0.5.5",
     "@types/ali-oss": "^6.16.11",
@@ -215,9 +215,9 @@
     "@types/prismjs": "^1.26.3",
     "@types/progress": "^2.0.7",
     "@types/qs": "^6.9.15",
-    "@types/react": "^18.2.79",
+    "@types/react": "^18.3.1",
     "@types/react-copy-to-clipboard": "^5.0.7",
-    "@types/react-dom": "^18.2.25",
+    "@types/react-dom": "^18.3.0",
     "@types/react-highlight-words": "^0.16.7",
     "@types/react-resizable": "^3.0.7",
     "@types/semver": "^7.5.8",
@@ -303,10 +303,10 @@
     "rc-footer": "^0.6.8",
     "rc-tween-one": "^3.0.6",
     "rc-virtual-list": "^3.11.5",
-    "react": "^18.3.0",
+    "react": "^18.3.1",
     "react-copy-to-clipboard": "^5.1.0",
     "react-countup": "^6.5.3",
-    "react-dom": "^18.3.0",
+    "react-dom": "^18.3.1",
     "react-draggable": "^4.4.6",
     "react-fast-marquee": "^1.6.4",
     "react-highlight-words": "^0.20.0",

tests/setup.ts

@@ -1,25 +1,19 @@
 /* eslint-disable no-console, import/prefer-default-export */
 import util from 'util';
+import React from 'react';
 import type { DOMWindow } from 'jsdom';
 
-// import { fillWindowEnv } from './utils';
-
-const React = require('react');
-
 // eslint-disable-next-line no-console
 console.log('Current React Version:', React.version);
 
 const originConsoleErr = console.error;
 
+const ignoreWarns = ['validateDOMNesting', 'on an unmounted component', 'not wrapped in act'];
+
 // Hack off React warning to avoid too large log in CI.
 console.error = (...args) => {
   const str = args.join('').replace(/\n/g, '');
-
-  if (
-    ['validateDOMNesting', 'on an unmounted component', 'not wrapped in act'].every(
-      (warn) => !str.includes(warn),
-    )
-  ) {
+  if (ignoreWarns.every((warn) => !str.includes(warn))) {
     originConsoleErr(...args);
   }
 };