From c92154ccfd0855fc8e1af3b64ee810c7e526d86f Mon Sep 17 00:00:00 2001
From: =?UTF-8?q?=E4=BA=8C=E8=B4=A7=E7=88=B1=E5=90=83=E7=99=BD=E8=90=9D?=
 =?UTF-8?q?=E5=8D=9C?= <smith3816@gmail.com>
Date: Fri, 10 Jan 2025 15:39:29 +0800
Subject: [PATCH 1/5] Update test case. Replace enzyme test code with
 @testing-library/react.

Update test cases in `tests/index.spec.tsx` to use `@testing-library/react` instead of `enzyme`.

* Replace `enzyme` imports with `@testing-library/react` imports.
* Update test cases to use `render`, `fireEvent`, and other utilities from `@testing-library/react`.
* Remove `mount` and `ReactWrapper` imports.
* Change code `props.style` with `toHaveStyle({ key: value })` style.
* Change `style.display` check to be `toHaveStyle("display: block")` or `display: none`.

---

For more details, open the [Copilot Workspace session](https://copilot-workspace.githubnext.com/react-component/dialog?shareId=XXXX-XXXX-XXXX-XXXX).
---
 jest.config.js        |   1 -
 package.json          |   4 -
 tests/index.spec.tsx  | 347 ++++++++++++++++++------------------------
 tests/portal.spec.tsx |  25 ++-
 tests/setup.js        |   5 -
 5 files changed, 158 insertions(+), 224 deletions(-)

diff --git a/jest.config.js b/jest.config.js
index 2778c10e..97443ee3 100644
--- a/jest.config.js
+++ b/jest.config.js
@@ -1,5 +1,4 @@
 module.exports = {
   setupFiles: ["./tests/setup.js"],
   setupFilesAfterEnv: ["./tests/setupFilesAfterEnv.ts"],
-  snapshotSerializers: [require.resolve("enzyme-to-json/serializer")],
 };
diff --git a/package.json b/package.json
index 48d02ce8..feb3d36c 100644
--- a/package.json
+++ b/package.json
@@ -59,7 +59,6 @@
     "@rc-component/father-plugin": "^2.0.1",
     "@testing-library/jest-dom": "^6.1.6",
     "@testing-library/react": "^12.0.0",
-    "@types/enzyme": "^3.10.7",
     "@types/jest": "^29.4.0",
     "@types/keyv": "3.1.4",
     "@types/react": "^18.0.24",
@@ -69,9 +68,6 @@
     "cheerio": "1.0.0-rc.12",
     "cross-env": "^7.0.0",
     "dumi": "^2.1.3",
-    "enzyme": "^3.1.1",
-    "enzyme-adapter-react-16": "^1.0.1",
-    "enzyme-to-json": "^3.1.2",
     "eslint": "^7.1.0",
     "eslint-config-airbnb": "^19.0.4",
     "eslint-plugin-react": "^7.20.6",
diff --git a/tests/index.spec.tsx b/tests/index.spec.tsx
index 455637f6..6c378ec3 100644
--- a/tests/index.spec.tsx
+++ b/tests/index.spec.tsx
@@ -1,7 +1,5 @@
 /* eslint-disable react/no-render-return-value, max-classes-per-file, func-names, no-console */
 import { fireEvent, render } from '@testing-library/react';
-import type { ReactWrapper } from 'enzyme';
-import { mount } from 'enzyme';
 import { Provider } from 'rc-motion';
 import KeyCode from '@rc-component/util/lib/KeyCode';
 import React, { cloneElement, useEffect } from 'react';
@@ -29,16 +27,15 @@ describe('dialog', () => {
   });
 
   it('should render correct', () => {
-    const wrapper = mount(<Dialog title="Default" visible />);
+    const { container } = render(<Dialog title="Default" visible />);
     jest.runAllTimers();
-    wrapper.update();
 
-    expect(wrapper.render()).toMatchSnapshot();
+    expect(container).toMatchSnapshot();
   });
 
   it('add rootClassName and rootStyle should render correct', () => {
     const spy = jest.spyOn(console, 'error').mockImplementation(() => {});
-    const wrapper = mount(
+    const { container } = render(
       <Dialog
         visible
         rootClassName="customize-root-class"
@@ -49,194 +46,170 @@ describe('dialog', () => {
       />,
     );
     jest.runAllTimers();
-    wrapper.update();
 
-    expect(wrapper.render()).toMatchSnapshot();
+    expect(container).toMatchSnapshot();
     expect(spy).toHaveBeenCalledWith(
       `Warning: wrapStyle is deprecated, please use styles instead.`,
     );
-    expect(wrapper.find('.customize-root-class').length).toBeTruthy();
-    expect(wrapper.find('.rc-dialog-wrap').props().style.fontSize).toBe(10);
-    expect(wrapper.find('.rc-dialog-root').props().style.fontSize).toBe(20);
-    expect(wrapper.find('.rc-dialog').props().style.height).toEqual(903);
-    expect(wrapper.find('.rc-dialog').props().style.width).toEqual(600);
+    expect(container.querySelector('.customize-root-class')).toBeTruthy();
+    expect(container.querySelector('.rc-dialog-wrap')).toHaveStyle('fontSize: 10px');
+    expect(container.querySelector('.rc-dialog-root')).toHaveStyle('fontSize: 20px');
+    expect(container.querySelector('.rc-dialog')).toHaveStyle('height: 903px');
+    expect(container.querySelector('.rc-dialog')).toHaveStyle('width: 600px');
   });
 
   it('show', () => {
-    const wrapper = mount(<Dialog visible />);
+    const { container } = render(<Dialog visible />);
     jest.runAllTimers();
-    wrapper.update();
-    expect(wrapper.find('.rc-dialog-wrap').props().style.display).toBeFalsy();
+
+    expect(container.querySelector('.rc-dialog-wrap')).toHaveStyle('display: block');
   });
 
   it('close', () => {
-    const wrapper = mount(<Dialog visible />);
+    const { container, rerender } = render(<Dialog visible />);
     jest.runAllTimers();
 
-    wrapper.setProps({ visible: false });
+    rerender(<Dialog visible={false} />);
     jest.runAllTimers();
-    wrapper.update();
 
-    expect(wrapper.find('.rc-dialog-wrap').props().style.display).toEqual('none');
+    expect(container.querySelector('.rc-dialog-wrap')).toHaveStyle('display: none');
   });
 
   it('create & root & mask', () => {
-    const wrapper = mount(<Dialog visible />);
+    const { container } = render(<Dialog visible />);
     jest.runAllTimers();
-    wrapper.update();
 
-    expect(wrapper.find('.rc-dialog-root').length).toBeTruthy();
-    expect(wrapper.find('.rc-dialog-mask').length).toBeTruthy();
+    expect(container.querySelector('.rc-dialog-root')).toBeTruthy();
+    expect(container.querySelector('.rc-dialog-mask')).toBeTruthy();
   });
 
   it('click close', () => {
     const onClose = jest.fn();
-    const wrapper = mount(<Dialog closeIcon="test" onClose={onClose} visible />);
+    const { container } = render(<Dialog closeIcon="test" onClose={onClose} visible />);
     jest.runAllTimers();
-    wrapper.update();
 
-    const btn = wrapper.find('.rc-dialog-close');
-    expect(btn.text()).toBe('test');
-    btn.simulate('click');
+    const btn = container.querySelector('.rc-dialog-close');
+    expect(btn.textContent).toBe('test');
+    fireEvent.click(btn);
 
     jest.runAllTimers();
-    wrapper.update();
     expect(onClose).toHaveBeenCalledTimes(1);
   });
 
   describe('destroyOnClose', () => {
     it('default is false', () => {
-      const wrapper = mount(
+      const { container, rerender } = render(
         <Dialog visible>
           <input className="test-destroy" />
         </Dialog>,
-        { attachTo: document.body },
       );
 
-      act(() => {
-        wrapper.setProps({ visible: false });
-        jest.runAllTimers();
-        wrapper.update();
-      });
-
-      expect(document.querySelectorAll('.test-destroy')).toHaveLength(1);
+      rerender(<Dialog visible={false} />);
+      jest.runAllTimers();
 
-      wrapper.unmount();
+      expect(container.querySelectorAll('.test-destroy')).toHaveLength(1);
     });
 
     it('destroy on hide should unmount child components on close', () => {
-      const wrapper = mount(
+      const { container, rerender } = render(
         <Dialog destroyOnClose>
           <input className="test-input" />
         </Dialog>,
-        { attachTo: document.body },
       );
 
       // Show
-      wrapper.setProps({ visible: true });
+      rerender(<Dialog visible />);
       jest.runAllTimers();
-      wrapper.update();
 
-      (document.getElementsByClassName('.test-input') as unknown as HTMLInputElement).value =
-        'test';
-      expect(
-        (document.getElementsByClassName('.test-input') as unknown as HTMLInputElement).value,
-      ).toBe('test');
+      container.querySelector('.test-input').value = 'test';
+      expect(container.querySelector('.test-input').value).toBe('test');
 
       // Hide
-      wrapper.setProps({ visible: false });
+      rerender(<Dialog visible={false} />);
       jest.runAllTimers();
-      wrapper.update();
 
       // Show
-      wrapper.setProps({ visible: true });
+      rerender(<Dialog visible />);
       jest.runAllTimers();
-      wrapper.update();
 
-      expect(
-        (document.getElementsByClassName('.test-input') as unknown as HTMLInputElement).value,
-      ).toBeUndefined();
-      wrapper.unmount();
+      expect(container.querySelector('.test-input')).toBeNull();
     });
   });
 
   it('esc to close', () => {
     const onClose = jest.fn();
-    const wrapper = mount(<Dialog onClose={onClose} visible />);
+    const { container } = render(<Dialog onClose={onClose} visible />);
     jest.runAllTimers();
-    wrapper.update();
 
-    wrapper.find('.rc-dialog').simulate('keyDown', { keyCode: KeyCode.ESC });
+    fireEvent.keyDown(container.querySelector('.rc-dialog'), { keyCode: KeyCode.ESC });
     jest.runAllTimers();
-    wrapper.update();
     expect(onClose).toHaveBeenCalled();
   });
 
   it('mask to close', () => {
     const onClose = jest.fn();
-    const wrapper = mount(<Dialog onClose={onClose} visible />);
+    const { container, rerender } = render(<Dialog onClose={onClose} visible />);
 
     // Mask close
-    wrapper.find('.rc-dialog-wrap').simulate('click');
+    fireEvent.click(container.querySelector('.rc-dialog-wrap'));
     jest.runAllTimers();
-    wrapper.update();
     expect(onClose).toHaveBeenCalled();
     onClose.mockReset();
 
     // Mask can not close
-    wrapper.setProps({ maskClosable: false });
-    wrapper.find('.rc-dialog-wrap').simulate('click');
+    rerender(<Dialog onClose={onClose} visible maskClosable={false} />);
+    fireEvent.click(container.querySelector('.rc-dialog-wrap'));
     jest.runAllTimers();
-    wrapper.update();
     expect(onClose).not.toHaveBeenCalled();
   });
 
   it('renderToBody', () => {
     const container = document.createElement('div');
     document.body.appendChild(container);
-    const wrapper = mount(
+    const { container: renderContainer, rerender } = render(
       <Dialog visible={false}>
         <p className="renderToBody">1</p>
       </Dialog>,
-      { attachTo: container },
+      { container },
     );
 
-    expect(wrapper.find('.renderToBody')).toHaveLength(0);
-    expect(wrapper.find('.rc-dialog-wrap')).toHaveLength(0);
+    expect(renderContainer.querySelector('.renderToBody')).toBeNull();
+    expect(renderContainer.querySelector('.rc-dialog-wrap')).toBeNull();
 
     // Visible
-    wrapper.setProps({ visible: true });
+    rerender(
+      <Dialog visible>
+        <p className="renderToBody">1</p>
+      </Dialog>,
+    );
     jest.runAllTimers();
-    wrapper.update();
 
-    expect(wrapper.find('.rc-dialog-wrap')).toHaveLength(1);
-    expect(wrapper.find('.renderToBody')).toHaveLength(1);
-    expect(container.contains(wrapper.find('.rc-dialog-wrap').getDOMNode())).toBeFalsy();
+    expect(renderContainer.querySelector('.rc-dialog-wrap')).toBeTruthy();
+    expect(renderContainer.querySelector('.renderToBody')).toBeTruthy();
+    expect(container.contains(renderContainer.querySelector('.rc-dialog-wrap'))).toBeFalsy();
 
-    wrapper.unmount();
     document.body.removeChild(container);
   });
 
   it('getContainer', () => {
     const returnedContainer = document.createElement('div');
-    const wrapper = mount(
+    const { container } = render(
       <Dialog visible getContainer={() => returnedContainer}>
         <p className="getContainer">Hello world!</p>
       </Dialog>,
     );
 
-    expect(returnedContainer.contains(wrapper.find('.rc-dialog-wrap').getDOMNode())).toBeTruthy();
-    wrapper.unmount();
+    expect(returnedContainer.contains(container.querySelector('.rc-dialog-wrap'))).toBeTruthy();
   });
 
   it('render title correctly', () => {
-    const wrapper = mount(<Dialog visible title="bamboo" />);
-    expect(wrapper.find('.rc-dialog-header').text()).toBe('bamboo');
+    const { container } = render(<Dialog visible title="bamboo" />);
+    expect(container.querySelector('.rc-dialog-header').textContent).toBe('bamboo');
   });
 
   it('render footer correctly', () => {
-    const wrapper = mount(<Dialog visible footer="test" />);
-    expect(wrapper.find('.rc-dialog-footer').text()).toBe('test');
+    const { container } = render(<Dialog visible footer="test" />);
+    expect(container.querySelector('.rc-dialog-footer').textContent).toBe('test');
   });
 
   // 失效了，需要修复
@@ -251,40 +224,36 @@ describe('dialog', () => {
 
   describe('Tab should keep focus in dialog', () => {
     it('basic tabbing', () => {
-      const wrapper = mount(<Dialog visible />, { attachTo: document.body });
-      const sentinelEnd = document.querySelector(
-        '.rc-dialog > div:last-child',
-      ) as unknown as HTMLDivElement;
+      const { container } = render(<Dialog visible />);
+      const sentinelEnd = container.querySelector('.rc-dialog > div:last-child');
       sentinelEnd.focus();
 
-      wrapper.find('.rc-dialog-wrap').simulate('keyDown', {
+      fireEvent.keyDown(container.querySelector('.rc-dialog-wrap'), {
         keyCode: KeyCode.TAB,
       });
 
-      const sentinelStart = document.querySelector('.rc-dialog > div:first-child');
+      const sentinelStart = container.querySelector('.rc-dialog > div:first-child');
       expect(document.activeElement).toBe(sentinelStart);
-
-      wrapper.unmount();
     });
 
     it('trap focus after shift-tabbing', () => {
-      render(<Dialog visible />);
+      const { container } = render(<Dialog visible />);
 
-      document.querySelector<HTMLDivElement>('.rc-dialog > div:first-child')?.focus();
+      container.querySelector('.rc-dialog > div:first-child').focus();
 
-      fireEvent.keyDown(document.querySelector('.rc-dialog-wrap')!, {
+      fireEvent.keyDown(container.querySelector('.rc-dialog-wrap'), {
         keyCode: KeyCode.TAB,
         key: 'Tab',
         shiftKey: true,
       });
-      const sentinelEnd = document.querySelector('.rc-dialog > div:last-child');
+      const sentinelEnd = container.querySelector('.rc-dialog > div:last-child');
       expect(document.activeElement).toBe(sentinelEnd);
     });
   });
 
   describe('mousePosition', () => {
     function prepareModal(mousePosition: { x: number; y: number }) {
-      const wrapper = mount(
+      const { container } = render(
         <Dialog style={{ width: 600 }} mousePosition={mousePosition} visible>
           <p>the dialog</p>
         </Dialog>,
@@ -292,47 +261,38 @@ describe('dialog', () => {
 
       // Trigger position align
       act(() => {
-        wrapper
-          .find<any>('Content CSSMotion' as any)
-          .props()
-          .onAppearPrepare();
+        container.querySelector('Content CSSMotion').onAppearPrepare();
       });
 
-      return wrapper;
+      return container;
     }
 
     it('sets transform-origin when property mousePosition is set', () => {
-      const wrapper = prepareModal({ x: 100, y: 100 });
+      const container = prepareModal({ x: 100, y: 100 });
 
-      expect(
-        (wrapper.find('.rc-dialog').at(0).getDOMNode() as HTMLDivElement).style['transform-origin'],
-      ).toBeTruthy();
+      expect(container.querySelector('.rc-dialog').style['transform-origin']).toBeTruthy();
     });
 
     it('both undefined', () => {
-      const wrapper = prepareModal({ x: undefined, y: undefined });
+      const container = prepareModal({ x: undefined, y: undefined });
 
-      expect(
-        (wrapper.find('.rc-dialog').at(0).getDOMNode() as HTMLDivElement).style['transform-origin'],
-      ).toBeFalsy();
+      expect(container.querySelector('.rc-dialog').style['transform-origin']).toBeFalsy();
     });
 
     it('one valid', () => {
-      const wrapper = prepareModal({ x: 10, y: 0 });
+      const container = prepareModal({ x: 10, y: 0 });
 
-      expect(
-        (wrapper.find('.rc-dialog').at(0).getDOMNode() as HTMLDivElement).style['transform-origin'],
-      ).toBeTruthy();
+      expect(container.querySelector('.rc-dialog').style['transform-origin']).toBeTruthy();
     });
   });
 
   it('can get dom element before dialog first show when forceRender is set true ', () => {
-    const wrapper = mount(
+    const { container } = render(
       <Dialog forceRender>
         <div>forceRender element</div>
       </Dialog>,
     );
-    expect(wrapper.find('.rc-dialog-body > div').text()).toEqual('forceRender element');
+    expect(container.querySelector('.rc-dialog-body > div').textContent).toEqual('forceRender element');
   });
 
   describe('getContainer is false', () => {
@@ -360,14 +320,14 @@ describe('dialog', () => {
 
   it('should not close if mouse down in dialog', () => {
     const onClose = jest.fn();
-    const wrapper = mount(<Dialog onClose={onClose} visible />);
-    wrapper.find('.rc-dialog-body').simulate('click');
+    const { container } = render(<Dialog onClose={onClose} visible />);
+    fireEvent.click(container.querySelector('.rc-dialog-body'));
     expect(onClose).not.toHaveBeenCalled();
   });
 
   it('zIndex', () => {
-    const wrapper = mount(<Dialog visible zIndex={903} />);
-    expect(wrapper.find('.rc-dialog-wrap').props().style.zIndex).toBe(903);
+    const { container } = render(<Dialog visible zIndex={903} />);
+    expect(container.querySelector('.rc-dialog-wrap').style.zIndex).toBe('903');
   });
 
   it('should show dialog when initialize dialog, given forceRender and visible is true', () => {
@@ -382,18 +342,17 @@ describe('dialog', () => {
       }
     }
 
-    const wrapper = mount(
+    const { container } = render(
       <DialogWrapTest>
         <div>Show dialog with forceRender and visible is true</div>
       </DialogWrapTest>,
     );
     jest.runAllTimers();
-    wrapper.update();
-    expect(wrapper.find('.rc-dialog-wrap').props().style.display).toEqual(null);
+    expect(container.querySelector('.rc-dialog-wrap').style.display).toEqual(null);
   });
 
   it('modalRender', () => {
-    const modalRender = mount(
+    const { container } = render(
       <Dialog
         visible
         modalRender={(node: React.ReactElement) =>
@@ -401,7 +360,7 @@ describe('dialog', () => {
         }
       />,
     );
-    expect(modalRender.find('.rc-dialog-section').props().style.background).toEqual('#1890ff');
+    expect(container.querySelector('.rc-dialog-section').style.background).toEqual('#1890ff');
   });
 
   describe('focusTriggerAfterClose', () => {
@@ -417,16 +376,15 @@ describe('dialog', () => {
           </>
         );
       };
-      const wrapper = mount(<Demo />, { attachTo: document.body });
-      const trigger = wrapper.find('button').at(0);
-      (trigger.getDOMNode() as any).focus();
-      trigger.simulate('click');
+      const { container } = render(<Demo />);
+      const trigger = container.querySelector('button');
+      trigger.focus();
+      fireEvent.click(trigger);
       jest.runAllTimers();
-      const closeButton = wrapper.find('.rc-dialog-close');
-      closeButton.simulate('click');
+      const closeButton = container.querySelector('.rc-dialog-close');
+      fireEvent.click(closeButton);
       jest.runAllTimers();
-      expect(document.activeElement).toBe(trigger.getDOMNode());
-      wrapper.unmount();
+      expect(document.activeElement).toBe(trigger);
     });
 
     it('should focus trigger after close dialog when contains focusable element', () => {
@@ -445,33 +403,32 @@ describe('dialog', () => {
           </>
         );
       };
-      const wrapper = mount(<Demo />, { attachTo: document.body });
-      const trigger = wrapper.find('button').at(0);
-      (trigger.getDOMNode() as any).focus();
-      trigger.simulate('click');
+      const { container } = render(<Demo />);
+      const trigger = container.querySelector('button');
+      trigger.focus();
+      fireEvent.click(trigger);
       jest.runAllTimers();
-      const closeButton = wrapper.find('.rc-dialog-close');
-      closeButton.simulate('click');
+      const closeButton = container.querySelector('.rc-dialog-close');
+      fireEvent.click(closeButton);
       jest.runAllTimers();
-      expect(document.activeElement).toBe(trigger.getDOMNode());
-      wrapper.unmount();
+      expect(document.activeElement).toBe(trigger);
     });
   });
 
   describe('size should work', () => {
     it('width', () => {
-      const wrapper = mount(<Dialog visible width={1128} />);
-      expect(wrapper.find('.rc-dialog').props().style.width).toEqual(1128);
+      const { container } = render(<Dialog visible width={1128} />);
+      expect(container.querySelector('.rc-dialog')).toHaveStyle('width: 1128px');
     });
 
     it('height', () => {
-      const wrapper = mount(<Dialog visible height={903} />);
-      expect(wrapper.find('.rc-dialog').props().style.height).toEqual(903);
+      const { container } = render(<Dialog visible height={903} />);
+      expect(container.querySelector('.rc-dialog')).toHaveStyle('height: 903px');
     });
   });
 
   describe('re-render', () => {
-    function createWrapper(props?: Partial<DialogProps>): [ReactWrapper, () => number] {
+    function createWrapper(props?: Partial<DialogProps>): [HTMLElement, () => number] {
       let renderTimes = 0;
       const RenderChecker = () => {
         renderTimes += 1;
@@ -486,26 +443,26 @@ describe('dialog', () => {
         );
       };
 
-      const wrapper = mount(<Demo />);
+      const { container } = render(<Demo />);
 
-      return [wrapper, () => renderTimes];
+      return [container, () => renderTimes];
     }
 
     it('should not re-render when visible changed', () => {
-      const [wrapper, getRenderTimes] = createWrapper();
+      const [container, getRenderTimes] = createWrapper();
       expect(getRenderTimes()).toEqual(1);
 
       // Hidden should not trigger render
-      wrapper.setProps({ visible: false });
+      render(<Dialog visible={false} />, { container });
       expect(getRenderTimes()).toEqual(1);
     });
 
     it('should re-render when forceRender', () => {
-      const [wrapper, getRenderTimes] = createWrapper({ forceRender: true });
+      const [container, getRenderTimes] = createWrapper({ forceRender: true });
       expect(getRenderTimes()).toEqual(1);
 
       // Hidden should not trigger render
-      wrapper.setProps({ visible: false });
+      render(<Dialog visible={false} />, { container });
       expect(getRenderTimes()).toEqual(2);
     });
   });
@@ -514,10 +471,10 @@ describe('dialog', () => {
     it('should trigger afterClose when set visible to false', () => {
       const afterClose = jest.fn();
 
-      const wrapper = mount(<Dialog afterClose={afterClose} visible />);
+      const { container, rerender } = render(<Dialog afterClose={afterClose} visible />);
       jest.runAllTimers();
 
-      wrapper.setProps({ visible: false });
+      rerender(<Dialog afterClose={afterClose} visible={false} />);
       jest.runAllTimers();
 
       expect(afterClose).toHaveBeenCalledTimes(1);
@@ -526,10 +483,10 @@ describe('dialog', () => {
     it('should not trigger afterClose when mount dialog of getContainer={false}', () => {
       const afterClose = jest.fn();
 
-      const wrapper = mount(<Dialog afterClose={afterClose} getContainer={false} />);
+      const { container } = render(<Dialog afterClose={afterClose} getContainer={false} />);
       jest.runAllTimers();
 
-      wrapper.setProps({ visible: false });
+      render(<Dialog afterClose={afterClose} getContainer={false} visible={false} />, { container });
       jest.runAllTimers();
 
       expect(afterClose).toHaveBeenCalledTimes(0);
@@ -538,10 +495,10 @@ describe('dialog', () => {
     it('should not trigger afterClose when mount dialog of forceRender={true}', () => {
       const afterClose = jest.fn();
 
-      const wrapper = mount(<Dialog afterClose={afterClose} forceRender />);
+      const { container } = render(<Dialog afterClose={afterClose} forceRender />);
       jest.runAllTimers();
 
-      wrapper.setProps({ visible: false });
+      render(<Dialog afterClose={afterClose} forceRender visible={false} />, { container });
       jest.runAllTimers();
 
       expect(afterClose).toHaveBeenCalledTimes(0);
@@ -572,7 +529,7 @@ describe('dialog', () => {
       expect(afterOpenChange).toHaveBeenCalledWith(true);
       expect(afterOpenChange).toHaveBeenCalledTimes(1);
 
-      rerender(<Demo />);
+      rerender(<Demo visible={false} />);
       await runFakeTimer();
       expect(afterOpenChange).toHaveBeenCalledWith(false);
       expect(afterOpenChange).toHaveBeenCalledTimes(2);
@@ -580,7 +537,7 @@ describe('dialog', () => {
   });
 
   it('should support classNames', () => {
-    const wrapper = mount(
+    const { container } = render(
       <Dialog
         visible
         title="Default"
@@ -598,19 +555,18 @@ describe('dialog', () => {
       />,
     );
     jest.runAllTimers();
-    wrapper.update();
 
-    expect(wrapper.render()).toMatchSnapshot();
-    expect(wrapper.find('.rc-dialog-wrap').props().className).toContain('custom-wrapper');
-    expect(wrapper.find('.rc-dialog-body').props().className).toContain('custom-body');
-    expect(wrapper.find('.rc-dialog-header').props().className).toContain('custom-header');
-    expect(wrapper.find('.rc-dialog-footer').props().className).toContain('custom-footer');
-    expect(wrapper.find('.rc-dialog-mask').props().className).toContain('custom-mask');
-    expect(wrapper.find('.rc-dialog-section').props().className).toContain('custom-section');
+    expect(container).toMatchSnapshot();
+    expect(container.querySelector('.rc-dialog-wrap').className).toContain('custom-wrapper');
+    expect(container.querySelector('.rc-dialog-body').className).toContain('custom-body');
+    expect(container.querySelector('.rc-dialog-header').className).toContain('custom-header');
+    expect(container.querySelector('.rc-dialog-footer').className).toContain('custom-footer');
+    expect(container.querySelector('.rc-dialog-mask').className).toContain('custom-mask');
+    expect(container.querySelector('.rc-dialog-section').className).toContain('custom-section');
   });
 
   it('should support styles', () => {
-    const wrapper = mount(
+    const { container } = render(
       <Dialog
         visible
         title="Default"
@@ -629,20 +585,20 @@ describe('dialog', () => {
       />,
     );
     jest.runAllTimers();
-    wrapper.update();
 
-    expect(wrapper.render()).toMatchSnapshot();
-    expect(wrapper.find('.rc-dialog-wrap').props().style.background).toBe('pink');
-    expect(wrapper.find('.rc-dialog-body').props().style.background).toBe('green');
-    expect(wrapper.find('.rc-dialog-header').props().style.background).toBe('red');
-    expect(wrapper.find('.rc-dialog-footer').props().style.background).toBe('blue');
-    expect(wrapper.find('.rc-dialog-mask').props().style.background).toBe('yellow');
-    expect(wrapper.find('.rc-dialog-section').props().style.background).toBe('orange');
-    expect(wrapper.find('.rc-dialog-title').props().style.background).toBe('orange');
+    expect(container).toMatchSnapshot();
+    expect(container.querySelector('.rc-dialog-wrap')).toHaveStyle('background: pink');
+    expect(container.querySelector('.rc-dialog-body')).toHaveStyle('background: green');
+    expect(container.querySelector('.rc-dialog-header')).toHaveStyle('background: red');
+    expect(container.querySelector('.rc-dialog-footer')).toHaveStyle('background: blue');
+    expect(container.querySelector('.rc-dialog-mask')).toHaveStyle('background: yellow');
+    expect(container.querySelector('.rc-dialog-section')).toHaveStyle('background: orange');
+    expect(container.querySelector('.rc-dialog-title')).toHaveStyle('background: orange');
   });
+
   it('should warning', () => {
     const spy = jest.spyOn(console, 'error').mockImplementation(() => {});
-    const wrapper = mount(
+    const { container } = render(
       <Dialog
         visible
         title="Default"
@@ -655,7 +611,6 @@ describe('dialog', () => {
       />,
     );
     jest.runAllTimers();
-    wrapper.update();
 
     expect(spy).toHaveBeenCalledWith(
       `Warning: bodyStyle is deprecated, please use styles instead.`,
@@ -671,7 +626,7 @@ describe('dialog', () => {
 
   it('support aria-* in closable', () => {
     const onClose = jest.fn();
-    const wrapper = mount(
+    const { container } = render(
       <Dialog
         closable={{
           closeIcon: 'test',
@@ -682,21 +637,19 @@ describe('dialog', () => {
       />,
     );
     jest.runAllTimers();
-    wrapper.update();
 
-    const btn = wrapper.find('.rc-dialog-close');
-    expect(btn.text()).toBe('test');
-    expect(btn.getDOMNode().getAttribute('aria-label')).toBe('test aria-label');
-    btn.simulate('click');
+    const btn = container.querySelector('.rc-dialog-close');
+    expect(btn.textContent).toBe('test');
+    expect(btn.getAttribute('aria-label')).toBe('test aria-label');
+    fireEvent.click(btn);
 
     jest.runAllTimers();
-    wrapper.update();
     expect(onClose).toHaveBeenCalledTimes(1);
   });
 
   it('support disable button in closable', () => {
     const onClose = jest.fn();
-    const wrapper = mount(
+    const { container } = render(
       <Dialog
         closable={{
           closeIcon: 'test',
@@ -707,29 +660,25 @@ describe('dialog', () => {
       />,
     );
     jest.runAllTimers();
-    wrapper.update();
 
-    const btn = wrapper.find('.rc-dialog-close');
-    expect(btn.prop('disabled')).toBe(true);
-    btn.simulate('click');
+    const btn = container.querySelector('.rc-dialog-close');
+    expect(btn.disabled).toBe(true);
+    fireEvent.click(btn);
 
     jest.runAllTimers();
-    wrapper.update();
     expect(onClose).not.toHaveBeenCalled();
 
-    btn.simulate('keydown', { key: 'Enter' });
+    fireEvent.keyDown(btn, { key: 'Enter' });
     jest.runAllTimers();
-    wrapper.update();
     expect(onClose).not.toHaveBeenCalled();
   });
 
   it('should not display closeIcon when closable is false', () => {
     const onClose = jest.fn();
-    const wrapper = mount(<Dialog closable={false} visible onClose={onClose} />);
+    const { container } = render(<Dialog closable={false} visible onClose={onClose} />);
     jest.runAllTimers();
-    wrapper.update();
 
-    const btn = wrapper.find('.rc-dialog-close');
-    expect(btn.find('.rc-dialog-close-x')).not.toBeNull();
+    const btn = container.querySelector('.rc-dialog-close');
+    expect(btn.querySelector('.rc-dialog-close-x')).not.toBeNull();
   });
 });
diff --git a/tests/portal.spec.tsx b/tests/portal.spec.tsx
index 7a665fef..c78236eb 100644
--- a/tests/portal.spec.tsx
+++ b/tests/portal.spec.tsx
@@ -1,8 +1,7 @@
 /* eslint-disable react/no-render-return-value, max-classes-per-file, func-names, no-console */
 import React from 'react';
 import Select from 'rc-select';
-import { act } from 'react-dom/test-utils';
-import { mount } from 'enzyme';
+import { render, fireEvent } from '@testing-library/react';
 import Dialog from '../src';
 
 /**
@@ -21,7 +20,7 @@ describe('Dialog.Portal', () => {
   it('event should bubble', () => {
     const onClose = jest.fn();
 
-    const wrapper = mount(
+    const { container } = render(
       <Dialog onClose={onClose} visible>
         <Select virtual={false} open>
           <Select.Option value="bamboo">Bamboo</Select.Option>
@@ -29,31 +28,27 @@ describe('Dialog.Portal', () => {
       </Dialog>,
     );
 
-    act(() => {
-      jest.runAllTimers();
-    });
+    jest.runAllTimers();
 
-    wrapper.find('.rc-dialog-section').simulate('mousedown');
-    wrapper.find('.rc-select-item-option-content').simulate('click');
-    wrapper.find('.rc-dialog-section').simulate('mouseup');
+    fireEvent.mouseDown(container.querySelector('.rc-dialog-section'));
+    fireEvent.click(container.querySelector('.rc-select-item-option-content'));
+    fireEvent.mouseUp(container.querySelector('.rc-dialog-section'));
     expect(onClose).not.toHaveBeenCalled();
   });
 
   it('dialog dont close when mouseDown in content and mouseUp in wrap', () => {
     const onClose = jest.fn();
 
-    const wrapper = mount(
+    const { container } = render(
       <Dialog onClose={onClose} visible>
         content
       </Dialog>,
     );
 
-    act(() => {
-      jest.runAllTimers();
-    });
+    jest.runAllTimers();
 
-    wrapper.find('.rc-dialog-section').simulate('mousedown');
-    wrapper.find('.rc-dialog-wrap').simulate('mouseup');
+    fireEvent.mouseDown(container.querySelector('.rc-dialog-section'));
+    fireEvent.mouseUp(container.querySelector('.rc-dialog-wrap'));
     expect(onClose).not.toHaveBeenCalled();
   });
 });
diff --git a/tests/setup.js b/tests/setup.js
index fa14f0a0..aaa253a8 100644
--- a/tests/setup.js
+++ b/tests/setup.js
@@ -24,8 +24,3 @@ console.error = (...args) => {
 
   originError(...args);
 };
-
-const Enzyme = require('enzyme');
-const Adapter = require('enzyme-adapter-react-16');
-
-Enzyme.configure({ adapter: new Adapter() });

From dfeff656cc65cf8c1d662aab653c3f0408c035a3 Mon Sep 17 00:00:00 2001
From: =?UTF-8?q?=E4=BA=8C=E8=B4=A7=E6=9C=BA=E5=99=A8=E4=BA=BA?=
 <smith3816@gmail.com>
Date: Fri, 10 Jan 2025 15:59:36 +0800
Subject: [PATCH 2/5] test: fix part

---
 tests/index.spec.tsx | 184 ++++++++++++++++++++++++-------------------
 1 file changed, 102 insertions(+), 82 deletions(-)

diff --git a/tests/index.spec.tsx b/tests/index.spec.tsx
index 6c378ec3..4cec28a2 100644
--- a/tests/index.spec.tsx
+++ b/tests/index.spec.tsx
@@ -1,9 +1,8 @@
 /* eslint-disable react/no-render-return-value, max-classes-per-file, func-names, no-console */
-import { fireEvent, render } from '@testing-library/react';
+import { fireEvent, render, act } from '@testing-library/react';
 import { Provider } from 'rc-motion';
 import KeyCode from '@rc-component/util/lib/KeyCode';
 import React, { cloneElement, useEffect } from 'react';
-import { act } from 'react-dom/test-utils';
 import type { DialogProps } from '../src';
 import Dialog from '../src';
 
@@ -27,10 +26,10 @@ describe('dialog', () => {
   });
 
   it('should render correct', () => {
-    const { container } = render(<Dialog title="Default" visible />);
+    render(<Dialog title="Default" visible />);
     jest.runAllTimers();
 
-    expect(container).toMatchSnapshot();
+    expect(document.querySelector('.rc-dialog-root')).toMatchSnapshot();
   });
 
   it('add rootClassName and rootStyle should render correct', () => {
@@ -47,22 +46,22 @@ describe('dialog', () => {
     );
     jest.runAllTimers();
 
-    expect(container).toMatchSnapshot();
+    expect(document.querySelector('.rc-dialog-root')).toMatchSnapshot();
     expect(spy).toHaveBeenCalledWith(
       `Warning: wrapStyle is deprecated, please use styles instead.`,
     );
-    expect(container.querySelector('.customize-root-class')).toBeTruthy();
-    expect(container.querySelector('.rc-dialog-wrap')).toHaveStyle('fontSize: 10px');
-    expect(container.querySelector('.rc-dialog-root')).toHaveStyle('fontSize: 20px');
-    expect(container.querySelector('.rc-dialog')).toHaveStyle('height: 903px');
-    expect(container.querySelector('.rc-dialog')).toHaveStyle('width: 600px');
+    expect(document.querySelector('.customize-root-class')).toBeTruthy();
+    expect(document.querySelector('.rc-dialog-wrap')).toHaveStyle('fontSize: 10px');
+    expect(document.querySelector('.rc-dialog-root')).toHaveStyle('fontSize: 20px');
+    expect(document.querySelector('.rc-dialog')).toHaveStyle('height: 903px');
+    expect(document.querySelector('.rc-dialog')).toHaveStyle('width: 600px');
   });
 
   it('show', () => {
     const { container } = render(<Dialog visible />);
     jest.runAllTimers();
 
-    expect(container.querySelector('.rc-dialog-wrap')).toHaveStyle('display: block');
+    expect(document.querySelector('.rc-dialog-wrap')).toHaveStyle('display: block');
   });
 
   it('close', () => {
@@ -72,15 +71,15 @@ describe('dialog', () => {
     rerender(<Dialog visible={false} />);
     jest.runAllTimers();
 
-    expect(container.querySelector('.rc-dialog-wrap')).toHaveStyle('display: none');
+    expect(document.querySelector('.rc-dialog-wrap')).toHaveStyle('display: none');
   });
 
   it('create & root & mask', () => {
     const { container } = render(<Dialog visible />);
     jest.runAllTimers();
 
-    expect(container.querySelector('.rc-dialog-root')).toBeTruthy();
-    expect(container.querySelector('.rc-dialog-mask')).toBeTruthy();
+    expect(document.querySelector('.rc-dialog-root')).toBeTruthy();
+    expect(document.querySelector('.rc-dialog-mask')).toBeTruthy();
   });
 
   it('click close', () => {
@@ -88,7 +87,7 @@ describe('dialog', () => {
     const { container } = render(<Dialog closeIcon="test" onClose={onClose} visible />);
     jest.runAllTimers();
 
-    const btn = container.querySelector('.rc-dialog-close');
+    const btn = document.querySelector('.rc-dialog-close');
     expect(btn.textContent).toBe('test');
     fireEvent.click(btn);
 
@@ -107,7 +106,7 @@ describe('dialog', () => {
       rerender(<Dialog visible={false} />);
       jest.runAllTimers();
 
-      expect(container.querySelectorAll('.test-destroy')).toHaveLength(1);
+      expect(document.querySelectorAll('.test-destroy')).toHaveLength(1);
     });
 
     it('destroy on hide should unmount child components on close', () => {
@@ -121,8 +120,8 @@ describe('dialog', () => {
       rerender(<Dialog visible />);
       jest.runAllTimers();
 
-      container.querySelector('.test-input').value = 'test';
-      expect(container.querySelector('.test-input').value).toBe('test');
+      document.querySelector('.test-input').value = 'test';
+      expect(document.querySelector('.test-input').value).toBe('test');
 
       // Hide
       rerender(<Dialog visible={false} />);
@@ -132,7 +131,7 @@ describe('dialog', () => {
       rerender(<Dialog visible />);
       jest.runAllTimers();
 
-      expect(container.querySelector('.test-input')).toBeNull();
+      expect(document.querySelector('.test-input')).toBeNull();
     });
   });
 
@@ -141,7 +140,7 @@ describe('dialog', () => {
     const { container } = render(<Dialog onClose={onClose} visible />);
     jest.runAllTimers();
 
-    fireEvent.keyDown(container.querySelector('.rc-dialog'), { keyCode: KeyCode.ESC });
+    fireEvent.keyDown(document.querySelector('.rc-dialog'), { keyCode: KeyCode.ESC });
     jest.runAllTimers();
     expect(onClose).toHaveBeenCalled();
   });
@@ -151,14 +150,14 @@ describe('dialog', () => {
     const { container, rerender } = render(<Dialog onClose={onClose} visible />);
 
     // Mask close
-    fireEvent.click(container.querySelector('.rc-dialog-wrap'));
+    fireEvent.click(document.querySelector('.rc-dialog-wrap'));
     jest.runAllTimers();
     expect(onClose).toHaveBeenCalled();
     onClose.mockReset();
 
     // Mask can not close
     rerender(<Dialog onClose={onClose} visible maskClosable={false} />);
-    fireEvent.click(container.querySelector('.rc-dialog-wrap'));
+    fireEvent.click(document.querySelector('.rc-dialog-wrap'));
     jest.runAllTimers();
     expect(onClose).not.toHaveBeenCalled();
   });
@@ -199,17 +198,17 @@ describe('dialog', () => {
       </Dialog>,
     );
 
-    expect(returnedContainer.contains(container.querySelector('.rc-dialog-wrap'))).toBeTruthy();
+    expect(returnedContainer.contains(document.querySelector('.rc-dialog-wrap'))).toBeTruthy();
   });
 
   it('render title correctly', () => {
     const { container } = render(<Dialog visible title="bamboo" />);
-    expect(container.querySelector('.rc-dialog-header').textContent).toBe('bamboo');
+    expect(document.querySelector('.rc-dialog-header').textContent).toBe('bamboo');
   });
 
   it('render footer correctly', () => {
     const { container } = render(<Dialog visible footer="test" />);
-    expect(container.querySelector('.rc-dialog-footer').textContent).toBe('test');
+    expect(document.querySelector('.rc-dialog-footer').textContent).toBe('test');
   });
 
   // 失效了，需要修复
@@ -225,28 +224,28 @@ describe('dialog', () => {
   describe('Tab should keep focus in dialog', () => {
     it('basic tabbing', () => {
       const { container } = render(<Dialog visible />);
-      const sentinelEnd = container.querySelector('.rc-dialog > div:last-child');
+      const sentinelEnd = document.querySelector('.rc-dialog > div:last-child');
       sentinelEnd.focus();
 
-      fireEvent.keyDown(container.querySelector('.rc-dialog-wrap'), {
+      fireEvent.keyDown(document.querySelector('.rc-dialog-wrap'), {
         keyCode: KeyCode.TAB,
       });
 
-      const sentinelStart = container.querySelector('.rc-dialog > div:first-child');
+      const sentinelStart = document.querySelector('.rc-dialog > div:first-child');
       expect(document.activeElement).toBe(sentinelStart);
     });
 
     it('trap focus after shift-tabbing', () => {
       const { container } = render(<Dialog visible />);
 
-      container.querySelector('.rc-dialog > div:first-child').focus();
+      document.querySelector('.rc-dialog > div:first-child').focus();
 
-      fireEvent.keyDown(container.querySelector('.rc-dialog-wrap'), {
+      fireEvent.keyDown(document.querySelector('.rc-dialog-wrap'), {
         keyCode: KeyCode.TAB,
         key: 'Tab',
         shiftKey: true,
       });
-      const sentinelEnd = container.querySelector('.rc-dialog > div:last-child');
+      const sentinelEnd = document.querySelector('.rc-dialog > div:last-child');
       expect(document.activeElement).toBe(sentinelEnd);
     });
   });
@@ -261,7 +260,7 @@ describe('dialog', () => {
 
       // Trigger position align
       act(() => {
-        container.querySelector('Content CSSMotion').onAppearPrepare();
+        document.querySelector('Content CSSMotion').onAppearPrepare();
       });
 
       return container;
@@ -270,19 +269,19 @@ describe('dialog', () => {
     it('sets transform-origin when property mousePosition is set', () => {
       const container = prepareModal({ x: 100, y: 100 });
 
-      expect(container.querySelector('.rc-dialog').style['transform-origin']).toBeTruthy();
+      expect(document.querySelector('.rc-dialog').style['transform-origin']).toBeTruthy();
     });
 
     it('both undefined', () => {
       const container = prepareModal({ x: undefined, y: undefined });
 
-      expect(container.querySelector('.rc-dialog').style['transform-origin']).toBeFalsy();
+      expect(document.querySelector('.rc-dialog').style['transform-origin']).toBeFalsy();
     });
 
     it('one valid', () => {
       const container = prepareModal({ x: 10, y: 0 });
 
-      expect(container.querySelector('.rc-dialog').style['transform-origin']).toBeTruthy();
+      expect(document.querySelector('.rc-dialog').style['transform-origin']).toBeTruthy();
     });
   });
 
@@ -292,7 +291,9 @@ describe('dialog', () => {
         <div>forceRender element</div>
       </Dialog>,
     );
-    expect(container.querySelector('.rc-dialog-body > div').textContent).toEqual('forceRender element');
+    expect(document.querySelector('.rc-dialog-body > div').textContent).toEqual(
+      'forceRender element',
+    );
   });
 
   describe('getContainer is false', () => {
@@ -303,7 +304,7 @@ describe('dialog', () => {
         </Dialog>,
       );
 
-      expect(container.querySelector('.bamboo')).toBeFalsy();
+      expect(document.querySelector('.bamboo')).toBeFalsy();
       expect(document.body.querySelector('.bamboo')).toBeTruthy();
     });
 
@@ -314,20 +315,20 @@ describe('dialog', () => {
         </Dialog>,
       );
 
-      expect(container.querySelector('.bamboo')).toBeTruthy();
+      expect(document.querySelector('.bamboo')).toBeTruthy();
     });
   });
 
   it('should not close if mouse down in dialog', () => {
     const onClose = jest.fn();
     const { container } = render(<Dialog onClose={onClose} visible />);
-    fireEvent.click(container.querySelector('.rc-dialog-body'));
+    fireEvent.click(document.querySelector('.rc-dialog-body'));
     expect(onClose).not.toHaveBeenCalled();
   });
 
   it('zIndex', () => {
     const { container } = render(<Dialog visible zIndex={903} />);
-    expect(container.querySelector('.rc-dialog-wrap').style.zIndex).toBe('903');
+    expect(document.querySelector('.rc-dialog-wrap').style.zIndex).toBe('903');
   });
 
   it('should show dialog when initialize dialog, given forceRender and visible is true', () => {
@@ -348,7 +349,7 @@ describe('dialog', () => {
       </DialogWrapTest>,
     );
     jest.runAllTimers();
-    expect(container.querySelector('.rc-dialog-wrap').style.display).toEqual(null);
+    expect(document.querySelector('.rc-dialog-wrap').style.display).toEqual(null);
   });
 
   it('modalRender', () => {
@@ -360,7 +361,7 @@ describe('dialog', () => {
         }
       />,
     );
-    expect(container.querySelector('.rc-dialog-section').style.background).toEqual('#1890ff');
+    expect(document.querySelector('.rc-dialog-section').style.background).toEqual('#1890ff');
   });
 
   describe('focusTriggerAfterClose', () => {
@@ -377,11 +378,11 @@ describe('dialog', () => {
         );
       };
       const { container } = render(<Demo />);
-      const trigger = container.querySelector('button');
+      const trigger = document.querySelector('button');
       trigger.focus();
       fireEvent.click(trigger);
       jest.runAllTimers();
-      const closeButton = container.querySelector('.rc-dialog-close');
+      const closeButton = document.querySelector('.rc-dialog-close');
       fireEvent.click(closeButton);
       jest.runAllTimers();
       expect(document.activeElement).toBe(trigger);
@@ -404,11 +405,11 @@ describe('dialog', () => {
         );
       };
       const { container } = render(<Demo />);
-      const trigger = container.querySelector('button');
+      const trigger = document.querySelector('button');
       trigger.focus();
       fireEvent.click(trigger);
       jest.runAllTimers();
-      const closeButton = container.querySelector('.rc-dialog-close');
+      const closeButton = document.querySelector('.rc-dialog-close');
       fireEvent.click(closeButton);
       jest.runAllTimers();
       expect(document.activeElement).toBe(trigger);
@@ -418,17 +419,23 @@ describe('dialog', () => {
   describe('size should work', () => {
     it('width', () => {
       const { container } = render(<Dialog visible width={1128} />);
-      expect(container.querySelector('.rc-dialog')).toHaveStyle('width: 1128px');
+      expect(document.querySelector('.rc-dialog')).toHaveStyle('width: 1128px');
     });
 
     it('height', () => {
       const { container } = render(<Dialog visible height={903} />);
-      expect(container.querySelector('.rc-dialog')).toHaveStyle('height: 903px');
+      expect(document.querySelector('.rc-dialog')).toHaveStyle('height: 903px');
     });
   });
 
   describe('re-render', () => {
-    function createWrapper(props?: Partial<DialogProps>): [HTMLElement, () => number] {
+    function createWrapper(
+      props?: Partial<DialogProps>,
+    ): [
+      container: HTMLElement,
+      getRenderTimes: () => number,
+      updateProps: (props?: Partial<DialogProps>) => void,
+    ] {
       let renderTimes = 0;
       const RenderChecker = () => {
         renderTimes += 1;
@@ -443,27 +450,35 @@ describe('dialog', () => {
         );
       };
 
-      const { container } = render(<Demo />);
+      const { container, rerender } = render(<Demo />);
 
-      return [container, () => renderTimes];
+      return [
+        container,
+        () => renderTimes,
+        (nextProps) => {
+          rerender(<Demo {...nextProps} />);
+        },
+      ];
     }
 
     it('should not re-render when visible changed', () => {
-      const [container, getRenderTimes] = createWrapper();
-      expect(getRenderTimes()).toEqual(1);
+      const [, getRenderTimes, updateProps] = createWrapper();
+      const lastRenderTimes = getRenderTimes();
+      expect(getRenderTimes()).toBeGreaterThan(0);
 
       // Hidden should not trigger render
-      render(<Dialog visible={false} />, { container });
-      expect(getRenderTimes()).toEqual(1);
+      updateProps({ visible: false });
+      expect(getRenderTimes()).toEqual(lastRenderTimes);
     });
 
     it('should re-render when forceRender', () => {
-      const [container, getRenderTimes] = createWrapper({ forceRender: true });
-      expect(getRenderTimes()).toEqual(1);
+      const [, getRenderTimes, updateProps] = createWrapper({ forceRender: true });
+      const lastRenderTimes = getRenderTimes();
+      expect(getRenderTimes()).toBeGreaterThan(0);
 
       // Hidden should not trigger render
-      render(<Dialog visible={false} />, { container });
-      expect(getRenderTimes()).toEqual(2);
+      updateProps({ visible: false });
+      expect(getRenderTimes()).toBeGreaterThan(lastRenderTimes);
     });
   });
 
@@ -486,7 +501,9 @@ describe('dialog', () => {
       const { container } = render(<Dialog afterClose={afterClose} getContainer={false} />);
       jest.runAllTimers();
 
-      render(<Dialog afterClose={afterClose} getContainer={false} visible={false} />, { container });
+      render(<Dialog afterClose={afterClose} getContainer={false} visible={false} />, {
+        container,
+      });
       jest.runAllTimers();
 
       expect(afterClose).toHaveBeenCalledTimes(0);
@@ -556,13 +573,13 @@ describe('dialog', () => {
     );
     jest.runAllTimers();
 
-    expect(container).toMatchSnapshot();
-    expect(container.querySelector('.rc-dialog-wrap').className).toContain('custom-wrapper');
-    expect(container.querySelector('.rc-dialog-body').className).toContain('custom-body');
-    expect(container.querySelector('.rc-dialog-header').className).toContain('custom-header');
-    expect(container.querySelector('.rc-dialog-footer').className).toContain('custom-footer');
-    expect(container.querySelector('.rc-dialog-mask').className).toContain('custom-mask');
-    expect(container.querySelector('.rc-dialog-section').className).toContain('custom-section');
+    expect(document.querySelector('.rc-dialog-root')).toMatchSnapshot();
+    expect(document.querySelector('.rc-dialog-wrap').className).toContain('custom-wrapper');
+    expect(document.querySelector('.rc-dialog-body').className).toContain('custom-body');
+    expect(document.querySelector('.rc-dialog-header').className).toContain('custom-header');
+    expect(document.querySelector('.rc-dialog-footer').className).toContain('custom-footer');
+    expect(document.querySelector('.rc-dialog-mask').className).toContain('custom-mask');
+    expect(document.querySelector('.rc-dialog-section').className).toContain('custom-section');
   });
 
   it('should support styles', () => {
@@ -586,19 +603,19 @@ describe('dialog', () => {
     );
     jest.runAllTimers();
 
-    expect(container).toMatchSnapshot();
-    expect(container.querySelector('.rc-dialog-wrap')).toHaveStyle('background: pink');
-    expect(container.querySelector('.rc-dialog-body')).toHaveStyle('background: green');
-    expect(container.querySelector('.rc-dialog-header')).toHaveStyle('background: red');
-    expect(container.querySelector('.rc-dialog-footer')).toHaveStyle('background: blue');
-    expect(container.querySelector('.rc-dialog-mask')).toHaveStyle('background: yellow');
-    expect(container.querySelector('.rc-dialog-section')).toHaveStyle('background: orange');
-    expect(container.querySelector('.rc-dialog-title')).toHaveStyle('background: orange');
+    expect(document.querySelector('.rc-dialog-root')).toMatchSnapshot();
+    expect(document.querySelector('.rc-dialog-wrap')).toHaveStyle('background: pink');
+    expect(document.querySelector('.rc-dialog-body')).toHaveStyle('background: green');
+    expect(document.querySelector('.rc-dialog-header')).toHaveStyle('background: red');
+    expect(document.querySelector('.rc-dialog-footer')).toHaveStyle('background: blue');
+    expect(document.querySelector('.rc-dialog-mask')).toHaveStyle('background: yellow');
+    expect(document.querySelector('.rc-dialog-section')).toHaveStyle('background: orange');
+    expect(document.querySelector('.rc-dialog-title')).toHaveStyle('background: orange');
   });
 
   it('should warning', () => {
     const spy = jest.spyOn(console, 'error').mockImplementation(() => {});
-    const { container } = render(
+    render(
       <Dialog
         visible
         title="Default"
@@ -638,7 +655,7 @@ describe('dialog', () => {
     );
     jest.runAllTimers();
 
-    const btn = container.querySelector('.rc-dialog-close');
+    const btn = document.querySelector('.rc-dialog-close');
     expect(btn.textContent).toBe('test');
     expect(btn.getAttribute('aria-label')).toBe('test aria-label');
     fireEvent.click(btn);
@@ -661,7 +678,7 @@ describe('dialog', () => {
     );
     jest.runAllTimers();
 
-    const btn = container.querySelector('.rc-dialog-close');
+    const btn = document.querySelector('.rc-dialog-close');
     expect(btn.disabled).toBe(true);
     fireEvent.click(btn);
 
@@ -675,10 +692,13 @@ describe('dialog', () => {
 
   it('should not display closeIcon when closable is false', () => {
     const onClose = jest.fn();
-    const { container } = render(<Dialog closable={false} visible onClose={onClose} />);
-    jest.runAllTimers();
+    render(<Dialog closable={false} visible onClose={onClose} />);
+
+    act(() => {
+      jest.runAllTimers();
+    });
 
-    const btn = container.querySelector('.rc-dialog-close');
-    expect(btn.querySelector('.rc-dialog-close-x')).not.toBeNull();
+    expect(document.querySelector('.rc-dialog')).toBeTruthy();
+    expect(document.querySelector('.rc-dialog-close')).toBeFalsy();
   });
 });

From b5003e4c74df578cba09386fee5e1d99ac825416 Mon Sep 17 00:00:00 2001
From: =?UTF-8?q?=E4=BA=8C=E8=B4=A7=E6=9C=BA=E5=99=A8=E4=BA=BA?=
 <smith3816@gmail.com>
Date: Fri, 10 Jan 2025 16:39:24 +0800
Subject: [PATCH 3/5] test: fix lint

---
 tests/index.spec.tsx | 174 +++++++++++++++++++++++++------------------
 tests/setup.js       |   2 +-
 2 files changed, 102 insertions(+), 74 deletions(-)

diff --git a/tests/index.spec.tsx b/tests/index.spec.tsx
index 4cec28a2..f160d3ac 100644
--- a/tests/index.spec.tsx
+++ b/tests/index.spec.tsx
@@ -6,6 +6,24 @@ import React, { cloneElement, useEffect } from 'react';
 import type { DialogProps } from '../src';
 import Dialog from '../src';
 
+jest.mock('rc-motion', () => {
+  const OriReact = jest.requireActual('react');
+  const origin = jest.requireActual('rc-motion');
+  const OriCSSMotion = origin.default;
+
+  const ProxyCSSMotion = OriReact.forwardRef((props: any, ref: any) => {
+    global.onAppearPrepare = props.onAppearPrepare;
+
+    return <OriCSSMotion {...props} ref={ref} />;
+  });
+
+  return {
+    ...origin,
+    default: ProxyCSSMotion,
+    __esModule: true,
+  };
+});
+
 describe('dialog', () => {
   async function runFakeTimer() {
     for (let i = 0; i < 100; i += 1) {
@@ -34,7 +52,7 @@ describe('dialog', () => {
 
   it('add rootClassName and rootStyle should render correct', () => {
     const spy = jest.spyOn(console, 'error').mockImplementation(() => {});
-    const { container } = render(
+    render(
       <Dialog
         visible
         rootClassName="customize-root-class"
@@ -58,14 +76,14 @@ describe('dialog', () => {
   });
 
   it('show', () => {
-    const { container } = render(<Dialog visible />);
+    render(<Dialog visible />);
     jest.runAllTimers();
 
     expect(document.querySelector('.rc-dialog-wrap')).toHaveStyle('display: block');
   });
 
   it('close', () => {
-    const { container, rerender } = render(<Dialog visible />);
+    const { rerender } = render(<Dialog visible />);
     jest.runAllTimers();
 
     rerender(<Dialog visible={false} />);
@@ -75,7 +93,7 @@ describe('dialog', () => {
   });
 
   it('create & root & mask', () => {
-    const { container } = render(<Dialog visible />);
+    render(<Dialog visible />);
     jest.runAllTimers();
 
     expect(document.querySelector('.rc-dialog-root')).toBeTruthy();
@@ -84,7 +102,7 @@ describe('dialog', () => {
 
   it('click close', () => {
     const onClose = jest.fn();
-    const { container } = render(<Dialog closeIcon="test" onClose={onClose} visible />);
+    render(<Dialog closeIcon="test" onClose={onClose} visible />);
     jest.runAllTimers();
 
     const btn = document.querySelector('.rc-dialog-close');
@@ -97,7 +115,7 @@ describe('dialog', () => {
 
   describe('destroyOnClose', () => {
     it('default is false', () => {
-      const { container, rerender } = render(
+      const { rerender } = render(
         <Dialog visible>
           <input className="test-destroy" />
         </Dialog>,
@@ -110,34 +128,42 @@ describe('dialog', () => {
     });
 
     it('destroy on hide should unmount child components on close', () => {
-      const { container, rerender } = render(
-        <Dialog destroyOnClose>
+      const Demo = (props?: Partial<DialogProps>) => (
+        <Dialog destroyOnClose {...props}>
           <input className="test-input" />
-        </Dialog>,
+        </Dialog>
       );
 
-      // Show
-      rerender(<Dialog visible />);
-      jest.runAllTimers();
+      const { rerender } = render(<Demo />);
 
-      document.querySelector('.test-input').value = 'test';
-      expect(document.querySelector('.test-input').value).toBe('test');
+      // Show
+      rerender(<Demo visible />);
+      act(() => {
+        jest.runAllTimers();
+      });
+      document.querySelector<HTMLInputElement>('.test-input').value = 'test';
+      expect(document.querySelector<HTMLInputElement>('.test-input')).toHaveValue('test');
 
       // Hide
-      rerender(<Dialog visible={false} />);
-      jest.runAllTimers();
+      rerender(<Demo visible={false} />);
+      act(() => {
+        jest.runAllTimers();
+      });
+      expect(document.querySelector<HTMLInputElement>('.test-input')).toBeFalsy();
 
       // Show
-      rerender(<Dialog visible />);
-      jest.runAllTimers();
+      rerender(<Demo visible />);
+      act(() => {
+        jest.runAllTimers();
+      });
 
-      expect(document.querySelector('.test-input')).toBeNull();
+      expect(document.querySelector<HTMLInputElement>('.test-input')).toHaveValue('');
     });
   });
 
   it('esc to close', () => {
     const onClose = jest.fn();
-    const { container } = render(<Dialog onClose={onClose} visible />);
+    render(<Dialog onClose={onClose} visible />);
     jest.runAllTimers();
 
     fireEvent.keyDown(document.querySelector('.rc-dialog'), { keyCode: KeyCode.ESC });
@@ -147,7 +173,7 @@ describe('dialog', () => {
 
   it('mask to close', () => {
     const onClose = jest.fn();
-    const { container, rerender } = render(<Dialog onClose={onClose} visible />);
+    const { rerender } = render(<Dialog onClose={onClose} visible />);
 
     // Mask close
     fireEvent.click(document.querySelector('.rc-dialog-wrap'));
@@ -165,49 +191,41 @@ describe('dialog', () => {
   it('renderToBody', () => {
     const container = document.createElement('div');
     document.body.appendChild(container);
-    const { container: renderContainer, rerender } = render(
-      <Dialog visible={false}>
+    render(
+      <Dialog visible>
         <p className="renderToBody">1</p>
       </Dialog>,
       { container },
     );
 
-    expect(renderContainer.querySelector('.renderToBody')).toBeNull();
-    expect(renderContainer.querySelector('.rc-dialog-wrap')).toBeNull();
-
-    // Visible
-    rerender(
-      <Dialog visible>
-        <p className="renderToBody">1</p>
-      </Dialog>,
-    );
-    jest.runAllTimers();
+    act(() => {
+      jest.runAllTimers();
+    });
 
-    expect(renderContainer.querySelector('.rc-dialog-wrap')).toBeTruthy();
-    expect(renderContainer.querySelector('.renderToBody')).toBeTruthy();
-    expect(container.contains(renderContainer.querySelector('.rc-dialog-wrap'))).toBeFalsy();
+    expect(container.querySelector('.rc-dialog')).toBeFalsy();
+    expect(document.body.querySelector('.rc-dialog')).toBeTruthy();
 
     document.body.removeChild(container);
   });
 
   it('getContainer', () => {
     const returnedContainer = document.createElement('div');
-    const { container } = render(
+    render(
       <Dialog visible getContainer={() => returnedContainer}>
         <p className="getContainer">Hello world!</p>
       </Dialog>,
     );
 
-    expect(returnedContainer.contains(document.querySelector('.rc-dialog-wrap'))).toBeTruthy();
+    expect(returnedContainer.querySelector('.rc-dialog')).toBeTruthy();
   });
 
   it('render title correctly', () => {
-    const { container } = render(<Dialog visible title="bamboo" />);
+    render(<Dialog visible title="bamboo" />);
     expect(document.querySelector('.rc-dialog-header').textContent).toBe('bamboo');
   });
 
   it('render footer correctly', () => {
-    const { container } = render(<Dialog visible footer="test" />);
+    render(<Dialog visible footer="test" />);
     expect(document.querySelector('.rc-dialog-footer').textContent).toBe('test');
   });
 
@@ -223,8 +241,8 @@ describe('dialog', () => {
 
   describe('Tab should keep focus in dialog', () => {
     it('basic tabbing', () => {
-      const { container } = render(<Dialog visible />);
-      const sentinelEnd = document.querySelector('.rc-dialog > div:last-child');
+      render(<Dialog visible />);
+      const sentinelEnd = document.querySelector<HTMLDivElement>('.rc-dialog > div:last-child');
       sentinelEnd.focus();
 
       fireEvent.keyDown(document.querySelector('.rc-dialog-wrap'), {
@@ -236,9 +254,9 @@ describe('dialog', () => {
     });
 
     it('trap focus after shift-tabbing', () => {
-      const { container } = render(<Dialog visible />);
+      render(<Dialog visible />);
 
-      document.querySelector('.rc-dialog > div:first-child').focus();
+      document.querySelector<HTMLDivElement>('.rc-dialog > div:first-child').focus();
 
       fireEvent.keyDown(document.querySelector('.rc-dialog-wrap'), {
         keyCode: KeyCode.TAB,
@@ -260,33 +278,39 @@ describe('dialog', () => {
 
       // Trigger position align
       act(() => {
-        document.querySelector('Content CSSMotion').onAppearPrepare();
+        global.onAppearPrepare?.();
       });
 
       return container;
     }
 
     it('sets transform-origin when property mousePosition is set', () => {
-      const container = prepareModal({ x: 100, y: 100 });
+      prepareModal({ x: 100, y: 100 });
 
-      expect(document.querySelector('.rc-dialog').style['transform-origin']).toBeTruthy();
+      expect(
+        document.querySelector<HTMLElement>('.rc-dialog').style['transform-origin'],
+      ).toBeTruthy();
     });
 
     it('both undefined', () => {
-      const container = prepareModal({ x: undefined, y: undefined });
+      prepareModal({ x: undefined, y: undefined });
 
-      expect(document.querySelector('.rc-dialog').style['transform-origin']).toBeFalsy();
+      expect(
+        document.querySelector<HTMLElement>('.rc-dialog').style['transform-origin'],
+      ).toBeFalsy();
     });
 
     it('one valid', () => {
-      const container = prepareModal({ x: 10, y: 0 });
+      prepareModal({ x: 10, y: 0 });
 
-      expect(document.querySelector('.rc-dialog').style['transform-origin']).toBeTruthy();
+      expect(
+        document.querySelector<HTMLElement>('.rc-dialog').style['transform-origin'],
+      ).toBeTruthy();
     });
   });
 
   it('can get dom element before dialog first show when forceRender is set true ', () => {
-    const { container } = render(
+    render(
       <Dialog forceRender>
         <div>forceRender element</div>
       </Dialog>,
@@ -304,7 +328,7 @@ describe('dialog', () => {
         </Dialog>,
       );
 
-      expect(document.querySelector('.bamboo')).toBeFalsy();
+      expect(container.querySelector('.bamboo')).toBeFalsy();
       expect(document.body.querySelector('.bamboo')).toBeTruthy();
     });
 
@@ -315,20 +339,20 @@ describe('dialog', () => {
         </Dialog>,
       );
 
-      expect(document.querySelector('.bamboo')).toBeTruthy();
+      expect(container.querySelector('.bamboo')).toBeTruthy();
     });
   });
 
   it('should not close if mouse down in dialog', () => {
     const onClose = jest.fn();
-    const { container } = render(<Dialog onClose={onClose} visible />);
+    render(<Dialog onClose={onClose} visible />);
     fireEvent.click(document.querySelector('.rc-dialog-body'));
     expect(onClose).not.toHaveBeenCalled();
   });
 
   it('zIndex', () => {
-    const { container } = render(<Dialog visible zIndex={903} />);
-    expect(document.querySelector('.rc-dialog-wrap').style.zIndex).toBe('903');
+    render(<Dialog visible zIndex={903} />);
+    expect(document.querySelector('.rc-dialog-wrap')).toHaveStyle('z-index: 903');
   });
 
   it('should show dialog when initialize dialog, given forceRender and visible is true', () => {
@@ -343,17 +367,21 @@ describe('dialog', () => {
       }
     }
 
-    const { container } = render(
+    render(
       <DialogWrapTest>
         <div>Show dialog with forceRender and visible is true</div>
       </DialogWrapTest>,
     );
-    jest.runAllTimers();
-    expect(document.querySelector('.rc-dialog-wrap').style.display).toEqual(null);
+
+    act(() => {
+      jest.runAllTimers();
+    });
+
+    expect(document.querySelector('.rc-dialog-wrap')).toHaveStyle('display: block');
   });
 
   it('modalRender', () => {
-    const { container } = render(
+    render(
       <Dialog
         visible
         modalRender={(node: React.ReactElement) =>
@@ -361,7 +389,7 @@ describe('dialog', () => {
         }
       />,
     );
-    expect(document.querySelector('.rc-dialog-section').style.background).toEqual('#1890ff');
+    expect(document.querySelector('.rc-dialog-section')).toHaveStyle('background: #1890ff');
   });
 
   describe('focusTriggerAfterClose', () => {
@@ -377,7 +405,7 @@ describe('dialog', () => {
           </>
         );
       };
-      const { container } = render(<Demo />);
+      render(<Demo />);
       const trigger = document.querySelector('button');
       trigger.focus();
       fireEvent.click(trigger);
@@ -404,7 +432,7 @@ describe('dialog', () => {
           </>
         );
       };
-      const { container } = render(<Demo />);
+      render(<Demo />);
       const trigger = document.querySelector('button');
       trigger.focus();
       fireEvent.click(trigger);
@@ -418,12 +446,12 @@ describe('dialog', () => {
 
   describe('size should work', () => {
     it('width', () => {
-      const { container } = render(<Dialog visible width={1128} />);
+      render(<Dialog visible width={1128} />);
       expect(document.querySelector('.rc-dialog')).toHaveStyle('width: 1128px');
     });
 
     it('height', () => {
-      const { container } = render(<Dialog visible height={903} />);
+      render(<Dialog visible height={903} />);
       expect(document.querySelector('.rc-dialog')).toHaveStyle('height: 903px');
     });
   });
@@ -486,7 +514,7 @@ describe('dialog', () => {
     it('should trigger afterClose when set visible to false', () => {
       const afterClose = jest.fn();
 
-      const { container, rerender } = render(<Dialog afterClose={afterClose} visible />);
+      const { rerender } = render(<Dialog afterClose={afterClose} visible />);
       jest.runAllTimers();
 
       rerender(<Dialog afterClose={afterClose} visible={false} />);
@@ -554,7 +582,7 @@ describe('dialog', () => {
   });
 
   it('should support classNames', () => {
-    const { container } = render(
+    render(
       <Dialog
         visible
         title="Default"
@@ -583,7 +611,7 @@ describe('dialog', () => {
   });
 
   it('should support styles', () => {
-    const { container } = render(
+    render(
       <Dialog
         visible
         title="Default"
@@ -643,7 +671,7 @@ describe('dialog', () => {
 
   it('support aria-* in closable', () => {
     const onClose = jest.fn();
-    const { container } = render(
+    render(
       <Dialog
         closable={{
           closeIcon: 'test',
@@ -666,7 +694,7 @@ describe('dialog', () => {
 
   it('support disable button in closable', () => {
     const onClose = jest.fn();
-    const { container } = render(
+    render(
       <Dialog
         closable={{
           closeIcon: 'test',
@@ -678,8 +706,8 @@ describe('dialog', () => {
     );
     jest.runAllTimers();
 
-    const btn = document.querySelector('.rc-dialog-close');
-    expect(btn.disabled).toBe(true);
+    const btn = document.querySelector<HTMLButtonElement>('.rc-dialog-close');
+    expect(btn.disabled).toBeTruthy();
     fireEvent.click(btn);
 
     jest.runAllTimers();
diff --git a/tests/setup.js b/tests/setup.js
index aaa253a8..c0abb843 100644
--- a/tests/setup.js
+++ b/tests/setup.js
@@ -18,7 +18,7 @@ const ignoreList = [
   'Warning: unmountComponentAtNode():',
 ];
 console.error = (...args) => {
-  if (ignoreList.some((str) => args[0].includes(str))) {
+  if (ignoreList.some((str) => String(args[0]).includes(str))) {
     return;
   }
 

From 73432989a9ecd3884f7d06aa997dbd8f8484c44d Mon Sep 17 00:00:00 2001
From: =?UTF-8?q?=E4=BA=8C=E8=B4=A7=E6=9C=BA=E5=99=A8=E4=BA=BA?=
 <smith3816@gmail.com>
Date: Fri, 10 Jan 2025 16:47:27 +0800
Subject: [PATCH 4/5] test: fix test case

---
 tests/portal.spec.tsx | 14 +++++++-------
 1 file changed, 7 insertions(+), 7 deletions(-)

diff --git a/tests/portal.spec.tsx b/tests/portal.spec.tsx
index c78236eb..4079cbc7 100644
--- a/tests/portal.spec.tsx
+++ b/tests/portal.spec.tsx
@@ -20,7 +20,7 @@ describe('Dialog.Portal', () => {
   it('event should bubble', () => {
     const onClose = jest.fn();
 
-    const { container } = render(
+    render(
       <Dialog onClose={onClose} visible>
         <Select virtual={false} open>
           <Select.Option value="bamboo">Bamboo</Select.Option>
@@ -30,16 +30,16 @@ describe('Dialog.Portal', () => {
 
     jest.runAllTimers();
 
-    fireEvent.mouseDown(container.querySelector('.rc-dialog-section'));
-    fireEvent.click(container.querySelector('.rc-select-item-option-content'));
-    fireEvent.mouseUp(container.querySelector('.rc-dialog-section'));
+    fireEvent.mouseDown(document.querySelector('.rc-dialog-section'));
+    fireEvent.click(document.querySelector('.rc-select-item-option-content'));
+    fireEvent.mouseUp(document.querySelector('.rc-dialog-section'));
     expect(onClose).not.toHaveBeenCalled();
   });
 
   it('dialog dont close when mouseDown in content and mouseUp in wrap', () => {
     const onClose = jest.fn();
 
-    const { container } = render(
+    render(
       <Dialog onClose={onClose} visible>
         content
       </Dialog>,
@@ -47,8 +47,8 @@ describe('Dialog.Portal', () => {
 
     jest.runAllTimers();
 
-    fireEvent.mouseDown(container.querySelector('.rc-dialog-section'));
-    fireEvent.mouseUp(container.querySelector('.rc-dialog-wrap'));
+    fireEvent.mouseDown(document.querySelector('.rc-dialog-section'));
+    fireEvent.mouseUp(document.querySelector('.rc-dialog-wrap'));
     expect(onClose).not.toHaveBeenCalled();
   });
 });

From 3bccc811e0d72f30f8a0eaa47f5d0db9d6d1a006 Mon Sep 17 00:00:00 2001
From: =?UTF-8?q?=E4=BA=8C=E8=B4=A7=E6=9C=BA=E5=99=A8=E4=BA=BA?=
 <smith3816@gmail.com>
Date: Fri, 10 Jan 2025 16:49:39 +0800
Subject: [PATCH 5/5] chore: adjust package.json

---
 package.json | 10 +++++-----
 1 file changed, 5 insertions(+), 5 deletions(-)

diff --git a/package.json b/package.json
index feb3d36c..35225444 100644
--- a/package.json
+++ b/package.json
@@ -58,7 +58,7 @@
   "devDependencies": {
     "@rc-component/father-plugin": "^2.0.1",
     "@testing-library/jest-dom": "^6.1.6",
-    "@testing-library/react": "^12.0.0",
+    "@testing-library/react": "^13.0.0",
     "@types/jest": "^29.4.0",
     "@types/keyv": "3.1.4",
     "@types/react": "^18.0.24",
@@ -82,13 +82,13 @@
     "rc-drawer": "^7.0.0",
     "rc-select": "^14.11.0",
     "rc-test": "^7.0.14",
-    "react": "^16.9.0",
-    "react-dom": "^16.9.0",
+    "react": "^18.0.0",
+    "react-dom": "^18.0.0",
     "react-draggable": "^4.4.3",
     "typescript": "^5.4.3"
   },
   "peerDependencies": {
-    "react": ">=16.9.0",
-    "react-dom": ">=16.9.0"
+    "react": ">=18.0.0",
+    "react-dom": ">=18.0.0"
   }
 }