chore: auto merge branchs (#35054)

chore: sync master into next

.github/workflows/issues-similarity-analysis.yml

@@ -14,7 +14,7 @@ jobs:
     runs-on: ubuntu-latest
     steps:
       - name: analysis
-        uses: actions-cool/issues-similarity-analysis@v1.1.0
+        uses: actions-cool/issues-similarity-analysis@v1
         with:
           filter-threshold: 0.5
           title-excludes: ''

.github/workflows/verify-files-modify.yml

@@ -20,6 +20,7 @@ jobs:
           forbid-files: 'CHANGELOG.zh-CN.md, CHANGELOG.en-US.md, LICENSE'
           skip-verify-authority: 'write'
           assignees: 'afc163, zombieJ, xrkffgg, MadCcc'
+          comment-mark: 'version'
           comment: |
             Hi @${{ github.event.pull_request.user.login }}. Thanks for your contribution. The path `.github/` or `scripts/` and `CHANGELOG` `package.json` is only maintained by team members. This current PR will be closed and team members will help on this.
           close: true
@@ -30,6 +31,7 @@ jobs:
         with:
           forbid-files: 'components/style/themes/default.less'
           skip-verify-authority: 'admin'
+          comment-mark: 'less'
           comment: |
             🚨 Hi @${{ github.event.pull_request.user.login }}. Thanks for your contribution, as the `default.less` file is currently being upgraded, changes are not recommended.
 

components/affix/demo/basic.md

@@ -38,5 +38,5 @@ const Demo: React.FC = () => {
   );
 };
 
-export default () => <Demo />;
+export default Demo;
 ```

components/affix/demo/debug.md

@@ -35,5 +35,5 @@ const Demo: React.FC = () => {
   );
 };
 
-export default () => <Demo />;
+export default Demo;
 ```

components/affix/demo/target.md

@@ -30,7 +30,7 @@ const Demo: React.FC = () => {
   );
 };
 
-export default () => <Demo />;
+export default Demo;
 ```
 
 <style>

components/alert/demo/smooth-closed.md

@@ -32,5 +32,5 @@ const App: React.FC = () => {
   );
 };
 
-export default () => <App />;
+export default App;
 ```

components/avatar/__tests__/Avatar.test.js

@@ -2,7 +2,7 @@ import React from 'react';
 import ReactDOM from 'react-dom';
 import { act } from 'react-dom/test-utils';
 import { mount } from 'enzyme';
-import { render } from '@testing-library/react';
+import { fireEvent, render } from '@testing-library/react';
 import Avatar from '..';
 import mountTest from '../../../tests/shared/mountTest';
 import rtlTest from '../../../tests/shared/rtlTest';
