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
9 months ago · 029cb1dff0
parent f799219c58
commit 029cb1dff0
20 changed files with 51 additions and 119 deletions
--- a/components/auto-complete/tests/focus.test.tsx
+++ b/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(() => {
--- a/components/badge/tests/index.test.tsx
+++ b/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';
--- a/components/button/tests/delay-timer.test.tsx
+++ b/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;
--- a/components/button/tests/index.test.tsx
+++ b/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';

--- a/components/collapse/tests/index.test.tsx
+++ b/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 = () => {
--- a/components/config-provider/tests/form.test.tsx
+++ b/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';
--- a/components/drawer/tests/Drawer.test.tsx
+++ b/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 }) => (
--- a/components/form/tests/list-noStyle.test.tsx
+++ b/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';

--- a/components/grid/tests/index.test.tsx
+++ b/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
--- a/components/layout/tests/index.test.tsx
+++ b/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;
--- a/components/message/tests/hooks.test.tsx
+++ b/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';

--- a/components/modal/tests/confirm.test.tsx
+++ b/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);

--- a/components/modal/tests/hook.test.tsx
+++ b/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';
--- a/components/tag/tests/index.test.tsx
+++ b/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
--- a/components/tooltip/tests/tooltip.test.tsx
+++ b/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';
--- a/components/transfer/tests/dropdown.test.tsx
+++ b/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: [],
--- a/components/transfer/tests/search.test.tsx
+++ b/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(() => {
--- a/components/typography/tests/ellipsis.test.tsx
+++ b/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';

--- a/package.json
+++ b/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",
--- a/tests/setup.ts
+++ b/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);
  }
 };