From 029cb1dff050f5dbb2c75d02898ae2fdea6ace76 Mon Sep 17 00:00:00 2001 From: lijianan <574980606@qq.com> Date: Sun, 28 Apr 2024 09:52:54 +0800 Subject: [PATCH] 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 --- .../auto-complete/__tests__/focus.test.tsx | 3 +- components/badge/__tests__/index.test.tsx | 3 +- .../button/__tests__/delay-timer.test.tsx | 3 +- components/button/__tests__/index.test.tsx | 3 +- components/collapse/__tests__/index.test.tsx | 5 +-- .../config-provider/__tests__/form.test.tsx | 3 +- components/drawer/__tests__/Drawer.test.tsx | 3 +- .../form/__tests__/list-noStyle.test.tsx | 3 +- components/grid/__tests__/index.test.tsx | 3 +- components/layout/__tests__/index.test.tsx | 3 +- components/message/__tests__/hooks.test.tsx | 3 +- components/modal/__tests__/confirm.test.tsx | 11 ++---- components/modal/__tests__/hook.test.tsx | 3 +- components/tag/__tests__/index.test.tsx | 37 ++++--------------- components/tooltip/__tests__/tooltip.test.tsx | 3 +- .../transfer/__tests__/dropdown.test.tsx | 29 +++------------ components/transfer/__tests__/search.test.tsx | 18 ++------- .../typography/__tests__/ellipsis.test.tsx | 10 ++++- package.json | 10 ++--- tests/setup.ts | 14 ++----- 20 files changed, 51 insertions(+), 119 deletions(-) diff --git a/components/auto-complete/__tests__/focus.test.tsx b/components/auto-complete/__tests__/focus.test.tsx index 419c97dbc6..cab3d6e266 100644 --- 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(() => { diff --git a/components/badge/__tests__/index.test.tsx b/components/badge/__tests__/index.test.tsx index 5c671674b9..391a21cc20 100644 --- 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'; diff --git a/components/button/__tests__/delay-timer.test.tsx b/components/button/__tests__/delay-timer.test.tsx index ee4c2ffc3d..02f86f4485 100644 --- 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; diff --git a/components/button/__tests__/index.test.tsx b/components/button/__tests__/index.test.tsx index 3ad957aadf..286adc3a17 100644 --- 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'; diff --git a/components/collapse/__tests__/index.test.tsx b/components/collapse/__tests__/index.test.tsx index 1b6b3f108a..c8a9131d17 100644 --- 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>; const Test: React.FC = () => { diff --git a/components/config-provider/__tests__/form.test.tsx b/components/config-provider/__tests__/form.test.tsx index 4a49cd9829..d481d359bf 100644 --- 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'; diff --git a/components/drawer/__tests__/Drawer.test.tsx b/components/drawer/__tests__/Drawer.test.tsx index b81c530ba4..676d6bb980 100644 --- 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 = ({ getContainer }) => ( diff --git a/components/form/__tests__/list-noStyle.test.tsx b/components/form/__tests__/list-noStyle.test.tsx index 248c3c4732..f650bb82a9 100644 --- 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'; diff --git a/components/grid/__tests__/index.test.tsx b/components/grid/__tests__/index.test.tsx index 94f96fd55e..05929511e8 100644 --- 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 diff --git a/components/layout/__tests__/index.test.tsx b/components/layout/__tests__/index.test.tsx index 473f97bbf8..5d1944e22f 100644 --- 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; diff --git a/components/message/__tests__/hooks.test.tsx b/components/message/__tests__/hooks.test.tsx index 6b07b29eb9..40c0837d3b 100644 --- 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'; diff --git a/components/modal/__tests__/confirm.test.tsx b/components/modal/__tests__/confirm.test.tsx index 29f3547ee0..569af3340f 100644 --- 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); diff --git a/components/modal/__tests__/hook.test.tsx b/components/modal/__tests__/hook.test.tsx index cdf94dedb2..6c54416c99 100644 --- 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'; diff --git a/components/tag/__tests__/index.test.tsx b/components/tag/__tests__/index.test.tsx index 210164d1a6..ee07e70b16 100644 --- 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(); - 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('.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(); - 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('.ant-tag')!; + fireEvent.click(tagElement); + expect(onClick).toHaveBeenCalled(); }); // https://github.com/ant-design/ant-design/issues/20344 diff --git a/components/tooltip/__tests__/tooltip.test.tsx b/components/tooltip/__tests__/tooltip.test.tsx index ff97799b81..eb9b3d540c 100644 --- 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'; diff --git a/components/transfer/__tests__/dropdown.test.tsx b/components/transfer/__tests__/dropdown.test.tsx index 9f23465320..ecc0b0a30d 100644 --- 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: [], diff --git a/components/transfer/__tests__/search.test.tsx b/components/transfer/__tests__/search.test.tsx index 4537166595..7ea89193d1 100644 --- 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(() => { diff --git a/components/typography/__tests__/ellipsis.test.tsx b/components/typography/__tests__/ellipsis.test.tsx index 0c1125453b..9966b9c13f 100644 --- 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'; diff --git a/package.json b/package.json index 048b566093..508157568a 100644 --- 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", diff --git a/tests/setup.ts b/tests/setup.ts index 1977c6b1a8..e05788a69b 100644 --- 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); } };