@@ -175,8 +175,8 @@ describe('Avatar Render', () => {
 
   it('support onMouseEnter', () => {
     const onMouseEnter = jest.fn();
-    const wrapper = mount(<Avatar onMouseEnter={onMouseEnter}>TestString</Avatar>);
+    const { container } = render(<Avatar onMouseEnter={onMouseEnter}>TestString</Avatar>);
-    wrapper.simulate('mouseenter');
+    fireEvent.mouseEnter(container.firstChild);
     expect(onMouseEnter).toHaveBeenCalled();
   });
 

components/avatar/demo/group.md

@@ -66,5 +66,5 @@ const Demo = () => (
   </>
 );
 
-export default () => <Demo />;
+export default Demo;
 ```

components/avatar/demo/toggle-debug.md

@@ -71,5 +71,5 @@ const App: React.FC = () => {
   );
 };
 
-export default () => <App />;
+export default App;
 ```

components/badge/__tests__/index.test.js

@@ -1,6 +1,7 @@
 import React from 'react';
 import { mount } from 'enzyme';
 import { act } from 'react-dom/test-utils';
+import { fireEvent, render } from '@testing-library/react';
 import Badge from '../index';
 import Tooltip from '../../tooltip';
 import mountTest from '../../../tests/shared/mountTest';
@@ -54,14 +55,14 @@ describe('Badge', () => {
   // https://github.com/ant-design/ant-design/issues/10626
   it('should be composable with Tooltip', () => {
     const ref = React.createRef();
-    const wrapper = mount(
+    const { container } = render(
       <Tooltip title="Fix the error" ref={ref}>
         <Badge status="error" />
       </Tooltip>,
     );
 
     act(() => {
-      wrapper.find('Badge').simulate('mouseenter');
+      fireEvent.mouseEnter(container.querySelector('.ant-badge'));
       jest.runAllTimers();
     });
     expect(ref.current.props.visible).toBeTruthy();

components/badge/demo/change.md

@@ -74,5 +74,5 @@ class Demo extends React.Component {
   }
 }
 
-export default () => <Demo />;
+export default Demo;
 ```

components/badge/demo/no-wrapper.md

@@ -36,5 +36,5 @@ const Demo = () => {
   );
 };
 
-export default () => <Demo />;
+export default Demo;
 ```

components/button/__tests__/index.test.tsx

@@ -1,6 +1,6 @@
 import React, { Component } from 'react';
 import { mount } from 'enzyme';
-import { render } from '@testing-library/react';
+import { fireEvent, render } from '@testing-library/react';
 import { act } from 'react-dom/test-utils';
 import { SearchOutlined } from '@ant-design/icons';
 import { resetWarned } from 'rc-util/lib/warning';
@@ -194,12 +194,12 @@ describe('Button', () => {
 
   it('should not clickable when button is loading', () => {
     const onClick = jest.fn();
-    const wrapper = mount(
+    const { container } = render(
       <Button loading onClick={onClick}>
         button
       </Button>,
     );
-    wrapper.simulate('click');
+    fireEvent.click(container.firstChild!);
     expect(onClick).not.toHaveBeenCalledWith();
   });
 
@@ -313,12 +313,12 @@ describe('Button', () => {
 
   it('should not redirect when button is disabled', () => {
     const onClick = jest.fn();
-    const wrapper = mount(
+    const { container } = render(
       <Button href="https://ant.design" onClick={onClick} disabled>
         click me
       </Button>,
     );
-    wrapper.simulate('click');
+    fireEvent.click(container.firstChild!);
     expect(onClick).not.toHaveBeenCalled();
   });
 

components/button/demo/loading.md

@@ -81,5 +81,5 @@ class App extends React.Component {
   }
 }
 
-export default () => <App />;
+export default App;
 ```

components/calendar/demo/select.md

@@ -47,5 +47,5 @@ class App extends React.Component {
   }
 }
 
-export default () => <App />;
+export default App;
 ```

components/card/demo/loading.md

@@ -64,5 +64,5 @@ class App extends React.Component {
   }
 }
 
-export default () => <App />;
+export default App;
 ```

components/cascader/demo/multiple.md

@@ -66,5 +66,5 @@ const App = () => {
   );
 };
 
-export default () => <App />;
+export default App;
 ```

components/checkbox/demo/check-all.md

@@ -49,5 +49,5 @@ const App = () => {
   );
 };
 
-export default () => <App />;
+export default App;
 ```

components/checkbox/demo/controller.md

@@ -70,5 +70,5 @@ class App extends React.Component {
   }
 }
 
-export default () => <App />;
+export default App;
 ```

components/collapse/demo/extra.md

@@ -82,5 +82,5 @@ class Demo extends React.Component {
   }
 }
 
-export default () => <Demo />;
+export default Demo;
 ```

components/comment/demo/basic.md

@@ -73,7 +73,7 @@ const Demo = () => {
   );
 };
 
-export default () => <Demo />;
+export default Demo;
 ```
 
 ```css

components/comment/demo/editor.md

@@ -102,5 +102,5 @@ class App extends React.Component {
   }
 }
 
-export default () => <App />;
+export default App;
 ```

components/config-provider/__tests__/__snapshots__/components.test.js.snap

@@ -37829,22 +37829,22 @@ exports[`ConfigProvider components Upload prefixCls 1`] = `
     </span>
   </div>
   <div
-    class="ant-upload-list ant-upload-list-text"
+    class="prefix-Upload-list prefix-Upload-list-text"
   >
     <div
-      class="ant-upload-list-text-container"
+      class="prefix-Upload-list-text-container"
     >
       <div
-        class="ant-upload-list-item ant-upload-list-item-done ant-upload-list-item-list-type-text"
+        class="prefix-Upload-list-item prefix-Upload-list-item-done prefix-Upload-list-item-list-type-text"
       >
         <div
-          class="ant-upload-list-item-info"
+          class="prefix-Upload-list-item-info"
         >
           <span
-            class="ant-upload-span"
+            class="prefix-Upload-span"
           >
             <div
-              class="ant-upload-text-icon"
+              class="prefix-Upload-text-icon"
             >
               <span
                 aria-label="paper-clip"
@@ -37867,16 +37867,16 @@ exports[`ConfigProvider components Upload prefixCls 1`] = `
               </span>
             </div>
             <span
-              class="ant-upload-list-item-name"
+              class="prefix-Upload-list-item-name"
               title="xxx.png"
             >
               xxx.png
             </span>
             <span
-              class="ant-upload-list-item-card-actions"
+              class="prefix-Upload-list-item-card-actions"
             >
               <button
-                class="ant-btn ant-btn-text ant-btn-sm ant-btn-icon-only ant-upload-list-item-card-actions-btn"
+                class="ant-btn ant-btn-text ant-btn-sm ant-btn-icon-only prefix-Upload-list-item-card-actions-btn"
                 title="Remove file"
                 type="button"
               >

components/config-provider/__tests__/index.test.js

@@ -1,6 +1,7 @@
 import React, { useState } from 'react';
 import { mount } from 'enzyme';
 import { SmileOutlined } from '@ant-design/icons';
+import { fireEvent, render } from '@testing-library/react';
 import ConfigProvider, { ConfigContext } from '..';
 import Button from '../../button';
 import Table from '../../table';
@@ -74,11 +75,11 @@ describe('ConfigProvider', () => {
       );
     };
 
-    const wrapper = mount(<DynamicPrefixCls />);
+    const { container } = render(<DynamicPrefixCls />);
 
-    expect(wrapper.exists('button.bamboo-btn')).toBeTruthy();
+    expect(container.querySelector('button.bamboo-btn')).toBeTruthy();
-    wrapper.find('.toggle-button').first().simulate('click');
+    fireEvent.click(container.querySelector('.toggle-button'));
-    expect(wrapper.exists('button.light-btn')).toBeTruthy();
+    expect(container.querySelector('button.light-btn')).toBeTruthy();
   });
 
   it('iconPrefixCls', () => {

components/config-provider/demo/direction.md

@@ -559,7 +559,7 @@ class App extends React.Component {
   }
 }
 
-export default () => <App />;
+export default App;
 ```
 
 ```css

components/config-provider/demo/locale.md

@@ -165,7 +165,7 @@ class App extends React.Component {
   }
 }
 
-export default () => <App />;
+export default App;
 ```
 
 ```css

components/date-picker/demo/select-in-range.md

@@ -52,5 +52,5 @@ const App = () => {
   );
 };
 
-export default () => <App />;
+export default App;
 ```

components/date-picker/style/panel.less

@@ -665,7 +665,7 @@
 // Fix IE11 render bug by css hacks
 // https://github.com/ant-design/ant-design/issues/21559
 // https://codepen.io/afc163-1472555193/pen/mdJRaNj?editors=0110
-/* stylelint-disable-next-line selector-type-no-unknown,selector-no-vendor-prefix */
+/* stylelint-disable selector-type-no-unknown,selector-no-vendor-prefix */
 _:-ms-fullscreen,
 :root {
   .@{picker-prefix-cls}-range-wrapper {

components/descriptions/demo/responsive.md

@@ -46,5 +46,5 @@ const Demo = () => (
   </div>
 );
 
-export default () => <Demo />;
+export default Demo;
 ```

components/descriptions/demo/size.md

@@ -83,5 +83,5 @@ class Demo extends React.Component {
   }
 }
 
-export default () => <Demo />;
+export default Demo;
 ```

components/descriptions/demo/style.md

@@ -69,5 +69,5 @@ const Demo = () => {
   );
 };
 
-export default () => <Demo />;
+export default Demo;
 ```

components/drawer/demo/basic-right.md

@@ -39,7 +39,7 @@ const App: React.FC = () => {
   );
 };
 
-export default () => <App />;
+export default App;
 ```
 
 <style>

components/drawer/demo/config-provider.md

@@ -49,5 +49,5 @@ const App: React.FC = () => {
   );
 };
 
-export default () => <App />;
+export default App;
 ```

components/drawer/demo/extra.md

@@ -67,5 +67,5 @@ const App: React.FC = () => {
   );
 };
 
-export default () => <App />;
+export default App;
 ```

components/drawer/demo/multi-level-drawer.md

@@ -74,7 +74,7 @@ class App extends React.Component {
   }
 }
 
-export default () => <App />;
+export default App;
 ```
 
 <style>

components/drawer/demo/no-mask.md

@@ -46,5 +46,5 @@ const App: React.FC = () => {
   );
 };
 
-export default () => <App />;
+export default App;
 ```

components/drawer/demo/placement.md

@@ -69,5 +69,5 @@ class App extends React.Component {
   }
 }
 
-export default () => <App />;
+export default App;
 ```

components/drawer/demo/render-in-current.md

@@ -56,7 +56,7 @@ class App extends React.Component {
   }
 }
 
-export default () => <App />;
+export default App;
 ```
 
 ```css

components/drawer/demo/size.md

@@ -65,5 +65,5 @@ const App: React.FC = () => {
   );
 };
 
-export default () => <App />;
+export default App;
 ```

components/drawer/demo/user-profile.md

@@ -167,7 +167,7 @@ class App extends React.Component {
   }
 }
 
-export default () => <App />;
+export default App;
 ```
 
 ```css

components/dropdown/demo/loading.md

@@ -74,5 +74,5 @@ class App extends React.Component {
     );
   }
 }
-export default () => <App />;
+export default App;
 ```

components/empty/demo/config-provider.md

@@ -96,7 +96,7 @@ class Demo extends React.Component {
   }
 }
 
-export default () => <Demo />;
+export default Demo;
 ```
 
 <style>

components/form/__tests__/list.test.js

@@ -1,5 +1,4 @@
 import React from 'react';
-import { mount } from 'enzyme';
 import { act } from 'react-dom/test-utils';
 import { render, fireEvent } from '@testing-library/react';
 import Form from '..';
@@ -9,16 +8,15 @@ import { sleep } from '../../../tests/utils';
 
 describe('Form.List', () => {
   async function change(wrapper, index, value) {
-    wrapper.find(Input).at(index).simulate('change', { target: { value } });
+    fireEvent.change(wrapper.getElementsByClassName('ant-input')[index], { target: { value } });
     await sleep();
-    wrapper.update();
   }
 
   function testList(name, renderField) {
     it(name, async () => {
       jest.useFakeTimers();
 
-      const wrapper = mount(
+      const { container } = render(
         <Form>
           <Form.List name="list">
             {(fields, { add, remove }) => (
@@ -47,37 +45,35 @@ describe('Form.List', () => {
 
       function operate(className) {
         act(() => {
-          wrapper.find(className).last().simulate('click');
+          fireEvent.click(container.querySelector(className));
           jest.runAllTimers();
         });
-        wrapper.update();
       }
 
       operate('.add');
-      expect(wrapper.find(Input).length).toBe(1);
+      expect(container.getElementsByClassName('ant-input').length).toBe(1);
 
       operate('.add');
-      expect(wrapper.find(Input).length).toBe(2);
+      expect(container.getElementsByClassName('ant-input').length).toBe(2);
 
       operate('.add');
-      expect(wrapper.find(Input).length).toBe(3);
+      expect(container.getElementsByClassName('ant-input').length).toBe(3);
 
-      await change(wrapper, 2, '');
+      await change(container, 2, '');
       for (let i = 0; i < 10; i += 1) {
         act(() => {
           jest.runAllTimers();
         });
       }
-      wrapper.update();
+      expect(container.getElementsByClassName('ant-form-item-explain').length).toBe(1);
-      expect(wrapper.find('.ant-form-item-explain div').length).toBe(1);
 
       operate('.remove-0');
-      expect(wrapper.find(Input).length).toBe(2);
+      expect(container.getElementsByClassName('ant-input').length).toBe(2);
-      expect(wrapper.find('.ant-form-item-explain div').length).toBe(1);
+      expect(container.getElementsByClassName('ant-form-item-explain').length).toBe(1);
 
       operate('.remove-1');
-      expect(wrapper.find(Input).length).toBe(1);
+      expect(container.getElementsByClassName('ant-input').length).toBe(1);
-      expect(wrapper.find('.ant-form-item-explain div').length).toBe(0);
+      expect(container.getElementsByClassName('ant-form-item-explain').length).toBe(0);
 
       jest.useRealTimers();
     });
@@ -99,14 +95,12 @@ describe('Form.List', () => {
 
   it('correct onFinish values', async () => {
     async function click(wrapper, className) {
-      wrapper.find(className).last().simulate('click');
+      fireEvent.click(wrapper.querySelector(className));
-      await sleep();
-      wrapper.update();
     }
 
     const onFinish = jest.fn().mockImplementation(() => {});
 
-    const wrapper = mount(
+    const { container } = render(
       <Form
         onFinish={v => {
           if (typeof v.list[0] === 'object') {
@@ -139,22 +133,22 @@ describe('Form.List', () => {
       </Form>,
     );
 
-    await click(wrapper, '.add');
+    await click(container, '.add');
-    await change(wrapper, 0, 'input1');
+    await change(container, 0, 'input1');
-    wrapper.find('form').simulate('submit');
+    fireEvent.submit(container.querySelector('form'));
     await sleep();
     expect(onFinish).toHaveBeenLastCalledWith({ list: ['input1'] });
 
-    await click(wrapper, '.add');
+    await click(container, '.add');
-    await change(wrapper, 1, 'input2');
+    await change(container, 1, 'input2');
-    await click(wrapper, '.add');
+    await click(container, '.add');
-    await change(wrapper, 2, 'input3');
+    await change(container, 2, 'input3');
-    wrapper.find('form').simulate('submit');
+    fireEvent.submit(container.querySelector('form'));
     await sleep();
     expect(onFinish).toHaveBeenLastCalledWith({ list: ['input1', 'input2', 'input3'] });
 
-    await click(wrapper, '.remove'); // will remove first input
+    await click(container, '.remove'); // will remove first input
-    wrapper.find('form').simulate('submit');
+    fireEvent.submit(container.querySelector('form'));
     await sleep();
     expect(onFinish).toHaveBeenLastCalledWith({ list: ['input2', 'input3'] });
   });
@@ -163,7 +157,7 @@ describe('Form.List', () => {
     jest.useFakeTimers();
 
     let operation;
-    const wrapper = mount(
+    const { container } = render(
       <Form>
         <Form.List
           name="list"
@@ -190,22 +184,21 @@ describe('Form.List', () => {
         operation.add();
         await sleep(100);
         jest.runAllTimers();
-        wrapper.update();
       });
     }
 
     await addItem();
-    expect(wrapper.find('.ant-form-item-explain div').text()).toEqual('At least 2');
+    expect(container.querySelector('.ant-form-item-explain div').innerHTML).toEqual('At least 2');
 
     await addItem();
-    expect(wrapper.find('.ant-form-item-explain div')).toHaveLength(0);
+    expect(container.getElementsByClassName('ant-form-item-explain div')).toHaveLength(0);
 
     jest.useRealTimers();
   });
 
   it('should render empty without errors', () => {
-    const wrapper = mount(<Form.ErrorList />);
+    const { container } = render(<Form.ErrorList />);
-    expect(wrapper.render()).toMatchSnapshot();
+    expect(container.firstChild).toMatchSnapshot();
   });
 
   it('no warning when reset in validate', async () => {

components/form/demo/basic.md

@@ -64,5 +64,5 @@ const Demo = () => {
   );
 };
 
-export default () => <Demo />;
+export default Demo;
 ```

components/form/demo/col-24-debug.md

@@ -94,5 +94,5 @@ const Demo = () => {
   );
 };
 
-export default () => <Demo />;
+export default Demo;
 ```

components/form/demo/complex-form-control.md

@@ -125,5 +125,5 @@ const Demo = () => {
   );
 };
 
-export default () => <Demo />;
+export default Demo;
 ```

components/form/demo/control-hooks.md

@@ -104,7 +104,7 @@ const Demo = () => {
   );
 };
 
-export default () => <Demo />;
+export default Demo;
 ```
 
 ```css

components/form/demo/control-ref.md

@@ -107,7 +107,7 @@ class Demo extends React.Component {
   }
 }
 
-export default () => <Demo />;
+export default Demo;
 ```
 
 ```css

components/form/demo/customized-form-controls.md

@@ -119,5 +119,5 @@ const Demo = () => {
   );
 };
 
-export default () => <Demo />;
+export default Demo;
 ```

components/form/demo/dep-debug.md

@@ -46,5 +46,5 @@ const Demo = () => {
   );
 };
 
-export default () => <Demo />;
+export default Demo;
 ```

components/form/demo/dynamic-form-items-complex.md

@@ -103,5 +103,5 @@ const Demo = () => {
   );
 };
 
-export default () => <Demo />;
+export default Demo;
 ```

components/form/demo/dynamic-form-items-no-style.md

@@ -62,5 +62,5 @@ const Demo = () => {
   );
 };
 
-export default () => <Demo />;
+export default Demo;
 ```

components/form/demo/dynamic-form-items.md

@@ -63,5 +63,5 @@ const Demo = () => {
   );
 };
 
-export default () => <Demo />;
+export default Demo;
 ```

components/form/demo/form-context.md

@@ -145,7 +145,7 @@ const Demo = () => {
   );
 };
 
-export default () => <Demo />;
+export default Demo;
 ```
 
 ```css

components/form/demo/global-state.md

@@ -69,7 +69,7 @@ const Demo = () => {
   );
 };
 
-export default () => <Demo />;
+export default Demo;
 ```
 
 <style>

components/form/demo/label-debug.md

@@ -43,5 +43,5 @@ const Demo = () => (
   </Form>
 );
 
-export default () => <Demo />;
+export default Demo;
 ```

components/form/demo/layout-can-wrap.md

@@ -42,5 +42,5 @@ const Demo = () => (
   </Form>
 );
 
-export default () => <Demo />;
+export default Demo;
 ```

components/form/demo/nest-messages.md

@@ -65,5 +65,5 @@ const Demo = () => {
   );
 };
 
-export default () => <Demo />;
+export default Demo;
 ```

components/form/demo/ref-item.md

@@ -57,5 +57,5 @@ const Demo = () => {
   );
 };
 
-export default () => <Demo />;
+export default Demo;
 ```

components/form/demo/validate-other.md

@@ -208,5 +208,5 @@ const Demo = () => {
   );
 };
 
-export default () => <Demo />;
+export default Demo;
 ```

components/form/demo/warning-only.md

@@ -64,5 +64,5 @@ const Demo = () => {
   );
 };
 
-export default () => <Demo />;
+export default Demo;
 ```

components/grid/demo/playground.md

@@ -113,7 +113,7 @@ class App extends React.Component {
   }
 }
 
-export default () => <App />;
+export default App;
 ```
 
 ```css

components/image/demo/preview-group-visible.md

@@ -38,5 +38,5 @@ const App = () => {
   );
 };
 
-export default () => <App />;
+export default App;
 ```

components/image/demo/preview-group.md

@@ -26,5 +26,5 @@ const App = () => (
   </Image.PreviewGroup>
 );
 
-export default () => <App />;
+export default App;
 ```

components/input-number/__tests__/prefix.test.js

@@ -1,5 +1,6 @@
 import React from 'react';
 import { mount } from 'enzyme';
+import { render } from '@testing-library/react';
 import InputNumber from '..';
 import focusTest from '../../../tests/shared/focusTest';
 
@@ -9,9 +10,9 @@ describe('prefix', () => {
     { refFocus: true },
   );
   it('should support className when has prefix', () => {
-    const wrapper = mount(<InputNumber prefix="suffix" className="my-class-name" />);
+    const { container } = render(<InputNumber prefix="suffix" className="my-class-name" />);
-    expect(wrapper.getDOMNode().className.includes('my-class-name')).toBe(true);
+    expect(container.firstChild.className.includes('my-class-name')).toBe(true);
-    expect(wrapper.find('input').getDOMNode().className.includes('my-class-name')).toBe(false);
+    expect(container.querySelector('input')?.className.includes('my-class-name')).toBe(false);
   });
 
   it('should trigger focus when prefix is clicked', () => {

components/input-number/demo/disabled.md

@@ -41,5 +41,5 @@ class App extends React.Component {
   }
 }
 
-export default () => <App />;
+export default App;
 ```

components/input-number/demo/keyboard.md

@@ -33,5 +33,5 @@ const App = () => {
   );
 };
 
-export default () => <App />;
+export default App;
 ```

components/input-number/demo/out-of-range.md

@@ -34,5 +34,5 @@ const Demo = () => {
   );
 };
 
-export default () => <Demo />;
+export default Demo;
 ```

components/input/__tests__/Search.test.js

@@ -1,5 +1,6 @@
 import React from 'react';
 import { mount } from 'enzyme';
+import { fireEvent, render } from '@testing-library/react';
 import Search from '../Search';
 import Button from '../../button';
 import focusTest from '../../../tests/shared/focusTest';
@@ -39,72 +40,84 @@ describe('Input.Search', () => {
 
   it('should disable search icon when disabled prop is true', () => {
     const onSearch = jest.fn();
-    const wrapper = mount(<Search defaultValue="search text" onSearch={onSearch} disabled />);
+    const { container } = render(
-    wrapper.find('Button').simulate('click');
+      <Search defaultValue="search text" onSearch={onSearch} disabled />,
+    );
+    fireEvent.click(container.querySelector('button'));
     expect(onSearch).toHaveBeenCalledTimes(0);
   });
 
   it('should trigger onSearch when click search icon', () => {
     const onSearch = jest.fn();
-    const wrapper = mount(<Search defaultValue="search text" onSearch={onSearch} />);
+    const { container } = render(<Search defaultValue="search text" onSearch={onSearch} />);
-    wrapper.find('Button').simulate('click');
+    fireEvent.click(container.querySelector('button'));
     expect(onSearch).toHaveBeenCalledTimes(1);
     expect(onSearch).toHaveBeenCalledWith(
       'search text',
-      expect.objectContaining({
+      expect.anything(),
-        type: 'click',
+      // FIXME: should use following code
-        preventDefault: expect.any(Function),
+      // expect.objectContaining({
-      }),
+      //   type: 'click',
+      //   preventDefault: expect.any(Function),
+      // }),
     );
   });
 
   it('should trigger onSearch when click search button', () => {
     const onSearch = jest.fn();
-    const wrapper = mount(<Search defaultValue="search text" enterButton onSearch={onSearch} />);
+    const { container } = render(
-    wrapper.find('Button').simulate('click');
+      <Search defaultValue="search text" enterButton onSearch={onSearch} />,
+    );
+    fireEvent.click(container.querySelector('button'));
     expect(onSearch).toHaveBeenCalledTimes(1);
     expect(onSearch).toHaveBeenCalledWith(
       'search text',
-      expect.objectContaining({
+      expect.anything(),
-        type: 'click',
+      // FIXME: should use following code
-        preventDefault: expect.any(Function),
+      // expect.objectContaining({
-      }),
+      //   type: 'click',
+      //   preventDefault: expect.any(Function),
+      // }),
     );
   });
 
   it('should trigger onSearch when click search button with text', () => {
     const onSearch = jest.fn();
-    const wrapper = mount(
+    const { container } = render(
       <Search defaultValue="search text" enterButton="button text" onSearch={onSearch} />,
     );
-    wrapper.find('Button').simulate('click');
+    fireEvent.click(container.querySelector('button'));
     expect(onSearch).toHaveBeenCalledTimes(1);
     expect(onSearch).toHaveBeenCalledWith(
       'search text',
-      expect.objectContaining({
+      expect.anything(),
-        type: 'click',
+      // FIXME: should use following code
-        preventDefault: expect.any(Function),
+      // expect.objectContaining({
-      }),
+      //   type: 'click',
+      //   preventDefault: expect.any(Function),
+      // }),
     );
   });
 
   it('should trigger onSearch when click search button with customize button', () => {
     const onSearch = jest.fn();
-    const wrapper = mount(
+    const { container } = render(
       <Search
         defaultValue="search text"
         enterButton={<Button>antd button</Button>}
         onSearch={onSearch}
       />,
     );
-    wrapper.find('Button').simulate('click');
+    fireEvent.click(container.querySelector('button'));
     expect(onSearch).toHaveBeenCalledTimes(1);
     expect(onSearch).toHaveBeenCalledWith(
       'search text',
-      expect.objectContaining({
+      expect.anything(),
-        type: 'click',
+      // FIXME: should use following code
-        preventDefault: expect.any(Function),
+      // expect.objectContaining({
-      }),
+      //   type: 'click',
+      //   preventDefault: expect.any(Function),
+      // }),
     );
   });
 

components/input/__tests__/index.test.tsx

@@ -88,37 +88,33 @@ describe('Input', () => {
 
 describe('prefix and suffix', () => {
   it('should support className when has suffix', () => {
-    const wrapper = mount(<Input suffix="suffix" className="my-class-name" />);
+    const { container } = render(<Input suffix="suffix" className="my-class-name" />);
-    expect(wrapper.getDOMNode().className.includes('my-class-name')).toBe(true);
+    expect((container.firstChild as Element).className.includes('my-class-name')).toBe(true);
-    expect(wrapper.find('input').getDOMNode().className.includes('my-class-name')).toBe(false);
+    expect(container.querySelector('input')?.className.includes('my-class-name')).toBe(false);
   });
 
   it('should support className when has prefix', () => {
-    const wrapper = mount(<Input prefix="prefix" className="my-class-name" />);
+    const { container } = render(<Input prefix="prefix" className="my-class-name" />);
-    expect(wrapper.getDOMNode().className.includes('my-class-name')).toBe(true);
+    expect((container.firstChild as Element).className.includes('my-class-name')).toBe(true);
-    expect(wrapper.find('input').getDOMNode().className.includes('my-class-name')).toBe(false);
+    expect(container.querySelector('input')?.className.includes('my-class-name')).toBe(false);
   });
 
   it('should support hidden when has prefix or suffix', () => {
-    const wrapper = mount(
+    const { container } = render(
       <>
         <Input prefix="prefix" hidden className="prefix-with-hidden" />
         <Input suffix="suffix" hidden className="suffix-with-hidden" />
       </>,
     );
 
-    expect(wrapper.find('.prefix-with-hidden').at(0).getDOMNode<HTMLInputElement>().hidden).toBe(
+    expect(container.querySelector('.prefix-with-hidden')?.getAttribute('hidden')).toBe('');
-      true,
+    expect(container.querySelector('.suffix-with-hidden')?.getAttribute('hidden')).toBe('');
-    );
-    expect(wrapper.find('.suffix-with-hidden').at(0).getDOMNode<HTMLInputElement>().hidden).toBe(
-      true,
-    );
   });
 });
 
 describe('Input setting hidden', () => {
   it('should support hidden when has prefix or suffix or showCount or allowClear or addonBefore or addonAfter', () => {
-    const wrapper = mount(
+    const { container } = render(
       <>
         <Input
           hidden
@@ -168,10 +164,10 @@ describe('Input setting hidden', () => {
       </>,
     );
 
-    expect(wrapper.find('.input').at(0).getDOMNode<HTMLInputElement>().hidden).toBe(true);
+    expect(container.querySelector('.input')?.getAttribute('hidden')).toBe('');
-    expect(wrapper.find('.input-search').at(0).getDOMNode<HTMLInputElement>().hidden).toBe(true);
+    expect(container.querySelector('.input-search')?.getAttribute('hidden')).toBe('');
-    expect(wrapper.find('.input-textarea').at(0).getDOMNode<HTMLInputElement>().hidden).toBe(true);
+    expect(container.querySelector('.input-textarea')?.getAttribute('hidden')).toBe('');
-    expect(wrapper.find('.input-password').at(0).getDOMNode<HTMLInputElement>().hidden).toBe(true);
+    expect(container.querySelector('.input-password')?.getAttribute('hidden')).toBe('');
   });
 });
 
@@ -330,9 +326,9 @@ describe('Input allowClear', () => {
 
   // https://github.com/ant-design/ant-design/issues/27444
   it('should support className', () => {
-    const wrapper = mount(<Input allowClear className="my-class-name" />);
+    const { container } = render(<Input allowClear className="my-class-name" />);
-    expect(wrapper.getDOMNode().className.includes('my-class-name')).toBe(true);
+    expect((container.firstChild as Element).className.includes('my-class-name')).toBe(true);
-    expect(wrapper.find('input').getDOMNode().className.includes('my-class-name')).toBe(false);
+    expect(container.querySelector('input')?.className.includes('my-class-name')).toBe(false);
   });
 
   // https://github.com/ant-design/ant-design/issues/31200

components/input/__tests__/textarea.test.js

@@ -223,12 +223,16 @@ describe('TextArea', () => {
     );
   });
 
-  it('should works same as Input', async () => {
+  it('should works same as Input', () => {
-    const input = mount(<Input value="111" />);
+    const { container: inputContainer, rerender: inputRerender } = render(<Input value="111" />);
-    const textarea = mount(<TextArea value="111" />);
+    const { container: textareaContainer, rerender: textareaRerender } = render(
-    input.setProps({ value: undefined });
+      <TextArea value="111" />,
-    textarea.setProps({ value: undefined });
+    );
-    expect(textarea.find('textarea').at(0).getDOMNode().value).toBe(input.getDOMNode().value);
+    inputRerender(<Input value={undefined} />);
+    textareaRerender(<TextArea value={undefined} />);
+    expect(textareaContainer.querySelector('textarea').value).toBe(
+      inputContainer.querySelector('input').value,
+    );
   });
 
   describe('should support showCount', () => {

components/input/demo/autosize-textarea.md

@@ -50,5 +50,5 @@ class Demo extends React.Component {
   }
 }
 
-export default () => <Demo />;
+export default Demo;
 ```

components/input/demo/focus.md

@@ -80,5 +80,5 @@ const Demo = () => {
   );
 };
 
-export default () => <Demo />;
+export default Demo;
 ```

components/input/demo/group.md

@@ -194,7 +194,7 @@ const App = () => (
   </div>
 );
 
-export default () => <App />;
+export default App;
 ```
 
 ```css

components/input/demo/textarea-resize.md

@@ -45,5 +45,5 @@ class Demo extends React.Component {
   }
 }
 
-export default () => <Demo />;
+export default Demo;
 ```

components/mentions/demo/form.md

@@ -83,5 +83,5 @@ const App = () => {
   );
 };
 
-export default () => <App />;
+export default App;
 ```

components/mentions/demo/prefix.md

@@ -52,5 +52,5 @@ class App extends React.Component {
   }
 }
 
-export default () => <App />;
+export default App;
 ```

components/mentions/demo/readonly.md

@@ -41,5 +41,5 @@ function App() {
   );
 }
 
-export default () => <App />;
+export default App;
 ```

components/menu/demo/horizontal.md

@@ -85,5 +85,5 @@ const App = () => {
   return <Menu onClick={onClick} selectedKeys={[current]} mode="horizontal" items={items} />;
 };
 
-export default () => <App />;
+export default App;
 ```

components/menu/demo/inline-collapsed.md

@@ -91,5 +91,5 @@ const App = () => {
   );
 };
 
-export default () => <App />;
+export default App;
 ```

components/menu/demo/style-debug.md

@@ -106,5 +106,5 @@ const Demo = () => {
   );
 };
 
-export default () => <Demo />;
+export default Demo;
 ```

components/menu/demo/switch-mode.md

@@ -93,5 +93,5 @@ const Demo = () => {
   );
 };
 
-export default () => <Demo />;
+export default Demo;
 ```

components/message/demo/hooks.md

@@ -38,5 +38,5 @@ function Demo() {
   );
 }
 
-export default () => <Demo />;
+export default Demo;
 ```

components/modal/demo/async.md

@@ -57,5 +57,5 @@ const App = () => {
   );
 };
 
-export default () => <App />;
+export default App;
 ```

components/modal/demo/basic.md

@@ -46,5 +46,5 @@ const App = () => {
   );
 };
 
-export default () => <App />;
+export default App;
 ```

components/modal/demo/button-props.md

@@ -62,5 +62,5 @@ class App extends React.Component {
   }
 }
 
-export default () => <App />;
+export default App;
 ```

components/modal/demo/dark.md

@@ -592,7 +592,7 @@ class App extends React.Component {
   }
 }
 
-export default () => <App />;
+export default App;
 ```
 
 <style>

components/modal/demo/footer.md

@@ -84,5 +84,5 @@ class App extends React.Component {
   }
 }
 
-export default () => <App />;
+export default App;
 ```

components/modal/demo/hooks.md

@@ -74,5 +74,5 @@ const App = () => {
   );
 };
 
-export default () => <App />;
+export default App;
 ```

components/modal/demo/modal-render.md

@@ -120,5 +120,5 @@ class App extends React.Component {
   }
 }
 
-export default () => <App />;
+export default App;
 ```

components/modal/demo/position.md

@@ -68,5 +68,5 @@ class App extends React.Component {
   }
 }
 
-export default () => <App />;
+export default App;
 ```

components/modal/demo/width.md

@@ -40,5 +40,5 @@ const App = () => {
   );
 };
 
-export default () => <App />;
+export default App;
 ```

components/notification/demo/hooks.md

@@ -63,5 +63,5 @@ const Demo = () => {
   );
 };
 
-export default () => <Demo />;
+export default Demo;
 ```

components/pagination/demo/controlled.md

@@ -33,5 +33,5 @@ class App extends React.Component {
   }
 }
 
-export default () => <App />;
+export default App;
 ```

components/popconfirm/demo/async.md

@@ -52,5 +52,5 @@ const App = () => {
   );
 };
 
-export default () => <App />;
+export default App;
 ```

components/popconfirm/demo/dynamic-trigger.md

@@ -73,5 +73,5 @@ class App extends React.Component {
   }
 }
 
-export default () => <App />;
+export default App;
 ```

components/popconfirm/demo/promise.md

@@ -34,5 +34,5 @@ const App = () => {
   );
 };
 
-export default () => <App />;
+export default App;
 ```

components/popover/demo/control.md

@@ -46,5 +46,5 @@ class App extends React.Component {
   }
 }
 
-export default () => <App />;
+export default App;
 ```

components/popover/demo/hover-with-click.md

@@ -74,5 +74,5 @@ class App extends React.Component {
   }
 }
 
-export default () => <App />;
+export default App;
 ```

components/progress/demo/circle-dynamic.md

@@ -51,5 +51,5 @@ class App extends React.Component {
   }
 }
 
-export default () => <App />;
+export default App;
 ```