From 33400eee8f002dc88de54ca3a0f4fd030d81de58 Mon Sep 17 00:00:00 2001
From: afc163 <afc163@gmail.com>
Date: Thu, 30 Jun 2022 10:21:31 +0800
Subject: [PATCH 1/9] chore: reduce css bundle size (#36307)

---
 components/select/style/single.less        | 7 -------
 components/style/core/iconfont.less        | 5 +----
 components/style/mixins/compatibility.less | 6 ------
 components/style/mixins/modal-mask.less    | 1 -
 4 files changed, 1 insertion(+), 18 deletions(-)

diff --git a/components/select/style/single.less b/components/select/style/single.less
index 500dd72988..7bf6b36aa1 100644
--- a/components/select/style/single.less
+++ b/components/select/style/single.less
@@ -25,13 +25,6 @@
       padding: 0;
       line-height: @select-height-without-border;
       transition: all 0.3s;
-
-      // Firefox inline-block position calculation is not same as Chrome & Safari. Patch this:
-      @supports (-moz-appearance: meterbar) {
-        & {
-          line-height: @select-height-without-border;
-        }
-      }
     }
 
     .@{select-prefix-cls}-selection-item {
diff --git a/components/style/core/iconfont.less b/components/style/core/iconfont.less
index f257f569c8..597b8549e9 100644
--- a/components/style/core/iconfont.less
+++ b/components/style/core/iconfont.less
@@ -15,11 +15,8 @@
   }
 }
 
+.@{iconfont-css-prefix}-spin,
 .@{iconfont-css-prefix}-spin::before {
   display: inline-block;
   animation: loadingCircle 1s infinite linear;
 }
-.@{iconfont-css-prefix}-spin {
-  display: inline-block;
-  animation: loadingCircle 1s infinite linear;
-}
diff --git a/components/style/mixins/compatibility.less b/components/style/mixins/compatibility.less
index c5fb0dbc29..9464a754a7 100644
--- a/components/style/mixins/compatibility.less
+++ b/components/style/mixins/compatibility.less
@@ -2,12 +2,6 @@
 
 // Placeholder text
 .placeholder(@color: @input-placeholder-color) {
-  // Firefox
-  /* stylelint-disable-next-line selector-no-vendor-prefix */
-  &::-moz-placeholder {
-    opacity: 1; // Override Firefox's unusual default opacity; see https://github.com/twbs/bootstrap/pull/11526
-  }
-
   &::placeholder {
     color: @color;
     user-select: none; // https://github.com/ant-design/ant-design/pull/32639
diff --git a/components/style/mixins/modal-mask.less b/components/style/mixins/modal-mask.less
index 344bb020fc..b406bc1b41 100644
--- a/components/style/mixins/modal-mask.less
+++ b/components/style/mixins/modal-mask.less
@@ -26,6 +26,5 @@
     .box(fixed);
     overflow: auto;
     outline: 0;
-    -webkit-overflow-scrolling: touch;
   }
 }

From 42e030edd98cb7cb8c8effc67816c735139614df Mon Sep 17 00:00:00 2001
From: MadCcc <1075746765@qq.com>
Date: Thu, 30 Jun 2022 11:11:01 +0800
Subject: [PATCH 2/9] fix: arrow compatibility (#36266)

* fix: arrow campatibility

* chore: code clean

* chore: rm useless style

* chore: code clean

* fix: use inset

* chore: bundlesize optimization

* chore: rm useless style

* chore: rm useless style
---
 components/date-picker/style/index.less    | 5 -----
 components/dropdown/style/index.less       | 5 -----
 components/popover/style/index.less        | 1 -
 components/style/mixins/rounded-arrow.less | 1 +
 components/tooltip/style/index.less        | 1 -
 5 files changed, 1 insertion(+), 12 deletions(-)

diff --git a/components/date-picker/style/index.less b/components/date-picker/style/index.less
index cfcdb62ebf..f428f299d6 100644
--- a/components/date-picker/style/index.less
+++ b/components/date-picker/style/index.less
@@ -322,11 +322,6 @@
     width: @arrow-size;
     height: @arrow-size;
     margin-left: @input-padding-horizontal-base * 1.5;
-    background: linear-gradient(
-      135deg,
-      transparent 40%,
-      @calendar-bg 40%
-    ); // Use linear-gradient to prevent arrow from covering text
     box-shadow: 2px 2px 6px -2px fade(@black, 10%); // use spread radius to hide shadow over popover
     transition: left @animation-duration-slow ease-out;
     .roundedArrow(@arrow-size, 5px, @calendar-bg);
diff --git a/components/dropdown/style/index.less b/components/dropdown/style/index.less
index c800c13a7c..10f8b9db11 100644
--- a/components/dropdown/style/index.less
+++ b/components/dropdown/style/index.less
@@ -70,11 +70,6 @@
     display: block;
     width: @popover-arrow-width;
     height: @popover-arrow-width;
-    background: linear-gradient(
-      135deg,
-      transparent 40%,
-      @popover-bg 40%
-    ); // Use linear-gradient to prevent arrow from covering text
     .roundedArrow(@popover-arrow-width, 5px, @popover-bg);
   }
 
diff --git a/components/popover/style/index.less b/components/popover/style/index.less
index 92f3e4d8fb..b256228c6c 100644
--- a/components/popover/style/index.less
+++ b/components/popover/style/index.less
@@ -139,7 +139,6 @@
       width: @popover-arrow-width;
       height: @popover-arrow-width;
       margin: auto;
-      background-color: @popover-bg;
       content: '';
       pointer-events: auto;
       .roundedArrow(@popover-arrow-width, 5px);
diff --git a/components/style/mixins/rounded-arrow.less b/components/style/mixins/rounded-arrow.less
index 96503d4b26..1c8264336d 100644
--- a/components/style/mixins/rounded-arrow.less
+++ b/components/style/mixins/rounded-arrow.less
@@ -36,6 +36,7 @@
     background-repeat: no-repeat;
     background-position: ceil(-@width + 1px) ceil(-@width + 1px);
     content: '';
+    clip-path: inset(33% 33%); // For browsers that do not support path()
     clip-path: path(
       'M @{a-x} @{a-y} A @{outer-radius-without-unit} @{outer-radius-without-unit} 0 0 1 @{b-x} @{b-y} L @{c-x} @{c-y} A @{inner-radius-without-unit} @{inner-radius-without-unit} 0 0 0 @{d-x} @{d-y} L @{e-x} @{e-y} A @{outer-radius-without-unit} @{outer-radius-without-unit} 0 0 1 @{f-x} @{f-y} L @{g-x} @{g-y} L @{h-x} @{h-y} Z'
     );
diff --git a/components/tooltip/style/index.less b/components/tooltip/style/index.less
index b24c2f7675..d2ad5e1263 100644
--- a/components/tooltip/style/index.less
+++ b/components/tooltip/style/index.less
@@ -97,7 +97,6 @@
       width: @tooltip-arrow-width;
       height: @tooltip-arrow-width;
       margin: auto;
-      background-color: transparent;
       content: '';
       pointer-events: auto;
       .roundedArrow(@tooltip-arrow-width, 5px);

From 5f933ebd2bdd9e5b49c3526a564f1317aaba740a Mon Sep 17 00:00:00 2001
From: Jamki <13414367591@163.com>
Date: Thu, 30 Jun 2022 13:25:47 +0800
Subject: [PATCH 3/9] =?UTF-8?q?fix:=20Fixed=20an=20error=20when=20the=20lo?=
 =?UTF-8?q?ading=20property=20of=20the=20Button=20component=E2=80=A6=20(#3?=
 =?UTF-8?q?6288)?=
MIME-Version: 1.0
Content-Type: text/plain; charset=UTF-8
Content-Transfer-Encoding: 8bit

* fix: Fixed an error when the loading property of the Button component was passed into null

* Update components/button/button.tsx

Obviously, this suggestion is more concise , thanks a lot

Co-authored-by: afc163 <afc163@gmail.com>

* Update components/button/button.tsx

* Update components/button/button.tsx

Co-authored-by: kejianfeng <kejianfeng@cvte.com>
Co-authored-by: afc163 <afc163@gmail.com>
---
 components/button/button.tsx | 2 +-
 1 file changed, 1 insertion(+), 1 deletion(-)

diff --git a/components/button/button.tsx b/components/button/button.tsx
index 379980f479..b83e91dfe6 100644
--- a/components/button/button.tsx
+++ b/components/button/button.tsx
@@ -190,7 +190,7 @@ const InternalButton: React.ForwardRefRenderFunction<unknown, ButtonProps> = (pr
 
   // =============== Update Loading ===============
   const loadingOrDelay: Loading =
-    typeof loading === 'object' && loading.delay ? loading.delay || true : !!loading;
+      typeof loading === 'boolean' ? loading : (loading?.delay || true);
 
   React.useEffect(() => {
     let delayTimer: number | null = null;

From 201a66793fb993ca7199223df0892af566dfbdf6 Mon Sep 17 00:00:00 2001
From: Yuki Zhang <foryuki@outlook.com>
Date: Fri, 1 Jul 2022 11:53:49 +0800
Subject: [PATCH 4/9] test: move test cases to testing lib for Spin (#36317)

* test: move test cases to testing lib for Spin

* fix: types

* fix: lint
---
 ...index.test.js.snap => index.test.tsx.snap} |  0
 .../{delay.test.js => delay.test.tsx}         | 27 ++++++++++++-------
 .../{index.test.js => index.test.tsx}         | 25 ++++++++---------
 3 files changed, 30 insertions(+), 22 deletions(-)
 rename components/spin/__tests__/__snapshots__/{index.test.js.snap => index.test.tsx.snap} (100%)
 rename components/spin/__tests__/{delay.test.js => delay.test.tsx} (55%)
 rename components/spin/__tests__/{index.test.js => index.test.tsx} (63%)

diff --git a/components/spin/__tests__/__snapshots__/index.test.js.snap b/components/spin/__tests__/__snapshots__/index.test.tsx.snap
similarity index 100%
rename from components/spin/__tests__/__snapshots__/index.test.js.snap
rename to components/spin/__tests__/__snapshots__/index.test.tsx.snap
diff --git a/components/spin/__tests__/delay.test.js b/components/spin/__tests__/delay.test.tsx
similarity index 55%
rename from components/spin/__tests__/delay.test.js
rename to components/spin/__tests__/delay.test.tsx
index cf362080de..64e2998e4f 100644
--- a/components/spin/__tests__/delay.test.js
+++ b/components/spin/__tests__/delay.test.tsx
@@ -1,4 +1,3 @@
-import { mount } from 'enzyme';
 import React from 'react';
 // eslint-disable-next-line import/no-named-as-default
 import { render } from '@testing-library/react';
@@ -7,33 +6,41 @@ import Spin from '..';
 import { sleep } from '../../../tests/utils';
 
 jest.mock('lodash/debounce');
-debounce.mockImplementation(jest.requireActual('lodash/debounce'));
+(debounce as jest.Mock).mockImplementation((...args: any[]) =>
+  jest.requireActual('lodash/debounce')(...args),
+);
 
 describe('delay spinning', () => {
   it("should render with delay when it's mounted with spinning=true and delay", () => {
-    const wrapper = mount(<Spin spinning delay={500} />);
-    expect(wrapper.find('.ant-spin').at(0).hasClass('ant-spin-spinning')).toEqual(false);
+    const { container } = render(<Spin spinning delay={500} />);
+    expect(container.querySelector('.ant-spin')?.classList.contains('ant-spin-spinning')).toEqual(
+      false,
+    );
   });
 
   it('should render when delay is init set', async () => {
-    const wrapper = mount(<Spin spinning delay={100} />);
+    const { container } = render(<Spin spinning delay={100} />);
 
-    expect(wrapper.find('.ant-spin').at(0).hasClass('ant-spin-spinning')).toEqual(false);
+    expect(container.querySelector('.ant-spin')?.classList.contains('ant-spin-spinning')).toEqual(
+      false,
+    );
 
     // use await not jest.runAllTimers()
     // because of https://github.com/facebook/jest/issues/3465
     await sleep(500);
-    wrapper.update();
 
-    expect(wrapper.find('.ant-spin').at(0).hasClass('ant-spin-spinning')).toEqual(true);
+    expect(container.querySelector('.ant-spin')?.classList.contains('ant-spin-spinning')).toEqual(
+      true,
+    );
   });
 
   it('should cancel debounce function when unmount', async () => {
     const debouncedFn = jest.fn();
     const cancel = jest.fn();
-    debouncedFn.cancel = cancel;
-    debounce.mockReturnValueOnce(debouncedFn);
+    (debouncedFn as any).cancel = cancel;
+    (debounce as jest.Mock).mockReturnValueOnce(debouncedFn);
     const { unmount } = render(<Spin spinning delay={100} />);
+
     expect(cancel).not.toHaveBeenCalled();
     unmount();
     expect(cancel).toHaveBeenCalled();
diff --git a/components/spin/__tests__/index.test.js b/components/spin/__tests__/index.test.tsx
similarity index 63%
rename from components/spin/__tests__/index.test.js
rename to components/spin/__tests__/index.test.tsx
index 1fa0aaf7f9..ca3a8646c8 100644
--- a/components/spin/__tests__/index.test.js
+++ b/components/spin/__tests__/index.test.tsx
@@ -1,4 +1,3 @@
-import { mount } from 'enzyme';
 import React from 'react';
 // eslint-disable-next-line import/no-named-as-default
 import { render } from '@testing-library/react';
@@ -11,19 +10,21 @@ describe('Spin', () => {
   rtlTest(Spin);
 
   it('should only affect the spin element when set style to a nested <Spin>xx</Spin>', () => {
-    const wrapper = mount(
+    const { container } = render(
       <Spin style={{ background: 'red' }}>
         <div>content</div>
       </Spin>,
     );
-    expect(wrapper.find('.ant-spin-nested-loading').at(0).prop('style')).toBeFalsy();
-    expect(wrapper.find('.ant-spin').at(0).prop('style').background).toBe('red');
+    expect((container.querySelector('.ant-spin-nested-loading')! as HTMLElement).style.length).toBe(
+      0,
+    );
+    expect((container.querySelector('.ant-spin')! as HTMLElement).style.background).toBe('red');
   });
 
   it("should render custom indicator when it's set", () => {
     const customIndicator = <div className="custom-indicator" />;
-    const wrapper = mount(<Spin indicator={customIndicator} />);
-    expect(wrapper.render()).toMatchSnapshot();
+    const { asFragment } = render(<Spin indicator={customIndicator} />);
+    expect(asFragment().firstChild).toMatchSnapshot();
   });
 
   it('should be controlled by spinning', () => {
@@ -34,19 +35,19 @@ describe('Spin', () => {
   });
 
   it('if indicator set null should not be render default indicator', () => {
-    const wrapper = mount(<Spin indicator={null} />);
-    expect(wrapper.render()).toMatchSnapshot();
+    const { asFragment } = render(<Spin indicator={null as any} />);
+    expect(asFragment().firstChild).toMatchSnapshot();
   });
 
   it('should support static method Spin.setDefaultIndicator', () => {
     Spin.setDefaultIndicator(<em className="custom-spinner" />);
-    const wrapper = mount(<Spin />);
-    expect(wrapper.render()).toMatchSnapshot();
+    const { asFragment } = render(<Spin />);
+    expect(asFragment().firstChild).toMatchSnapshot();
     Spin.setDefaultIndicator(null);
   });
 
   it('should render 0', () => {
-    const wrapper = mount(<Spin>{0}</Spin>);
-    expect(wrapper.find('.ant-spin-container').at(0).text()).toBe('0');
+    const { container } = render(<Spin>{0}</Spin>);
+    expect(container.querySelector('.ant-spin-container')?.textContent).toBe('0');
   });
 });

From efe6d7c8a186fb62ecefb811863cf1173cc0d1db Mon Sep 17 00:00:00 2001
From: Yuki Zhang <foryuki@outlook.com>
Date: Fri, 1 Jul 2022 11:55:03 +0800
Subject: [PATCH 5/9] test: move test cases to testing lib for Switch (#36326)

* add

* test: wave

* fix: type
---
 .../{demo.test.js.snap => demo.test.ts.snap}  |  0
 ...index.test.js.snap => index.test.tsx.snap} |  0
 .../__tests__/{demo.test.js => demo.test.ts}  |  0
 .../{index.test.js => index.test.tsx}         | 12 ++++-----
 components/switch/__tests__/wave.test.js      | 27 -------------------
 components/switch/__tests__/wave.test.tsx     | 27 +++++++++++++++++++
 components/switch/index.tsx                   |  7 +++--
 typings/custom-typings.d.ts                   |  2 --
 8 files changed, 38 insertions(+), 37 deletions(-)
 rename components/switch/__tests__/__snapshots__/{demo.test.js.snap => demo.test.ts.snap} (100%)
 rename components/switch/__tests__/__snapshots__/{index.test.js.snap => index.test.tsx.snap} (100%)
 rename components/switch/__tests__/{demo.test.js => demo.test.ts} (100%)
 rename components/switch/__tests__/{index.test.js => index.test.tsx} (68%)
 delete mode 100644 components/switch/__tests__/wave.test.js
 create mode 100644 components/switch/__tests__/wave.test.tsx

diff --git a/components/switch/__tests__/__snapshots__/demo.test.js.snap b/components/switch/__tests__/__snapshots__/demo.test.ts.snap
similarity index 100%
rename from components/switch/__tests__/__snapshots__/demo.test.js.snap
rename to components/switch/__tests__/__snapshots__/demo.test.ts.snap
diff --git a/components/switch/__tests__/__snapshots__/index.test.js.snap b/components/switch/__tests__/__snapshots__/index.test.tsx.snap
similarity index 100%
rename from components/switch/__tests__/__snapshots__/index.test.js.snap
rename to components/switch/__tests__/__snapshots__/index.test.tsx.snap
diff --git a/components/switch/__tests__/demo.test.js b/components/switch/__tests__/demo.test.ts
similarity index 100%
rename from components/switch/__tests__/demo.test.js
rename to components/switch/__tests__/demo.test.ts
diff --git a/components/switch/__tests__/index.test.js b/components/switch/__tests__/index.test.tsx
similarity index 68%
rename from components/switch/__tests__/index.test.js
rename to components/switch/__tests__/index.test.tsx
index 8f0ee630fa..f5b9835864 100644
--- a/components/switch/__tests__/index.test.js
+++ b/components/switch/__tests__/index.test.tsx
@@ -1,10 +1,9 @@
-import { mount } from 'enzyme';
 import React from 'react';
 import Switch from '..';
 import focusTest from '../../../tests/shared/focusTest';
 import mountTest from '../../../tests/shared/mountTest';
 import rtlTest from '../../../tests/shared/rtlTest';
-import { sleep } from '../../../tests/utils';
+import { sleep, fireEvent, render } from '../../../tests/utils';
 import { resetWarned } from '../../_util/warning';
 
 describe('Switch', () => {
@@ -13,17 +12,18 @@ describe('Switch', () => {
   rtlTest(Switch);
 
   it('should has click wave effect', async () => {
-    const wrapper = mount(<Switch />);
-    wrapper.find('.ant-switch').getDOMNode().click();
+    const { container } = render(<Switch />);
+    fireEvent.click(container.querySelector('.ant-switch')!);
     await sleep(0);
-    expect(wrapper.find('button').getDOMNode().getAttribute('ant-click-animating')).toBe('true');
+    expect(container.querySelector('button')!.getAttribute('ant-click-animating')).toBe('true');
   });
 
   it('warning if set `value`', () => {
     resetWarned();
 
     const errorSpy = jest.spyOn(console, 'error').mockImplementation(() => {});
-    mount(<Switch value />);
+    const props = { value: true } as any;
+    render(<Switch {...props} />);
     expect(errorSpy).toHaveBeenCalledWith(
       'Warning: [antd: Switch] `value` is not a valid prop, do you mean `checked`?',
     );
diff --git a/components/switch/__tests__/wave.test.js b/components/switch/__tests__/wave.test.js
deleted file mode 100644
index 79014d25cf..0000000000
--- a/components/switch/__tests__/wave.test.js
+++ /dev/null
@@ -1,27 +0,0 @@
-import { mount } from 'enzyme';
-import React from 'react';
-import Switch from '..';
-import { sleep } from '../../../tests/utils';
-
-describe('click wave effect', () => {
-  async function click(wrapper) {
-    wrapper.find('.ant-switch').getDOMNode().click();
-    wrapper.find('.ant-switch').getDOMNode().dispatchEvent(new Event('transitionstart'));
-    await sleep(20);
-    wrapper.find('.ant-switch').getDOMNode().dispatchEvent(new Event('animationend'));
-    await sleep(20);
-  }
-
-  it('should have click wave effect', async () => {
-    const wrapper = mount(<Switch />);
-    await click(wrapper);
-    const waveInstance = wrapper.find('InternalWave').instance();
-    const resetEffect = jest.spyOn(waveInstance, 'resetEffect');
-    await click(wrapper);
-    expect(resetEffect).toHaveBeenCalledTimes(1);
-    const event = new Event('animationend');
-    Object.assign(event, { animationName: 'fadeEffect' });
-    wrapper.find('.ant-switch').getDOMNode().dispatchEvent(event);
-    resetEffect.mockRestore();
-  });
-});
diff --git a/components/switch/__tests__/wave.test.tsx b/components/switch/__tests__/wave.test.tsx
new file mode 100644
index 0000000000..6d18ac3f74
--- /dev/null
+++ b/components/switch/__tests__/wave.test.tsx
@@ -0,0 +1,27 @@
+import React from 'react';
+import Switch from '..';
+import { sleep, render, fireEvent } from '../../../tests/utils';
+
+describe('click wave effect', () => {
+  async function click(container: HTMLElement) {
+    fireEvent.click(container.querySelector('.ant-switch')!);
+    container.querySelector('.ant-switch')!.dispatchEvent(new Event('transitionstart'));
+    await sleep(20);
+    container.querySelector('.ant-switch')!.dispatchEvent(new Event('animationend'));
+    await sleep(20);
+  }
+
+  it('should have click wave effect', async () => {
+    const { container } = render(<Switch />);
+    await click(container);
+    await click(container);
+
+    expect(
+      container.querySelector('.ant-switch')!.getAttribute('ant-switch-click-animating'),
+    ).toBeFalsy();
+
+    const event = new Event('animationend');
+    Object.assign(event, { animationName: 'fadeEffect' });
+    container.querySelector('.ant-switch')!.dispatchEvent(event);
+  });
+});
diff --git a/components/switch/index.tsx b/components/switch/index.tsx
index 3bfa6ca364..c519de18e0 100755
--- a/components/switch/index.tsx
+++ b/components/switch/index.tsx
@@ -10,7 +10,10 @@ import warning from '../_util/warning';
 import Wave from '../_util/wave';
 
 export type SwitchSize = 'small' | 'default';
-export type SwitchChangeEventHandler = (checked: boolean, event: MouseEvent) => void;
+export type SwitchChangeEventHandler = (
+  checked: boolean,
+  event: React.MouseEvent<HTMLButtonElement>,
+) => void;
 export type SwitchClickEventHandler = SwitchChangeEventHandler;
 
 export interface SwitchProps {
@@ -37,7 +40,7 @@ interface CompoundedComponent
   __ANT_SWITCH: boolean;
 }
 
-const Switch = React.forwardRef<unknown, SwitchProps>(
+const Switch = React.forwardRef<HTMLButtonElement, SwitchProps>(
   (
     {
       prefixCls: customizePrefixCls,
diff --git a/typings/custom-typings.d.ts b/typings/custom-typings.d.ts
index 76112ff63a..e5c2274ab8 100644
--- a/typings/custom-typings.d.ts
+++ b/typings/custom-typings.d.ts
@@ -24,8 +24,6 @@ declare module 'rc-checkbox';
 
 declare module 'rc-rate';
 
-declare module 'rc-switch';
-
 declare module '*.json' {
   const value: any;
   export const version: string;

From 8ab7851870c8a9d24ac5341aafb7f1230314f5b5 Mon Sep 17 00:00:00 2001
From: MadCcc <1075746765@qq.com>
Date: Fri, 1 Jul 2022 20:00:25 +0800
Subject: [PATCH 6/9] test: update snapshot (#36344)

* test: update snapshot

* test: update snapshot
---
 .../__snapshots__/demo-extend.test.ts.snap    | 25 +++++++++++++++++++
 .../__tests__/__snapshots__/demo.test.js.snap | 25 +++++++++++++++++++
 .../__snapshots__/index.test.js.snap          |  4 +++
 .../__snapshots__/components.test.js.snap     |  7 ++++++
 4 files changed, 61 insertions(+)

diff --git a/components/collapse/__tests__/__snapshots__/demo-extend.test.ts.snap b/components/collapse/__tests__/__snapshots__/demo-extend.test.ts.snap
index 80eb733684..65d9848797 100644
--- a/components/collapse/__tests__/__snapshots__/demo-extend.test.ts.snap
+++ b/components/collapse/__tests__/__snapshots__/demo-extend.test.ts.snap
@@ -9,6 +9,7 @@ exports[`renders ./components/collapse/demo/accordion.md extend context correctl
     class="ant-collapse-item"
   >
     <div
+      aria-disabled="false"
       aria-expanded="false"
       class="ant-collapse-header"
       role="tab"
@@ -48,6 +49,7 @@ exports[`renders ./components/collapse/demo/accordion.md extend context correctl
     class="ant-collapse-item"
   >
     <div
+      aria-disabled="false"
       aria-expanded="false"
       class="ant-collapse-header"
       role="tab"
@@ -87,6 +89,7 @@ exports[`renders ./components/collapse/demo/accordion.md extend context correctl
     class="ant-collapse-item"
   >
     <div
+      aria-disabled="false"
       aria-expanded="false"
       class="ant-collapse-header"
       role="tab"
@@ -133,6 +136,7 @@ exports[`renders ./components/collapse/demo/basic.md extend context correctly 1`
     class="ant-collapse-item ant-collapse-item-active"
   >
     <div
+      aria-disabled="false"
       aria-expanded="true"
       class="ant-collapse-header"
       role="button"
@@ -188,6 +192,7 @@ exports[`renders ./components/collapse/demo/basic.md extend context correctly 1`
     class="ant-collapse-item"
   >
     <div
+      aria-disabled="false"
       aria-expanded="false"
       class="ant-collapse-header"
       role="button"
@@ -227,6 +232,7 @@ exports[`renders ./components/collapse/demo/basic.md extend context correctly 1`
     class="ant-collapse-item"
   >
     <div
+      aria-disabled="false"
       aria-expanded="false"
       class="ant-collapse-header"
       role="button"
@@ -273,6 +279,7 @@ exports[`renders ./components/collapse/demo/borderless.md extend context correct
     class="ant-collapse-item ant-collapse-item-active"
   >
     <div
+      aria-disabled="false"
       aria-expanded="true"
       class="ant-collapse-header"
       role="button"
@@ -326,6 +333,7 @@ exports[`renders ./components/collapse/demo/borderless.md extend context correct
     class="ant-collapse-item"
   >
     <div
+      aria-disabled="false"
       aria-expanded="false"
       class="ant-collapse-header"
       role="button"
@@ -365,6 +373,7 @@ exports[`renders ./components/collapse/demo/borderless.md extend context correct
     class="ant-collapse-item"
   >
     <div
+      aria-disabled="false"
       aria-expanded="false"
       class="ant-collapse-header"
       role="button"
@@ -418,6 +427,7 @@ exports[`renders ./components/collapse/demo/collapsible.md extend context correc
         class="ant-collapse-item ant-collapse-item-active"
       >
         <div
+          aria-disabled="false"
           aria-expanded="true"
           class="ant-collapse-header ant-collapse-header-collapsible-only"
         >
@@ -479,6 +489,7 @@ exports[`renders ./components/collapse/demo/collapsible.md extend context correc
         class="ant-collapse-item ant-collapse-item-disabled"
       >
         <div
+          aria-disabled="true"
           aria-expanded="false"
           class="ant-collapse-header"
           role="button"
@@ -527,6 +538,7 @@ exports[`renders ./components/collapse/demo/custom.md extend context correctly 1
     class="ant-collapse-item ant-collapse-item-active site-collapse-custom-panel"
   >
     <div
+      aria-disabled="false"
       aria-expanded="true"
       class="ant-collapse-header"
       role="button"
@@ -582,6 +594,7 @@ exports[`renders ./components/collapse/demo/custom.md extend context correctly 1
     class="ant-collapse-item site-collapse-custom-panel"
   >
     <div
+      aria-disabled="false"
       aria-expanded="false"
       class="ant-collapse-header"
       role="button"
@@ -621,6 +634,7 @@ exports[`renders ./components/collapse/demo/custom.md extend context correctly 1
     class="ant-collapse-item site-collapse-custom-panel"
   >
     <div
+      aria-disabled="false"
       aria-expanded="false"
       class="ant-collapse-header"
       role="button"
@@ -668,6 +682,7 @@ Array [
       class="ant-collapse-item ant-collapse-item-active"
     >
       <div
+        aria-disabled="false"
         aria-expanded="true"
         class="ant-collapse-header"
         role="button"
@@ -747,6 +762,7 @@ Array [
       class="ant-collapse-item"
     >
       <div
+        aria-disabled="false"
         aria-expanded="false"
         class="ant-collapse-header"
         role="button"
@@ -810,6 +826,7 @@ Array [
       class="ant-collapse-item"
     >
       <div
+        aria-disabled="false"
         aria-expanded="false"
         class="ant-collapse-header"
         role="button"
@@ -1027,6 +1044,7 @@ exports[`renders ./components/collapse/demo/ghost.md extend context correctly 1`
     class="ant-collapse-item ant-collapse-item-active"
   >
     <div
+      aria-disabled="false"
       aria-expanded="true"
       class="ant-collapse-header"
       role="button"
@@ -1082,6 +1100,7 @@ exports[`renders ./components/collapse/demo/ghost.md extend context correctly 1`
     class="ant-collapse-item"
   >
     <div
+      aria-disabled="false"
       aria-expanded="false"
       class="ant-collapse-header"
       role="button"
@@ -1121,6 +1140,7 @@ exports[`renders ./components/collapse/demo/ghost.md extend context correctly 1`
     class="ant-collapse-item"
   >
     <div
+      aria-disabled="false"
       aria-expanded="false"
       class="ant-collapse-header"
       role="button"
@@ -1167,6 +1187,7 @@ exports[`renders ./components/collapse/demo/mix.md extend context correctly 1`]
     class="ant-collapse-item"
   >
     <div
+      aria-disabled="false"
       aria-expanded="false"
       class="ant-collapse-header"
       role="button"
@@ -1206,6 +1227,7 @@ exports[`renders ./components/collapse/demo/mix.md extend context correctly 1`]
     class="ant-collapse-item"
   >
     <div
+      aria-disabled="false"
       aria-expanded="false"
       class="ant-collapse-header"
       role="button"
@@ -1245,6 +1267,7 @@ exports[`renders ./components/collapse/demo/mix.md extend context correctly 1`]
     class="ant-collapse-item"
   >
     <div
+      aria-disabled="false"
       aria-expanded="false"
       class="ant-collapse-header"
       role="button"
@@ -1291,6 +1314,7 @@ exports[`renders ./components/collapse/demo/noarrow.md extend context correctly
     class="ant-collapse-item ant-collapse-item-active"
   >
     <div
+      aria-disabled="false"
       aria-expanded="true"
       class="ant-collapse-header"
       role="button"
@@ -1346,6 +1370,7 @@ exports[`renders ./components/collapse/demo/noarrow.md extend context correctly
     class="ant-collapse-item ant-collapse-no-arrow"
   >
     <div
+      aria-disabled="false"
       aria-expanded="false"
       class="ant-collapse-header"
       role="button"
diff --git a/components/collapse/__tests__/__snapshots__/demo.test.js.snap b/components/collapse/__tests__/__snapshots__/demo.test.js.snap
index 5fe4a34acb..260b20507e 100644
--- a/components/collapse/__tests__/__snapshots__/demo.test.js.snap
+++ b/components/collapse/__tests__/__snapshots__/demo.test.js.snap
@@ -9,6 +9,7 @@ exports[`renders ./components/collapse/demo/accordion.md correctly 1`] = `
     class="ant-collapse-item"
   >
     <div
+      aria-disabled="false"
       aria-expanded="false"
       class="ant-collapse-header"
       role="tab"
@@ -48,6 +49,7 @@ exports[`renders ./components/collapse/demo/accordion.md correctly 1`] = `
     class="ant-collapse-item"
   >
     <div
+      aria-disabled="false"
       aria-expanded="false"
       class="ant-collapse-header"
       role="tab"
@@ -87,6 +89,7 @@ exports[`renders ./components/collapse/demo/accordion.md correctly 1`] = `
     class="ant-collapse-item"
   >
     <div
+      aria-disabled="false"
       aria-expanded="false"
       class="ant-collapse-header"
       role="tab"
@@ -133,6 +136,7 @@ exports[`renders ./components/collapse/demo/basic.md correctly 1`] = `
     class="ant-collapse-item ant-collapse-item-active"
   >
     <div
+      aria-disabled="false"
       aria-expanded="true"
       class="ant-collapse-header"
       role="button"
@@ -188,6 +192,7 @@ exports[`renders ./components/collapse/demo/basic.md correctly 1`] = `
     class="ant-collapse-item"
   >
     <div
+      aria-disabled="false"
       aria-expanded="false"
       class="ant-collapse-header"
       role="button"
@@ -227,6 +232,7 @@ exports[`renders ./components/collapse/demo/basic.md correctly 1`] = `
     class="ant-collapse-item"
   >
     <div
+      aria-disabled="false"
       aria-expanded="false"
       class="ant-collapse-header"
       role="button"
@@ -273,6 +279,7 @@ exports[`renders ./components/collapse/demo/borderless.md correctly 1`] = `
     class="ant-collapse-item ant-collapse-item-active"
   >
     <div
+      aria-disabled="false"
       aria-expanded="true"
       class="ant-collapse-header"
       role="button"
@@ -326,6 +333,7 @@ exports[`renders ./components/collapse/demo/borderless.md correctly 1`] = `
     class="ant-collapse-item"
   >
     <div
+      aria-disabled="false"
       aria-expanded="false"
       class="ant-collapse-header"
       role="button"
@@ -365,6 +373,7 @@ exports[`renders ./components/collapse/demo/borderless.md correctly 1`] = `
     class="ant-collapse-item"
   >
     <div
+      aria-disabled="false"
       aria-expanded="false"
       class="ant-collapse-header"
       role="button"
@@ -418,6 +427,7 @@ exports[`renders ./components/collapse/demo/collapsible.md correctly 1`] = `
         class="ant-collapse-item ant-collapse-item-active"
       >
         <div
+          aria-disabled="false"
           aria-expanded="true"
           class="ant-collapse-header ant-collapse-header-collapsible-only"
         >
@@ -479,6 +489,7 @@ exports[`renders ./components/collapse/demo/collapsible.md correctly 1`] = `
         class="ant-collapse-item ant-collapse-item-disabled"
       >
         <div
+          aria-disabled="true"
           aria-expanded="false"
           class="ant-collapse-header"
           role="button"
@@ -527,6 +538,7 @@ exports[`renders ./components/collapse/demo/custom.md correctly 1`] = `
     class="ant-collapse-item ant-collapse-item-active site-collapse-custom-panel"
   >
     <div
+      aria-disabled="false"
       aria-expanded="true"
       class="ant-collapse-header"
       role="button"
@@ -582,6 +594,7 @@ exports[`renders ./components/collapse/demo/custom.md correctly 1`] = `
     class="ant-collapse-item site-collapse-custom-panel"
   >
     <div
+      aria-disabled="false"
       aria-expanded="false"
       class="ant-collapse-header"
       role="button"
@@ -621,6 +634,7 @@ exports[`renders ./components/collapse/demo/custom.md correctly 1`] = `
     class="ant-collapse-item site-collapse-custom-panel"
   >
     <div
+      aria-disabled="false"
       aria-expanded="false"
       class="ant-collapse-header"
       role="button"
@@ -668,6 +682,7 @@ Array [
       class="ant-collapse-item ant-collapse-item-active"
     >
       <div
+        aria-disabled="false"
         aria-expanded="true"
         class="ant-collapse-header"
         role="button"
@@ -747,6 +762,7 @@ Array [
       class="ant-collapse-item"
     >
       <div
+        aria-disabled="false"
         aria-expanded="false"
         class="ant-collapse-header"
         role="button"
@@ -810,6 +826,7 @@ Array [
       class="ant-collapse-item"
     >
       <div
+        aria-disabled="false"
         aria-expanded="false"
         class="ant-collapse-header"
         role="button"
@@ -945,6 +962,7 @@ exports[`renders ./components/collapse/demo/ghost.md correctly 1`] = `
     class="ant-collapse-item ant-collapse-item-active"
   >
     <div
+      aria-disabled="false"
       aria-expanded="true"
       class="ant-collapse-header"
       role="button"
@@ -1000,6 +1018,7 @@ exports[`renders ./components/collapse/demo/ghost.md correctly 1`] = `
     class="ant-collapse-item"
   >
     <div
+      aria-disabled="false"
       aria-expanded="false"
       class="ant-collapse-header"
       role="button"
@@ -1039,6 +1058,7 @@ exports[`renders ./components/collapse/demo/ghost.md correctly 1`] = `
     class="ant-collapse-item"
   >
     <div
+      aria-disabled="false"
       aria-expanded="false"
       class="ant-collapse-header"
       role="button"
@@ -1085,6 +1105,7 @@ exports[`renders ./components/collapse/demo/mix.md correctly 1`] = `
     class="ant-collapse-item"
   >
     <div
+      aria-disabled="false"
       aria-expanded="false"
       class="ant-collapse-header"
       role="button"
@@ -1124,6 +1145,7 @@ exports[`renders ./components/collapse/demo/mix.md correctly 1`] = `
     class="ant-collapse-item"
   >
     <div
+      aria-disabled="false"
       aria-expanded="false"
       class="ant-collapse-header"
       role="button"
@@ -1163,6 +1185,7 @@ exports[`renders ./components/collapse/demo/mix.md correctly 1`] = `
     class="ant-collapse-item"
   >
     <div
+      aria-disabled="false"
       aria-expanded="false"
       class="ant-collapse-header"
       role="button"
@@ -1209,6 +1232,7 @@ exports[`renders ./components/collapse/demo/noarrow.md correctly 1`] = `
     class="ant-collapse-item ant-collapse-item-active"
   >
     <div
+      aria-disabled="false"
       aria-expanded="true"
       class="ant-collapse-header"
       role="button"
@@ -1264,6 +1288,7 @@ exports[`renders ./components/collapse/demo/noarrow.md correctly 1`] = `
     class="ant-collapse-item ant-collapse-no-arrow"
   >
     <div
+      aria-disabled="false"
       aria-expanded="false"
       class="ant-collapse-header"
       role="button"
diff --git a/components/collapse/__tests__/__snapshots__/index.test.js.snap b/components/collapse/__tests__/__snapshots__/index.test.js.snap
index 0e7a1eb8d9..7d5d1c1a5a 100644
--- a/components/collapse/__tests__/__snapshots__/index.test.js.snap
+++ b/components/collapse/__tests__/__snapshots__/index.test.js.snap
@@ -8,6 +8,7 @@ exports[`Collapse could override default openMotion 1`] = `
     class="ant-collapse-item ant-collapse-item-active"
   >
     <div
+      aria-disabled="false"
       aria-expanded="true"
       class="ant-collapse-header"
       role="button"
@@ -64,6 +65,7 @@ exports[`Collapse should render extra node of panel 1`] = `
     class="ant-collapse-item"
   >
     <div
+      aria-disabled="false"
       aria-expanded="false"
       class="ant-collapse-header"
       role="button"
@@ -112,6 +114,7 @@ exports[`Collapse should render extra node of panel 1`] = `
     class="ant-collapse-item"
   >
     <div
+      aria-disabled="false"
       aria-expanded="false"
       class="ant-collapse-header"
       role="button"
@@ -167,6 +170,7 @@ exports[`Collapse should support remove expandIcon 1`] = `
     class="ant-collapse-item"
   >
     <div
+      aria-disabled="false"
       aria-expanded="false"
       class="ant-collapse-header"
       role="button"
diff --git a/components/config-provider/__tests__/__snapshots__/components.test.js.snap b/components/config-provider/__tests__/__snapshots__/components.test.js.snap
index b07b6ebad9..cbb5a4d2c3 100644
--- a/components/config-provider/__tests__/__snapshots__/components.test.js.snap
+++ b/components/config-provider/__tests__/__snapshots__/components.test.js.snap
@@ -12226,6 +12226,7 @@ exports[`ConfigProvider components Collapse configProvider 1`] = `
     class="config-collapse-item"
   >
     <div
+      aria-disabled="false"
       aria-expanded="false"
       class="config-collapse-header"
       role="button"
@@ -12272,6 +12273,7 @@ exports[`ConfigProvider components Collapse configProvider componentDisabled 1`]
     class="config-collapse-item"
   >
     <div
+      aria-disabled="false"
       aria-expanded="false"
       class="config-collapse-header"
       role="button"
@@ -12318,6 +12320,7 @@ exports[`ConfigProvider components Collapse configProvider componentSize large 1
     class="config-collapse-item"
   >
     <div
+      aria-disabled="false"
       aria-expanded="false"
       class="config-collapse-header"
       role="button"
@@ -12364,6 +12367,7 @@ exports[`ConfigProvider components Collapse configProvider componentSize middle
     class="config-collapse-item"
   >
     <div
+      aria-disabled="false"
       aria-expanded="false"
       class="config-collapse-header"
       role="button"
@@ -12410,6 +12414,7 @@ exports[`ConfigProvider components Collapse configProvider virtual and dropdownM
     class="ant-collapse-item"
   >
     <div
+      aria-disabled="false"
       aria-expanded="false"
       class="ant-collapse-header"
       role="button"
@@ -12456,6 +12461,7 @@ exports[`ConfigProvider components Collapse normal 1`] = `
     class="ant-collapse-item"
   >
     <div
+      aria-disabled="false"
       aria-expanded="false"
       class="ant-collapse-header"
       role="button"
@@ -12502,6 +12508,7 @@ exports[`ConfigProvider components Collapse prefixCls 1`] = `
     class="prefix-Collapse-item"
   >
     <div
+      aria-disabled="false"
       aria-expanded="false"
       class="prefix-Collapse-header"
       role="button"

From 0a7b4d331d2bb2f12b7bf5e3968417ccc7f2ce53 Mon Sep 17 00:00:00 2001
From: MadCcc <1075746765@qq.com>
Date: Fri, 1 Jul 2022 21:29:31 +0800
Subject: [PATCH 7/9] fix: checkbox should be disabled by form (#36345)

* fix: checkbox should be disabled by form

* chore: code clean

* test: update snapshot

* chore: snapshot
---
 components/checkbox/Checkbox.tsx              |   8 +-
 .../__snapshots__/components.test.js.snap     |  20 +-
 .../__snapshots__/demo-extend.test.ts.snap    |   5 +-
 .../__tests__/__snapshots__/demo.test.js.snap |   5 +-
 .../__snapshots__/index.test.js.snap          | 821 +-----------------
 components/form/__tests__/index.test.js       | 149 ++--
 6 files changed, 122 insertions(+), 886 deletions(-)

diff --git a/components/checkbox/Checkbox.tsx b/components/checkbox/Checkbox.tsx
index b385951c89..bed9a7e975 100644
--- a/components/checkbox/Checkbox.tsx
+++ b/components/checkbox/Checkbox.tsx
@@ -6,6 +6,7 @@ import { ConfigContext } from '../config-provider';
 import { FormItemInputContext } from '../form/context';
 import warning from '../_util/warning';
 import { GroupContext } from './Group';
+import DisabledContext from '../config-provider/DisabledContext';
 
 export interface AbstractCheckboxProps<T> {
   prefixCls?: string;
@@ -55,6 +56,7 @@ const InternalCheckbox: React.ForwardRefRenderFunction<HTMLInputElement, Checkbo
     onMouseEnter,
     onMouseLeave,
     skipGroup = false,
+    disabled,
     ...restProps
   },
   ref,
@@ -62,6 +64,8 @@ const InternalCheckbox: React.ForwardRefRenderFunction<HTMLInputElement, Checkbo
   const { getPrefixCls, direction } = React.useContext(ConfigContext);
   const checkboxGroup = React.useContext(GroupContext);
   const { isFormItemInput } = useContext(FormItemInputContext);
+  const contextDisabled = useContext(DisabledContext);
+  const mergedDisabled = disabled || checkboxGroup?.disabled || contextDisabled;
 
   const prevValue = React.useRef(restProps.value);
 
@@ -99,14 +103,13 @@ const InternalCheckbox: React.ForwardRefRenderFunction<HTMLInputElement, Checkbo
     };
     checkboxProps.name = checkboxGroup.name;
     checkboxProps.checked = checkboxGroup.value.indexOf(restProps.value) !== -1;
-    checkboxProps.disabled = restProps.disabled || checkboxGroup.disabled;
   }
   const classString = classNames(
     {
       [`${prefixCls}-wrapper`]: true,
       [`${prefixCls}-rtl`]: direction === 'rtl',
       [`${prefixCls}-wrapper-checked`]: checkboxProps.checked,
-      [`${prefixCls}-wrapper-disabled`]: checkboxProps.disabled,
+      [`${prefixCls}-wrapper-disabled`]: mergedDisabled,
       [`${prefixCls}-wrapper-in-form-item`]: isFormItemInput,
     },
     className,
@@ -128,6 +131,7 @@ const InternalCheckbox: React.ForwardRefRenderFunction<HTMLInputElement, Checkbo
         {...checkboxProps}
         prefixCls={prefixCls}
         className={checkboxClass}
+        disabled={mergedDisabled}
         ref={ref}
       />
       {children !== undefined && <span>{children}</span>}
diff --git a/components/config-provider/__tests__/__snapshots__/components.test.js.snap b/components/config-provider/__tests__/__snapshots__/components.test.js.snap
index cbb5a4d2c3..804a912f24 100644
--- a/components/config-provider/__tests__/__snapshots__/components.test.js.snap
+++ b/components/config-provider/__tests__/__snapshots__/components.test.js.snap
@@ -12073,13 +12073,14 @@ exports[`ConfigProvider components Checkbox configProvider componentDisabled 1`]
   class="config-checkbox-group"
 >
   <label
-    class="config-checkbox-wrapper"
+    class="config-checkbox-wrapper config-checkbox-wrapper-disabled"
   >
     <span
-      class="config-checkbox"
+      class="config-checkbox config-checkbox-disabled"
     >
       <input
         class="config-checkbox-input"
+        disabled=""
         type="checkbox"
       />
       <span
@@ -27108,13 +27109,14 @@ exports[`ConfigProvider components Table configProvider componentDisabled 1`] =
                                   class="config-dropdown-menu-title-content"
                                 >
                                   <label
-                                    class="config-checkbox-wrapper"
+                                    class="config-checkbox-wrapper config-checkbox-wrapper-disabled"
                                   >
                                     <span
-                                      class="config-checkbox"
+                                      class="config-checkbox config-checkbox-disabled"
                                     >
                                       <input
                                         class="config-checkbox-input"
+                                        disabled=""
                                         type="checkbox"
                                       />
                                       <span
@@ -38658,13 +38660,14 @@ exports[`ConfigProvider components Transfer configProvider componentDisabled 1`]
       class="config-transfer-list-header"
     >
       <label
-        class="config-checkbox-wrapper config-transfer-list-checkbox"
+        class="config-checkbox-wrapper config-checkbox-wrapper-disabled config-transfer-list-checkbox"
       >
         <span
-          class="config-checkbox"
+          class="config-checkbox config-checkbox-disabled"
         >
           <input
             class="config-checkbox-input"
+            disabled=""
             type="checkbox"
           />
           <span
@@ -38816,13 +38819,14 @@ exports[`ConfigProvider components Transfer configProvider componentDisabled 1`]
       class="config-transfer-list-header"
     >
       <label
-        class="config-checkbox-wrapper config-transfer-list-checkbox"
+        class="config-checkbox-wrapper config-checkbox-wrapper-disabled config-transfer-list-checkbox"
       >
         <span
-          class="config-checkbox"
+          class="config-checkbox config-checkbox-disabled"
         >
           <input
             class="config-checkbox-input"
+            disabled=""
             type="checkbox"
           />
           <span
diff --git a/components/form/__tests__/__snapshots__/demo-extend.test.ts.snap b/components/form/__tests__/__snapshots__/demo-extend.test.ts.snap
index 348af0076d..fa8b9f5b0d 100644
--- a/components/form/__tests__/__snapshots__/demo-extend.test.ts.snap
+++ b/components/form/__tests__/__snapshots__/demo-extend.test.ts.snap
@@ -1846,14 +1846,15 @@ exports[`renders ./components/form/demo/disabled.md extend context correctly 1`]
           class="ant-form-item-control-input-content"
         >
           <label
-            class="ant-checkbox-wrapper ant-checkbox-wrapper-checked ant-checkbox-wrapper-in-form-item"
+            class="ant-checkbox-wrapper ant-checkbox-wrapper-checked ant-checkbox-wrapper-disabled ant-checkbox-wrapper-in-form-item"
           >
             <span
-              class="ant-checkbox ant-checkbox-checked"
+              class="ant-checkbox ant-checkbox-checked ant-checkbox-disabled"
             >
               <input
                 checked=""
                 class="ant-checkbox-input"
+                disabled=""
                 id="disabled"
                 type="checkbox"
               />
diff --git a/components/form/__tests__/__snapshots__/demo.test.js.snap b/components/form/__tests__/__snapshots__/demo.test.js.snap
index d56df47efc..c7b8579d49 100644
--- a/components/form/__tests__/__snapshots__/demo.test.js.snap
+++ b/components/form/__tests__/__snapshots__/demo.test.js.snap
@@ -1402,14 +1402,15 @@ exports[`renders ./components/form/demo/disabled.md correctly 1`] = `
           class="ant-form-item-control-input-content"
         >
           <label
-            class="ant-checkbox-wrapper ant-checkbox-wrapper-checked ant-checkbox-wrapper-in-form-item"
+            class="ant-checkbox-wrapper ant-checkbox-wrapper-checked ant-checkbox-wrapper-disabled ant-checkbox-wrapper-in-form-item"
           >
             <span
-              class="ant-checkbox ant-checkbox-checked"
+              class="ant-checkbox ant-checkbox-checked ant-checkbox-disabled"
             >
               <input
                 checked=""
                 class="ant-checkbox-input"
+                disabled=""
                 id="disabled"
                 type="checkbox"
               />
diff --git a/components/form/__tests__/__snapshots__/index.test.js.snap b/components/form/__tests__/__snapshots__/index.test.js.snap
index 96e7066bec..2bb21c62fb 100644
--- a/components/form/__tests__/__snapshots__/index.test.js.snap
+++ b/components/form/__tests__/__snapshots__/index.test.js.snap
@@ -113,13 +113,14 @@ exports[`Form form should support disabled 1`] = `
           class="ant-form-item-control-input-content"
         >
           <label
-            class="ant-checkbox-wrapper ant-checkbox-wrapper-in-form-item"
+            class="ant-checkbox-wrapper ant-checkbox-wrapper-disabled ant-checkbox-wrapper-in-form-item"
           >
             <span
-              class="ant-checkbox"
+              class="ant-checkbox ant-checkbox-disabled"
             >
               <input
                 class="ant-checkbox-input"
+                disabled=""
                 id="disabled"
                 type="checkbox"
                 value=""
@@ -162,13 +163,14 @@ exports[`Form form should support disabled 1`] = `
             class="ant-radio-group ant-radio-group-outline"
           >
             <label
-              class="ant-radio-wrapper ant-radio-wrapper-in-form-item"
+              class="ant-radio-wrapper ant-radio-wrapper-disabled ant-radio-wrapper-in-form-item"
             >
               <span
-                class="ant-radio"
+                class="ant-radio ant-radio-disabled"
               >
                 <input
                   class="ant-radio-input"
+                  disabled=""
                   type="radio"
                   value="apple"
                 />
@@ -181,13 +183,14 @@ exports[`Form form should support disabled 1`] = `
               </span>
             </label>
             <label
-              class="ant-radio-wrapper ant-radio-wrapper-in-form-item"
+              class="ant-radio-wrapper ant-radio-wrapper-disabled ant-radio-wrapper-in-form-item"
             >
               <span
-                class="ant-radio"
+                class="ant-radio ant-radio-disabled"
               >
                 <input
                   class="ant-radio-input"
+                  disabled=""
                   type="radio"
                   value="pear"
                 />
@@ -227,7 +230,8 @@ exports[`Form form should support disabled 1`] = `
           class="ant-form-item-control-input-content"
         >
           <input
-            class="ant-input"
+            class="ant-input ant-input-disabled"
+            disabled=""
             type="text"
             value=""
           />
@@ -258,7 +262,7 @@ exports[`Form form should support disabled 1`] = `
           class="ant-form-item-control-input-content"
         >
           <div
-            class="ant-select ant-select-in-form-item ant-select-single ant-select-show-arrow"
+            class="ant-select ant-select-in-form-item ant-select-single ant-select-show-arrow ant-select-disabled"
           >
             <div
               class="ant-select-selector"
@@ -270,10 +274,12 @@ exports[`Form form should support disabled 1`] = `
                   aria-activedescendant="rc_select_TEST_OR_SSR_list_0"
                   aria-autocomplete="list"
                   aria-controls="rc_select_TEST_OR_SSR_list"
+                  aria-expanded="false"
                   aria-haspopup="listbox"
                   aria-owns="rc_select_TEST_OR_SSR_list"
                   autocomplete="off"
                   class="ant-select-selection-search-input"
+                  disabled=""
                   id="rc_select_TEST_OR_SSR"
                   readonly=""
                   role="combobox"
@@ -341,7 +347,7 @@ exports[`Form form should support disabled 1`] = `
           class="ant-form-item-control-input-content"
         >
           <div
-            class="ant-select ant-tree-select ant-select-in-form-item ant-select-single ant-select-show-arrow"
+            class="ant-select ant-tree-select ant-select-in-form-item ant-select-single ant-select-show-arrow ant-select-disabled"
           >
             <div
               class="ant-select-selector"
@@ -352,10 +358,12 @@ exports[`Form form should support disabled 1`] = `
                 <input
                   aria-autocomplete="list"
                   aria-controls="rc_select_TEST_OR_SSR_list"
+                  aria-expanded="false"
                   aria-haspopup="listbox"
                   aria-owns="rc_select_TEST_OR_SSR_list"
                   autocomplete="off"
                   class="ant-select-selection-search-input"
+                  disabled=""
                   id="rc_select_TEST_OR_SSR"
                   readonly=""
                   role="combobox"
@@ -423,7 +431,7 @@ exports[`Form form should support disabled 1`] = `
           class="ant-form-item-control-input-content"
         >
           <div
-            class="ant-select ant-cascader ant-select-in-form-item ant-select-single ant-select-allow-clear ant-select-show-arrow"
+            class="ant-select ant-cascader ant-select-in-form-item ant-select-single ant-select-allow-clear ant-select-show-arrow ant-select-disabled"
           >
             <div
               class="ant-select-selector"
@@ -434,10 +442,12 @@ exports[`Form form should support disabled 1`] = `
                 <input
                   aria-autocomplete="list"
                   aria-controls="rc_select_TEST_OR_SSR_list"
+                  aria-expanded="false"
                   aria-haspopup="listbox"
                   aria-owns="rc_select_TEST_OR_SSR_list"
                   autocomplete="off"
                   class="ant-select-selection-search-input"
+                  disabled=""
                   id="rc_select_TEST_OR_SSR"
                   readonly=""
                   role="combobox"
@@ -505,13 +515,14 @@ exports[`Form form should support disabled 1`] = `
           class="ant-form-item-control-input-content"
         >
           <div
-            class="ant-picker"
+            class="ant-picker ant-picker-disabled"
           >
             <div
               class="ant-picker-input"
             >
               <input
                 autocomplete="off"
+                disabled=""
                 placeholder="Select date"
                 readonly=""
                 size="12"
@@ -570,13 +581,14 @@ exports[`Form form should support disabled 1`] = `
           class="ant-form-item-control-input-content"
         >
           <div
-            class="ant-picker ant-picker-range"
+            class="ant-picker ant-picker-range ant-picker-disabled"
           >
             <div
               class="ant-picker-input ant-picker-input-active"
             >
               <input
                 autocomplete="off"
+                disabled=""
                 placeholder="Start date"
                 readonly=""
                 size="12"
@@ -616,6 +628,7 @@ exports[`Form form should support disabled 1`] = `
             >
               <input
                 autocomplete="off"
+                disabled=""
                 placeholder="End date"
                 readonly=""
                 size="12"
@@ -677,7 +690,7 @@ exports[`Form form should support disabled 1`] = `
           class="ant-form-item-control-input-content"
         >
           <div
-            class="ant-input-number ant-input-number-in-form-item"
+            class="ant-input-number ant-input-number-in-form-item ant-input-number-disabled"
           >
             <div
               class="ant-input-number-handler-wrap"
@@ -743,6 +756,7 @@ exports[`Form form should support disabled 1`] = `
               <input
                 autocomplete="off"
                 class="ant-input-number-input"
+                disabled=""
                 role="spinbutton"
                 step="1"
                 value=""
@@ -776,7 +790,8 @@ exports[`Form form should support disabled 1`] = `
           class="ant-form-item-control-input-content"
         >
           <textarea
-            class="ant-input"
+            class="ant-input ant-input-disabled"
+            disabled=""
             rows="4"
           />
         </div>
@@ -807,781 +822,8 @@ exports[`Form form should support disabled 1`] = `
         >
           <button
             aria-checked="false"
-            class="ant-switch"
-            role="switch"
-            type="button"
-          >
-            <div
-              class="ant-switch-handle"
-            />
-            <span
-              class="ant-switch-inner"
-            />
-          </button>
-        </div>
-      </div>
-    </div>
-  </div>
-  <div
-    class="ant-row ant-form-item"
-  >
-    <div
-      class="ant-col ant-col-4 ant-form-item-label"
-    >
-      <label
-        class=""
-        title="Button"
-      >
-        Button
-      </label>
-    </div>
-    <div
-      class="ant-col ant-col-14 ant-form-item-control"
-    >
-      <div
-        class="ant-form-item-control-input"
-      >
-        <div
-          class="ant-form-item-control-input-content"
-        >
-          <button
-            class="ant-btn ant-btn-default"
-            type="button"
-          >
-            <span>
-              Button
-            </span>
-          </button>
-        </div>
-      </div>
-    </div>
-  </div>
-</form>
-`;
-
-exports[`Form form should support disabled 2`] = `
-<form
-  class="ant-form ant-form-horizontal"
->
-  <div
-    class="ant-row ant-form-item ant-form-item-has-success"
-  >
-    <div
-      class="ant-col ant-col-4 ant-form-item-label"
-    >
-      <label
-        class=""
-        for="disabled"
-        title="Form disabled"
-      >
-        Form disabled
-      </label>
-    </div>
-    <div
-      class="ant-col ant-col-14 ant-form-item-control"
-    >
-      <div
-        class="ant-form-item-control-input"
-      >
-        <div
-          class="ant-form-item-control-input-content"
-        >
-          <label
-            class="ant-checkbox-wrapper ant-checkbox-wrapper-in-form-item"
-          >
-            <span
-              class="ant-checkbox"
-            >
-              <input
-                class="ant-checkbox-input"
-                id="disabled"
-                type="checkbox"
-                value=""
-              />
-              <span
-                class="ant-checkbox-inner"
-              />
-            </span>
-            <span>
-              disabled
-            </span>
-          </label>
-        </div>
-      </div>
-    </div>
-  </div>
-  <div
-    class="ant-row ant-form-item"
-  >
-    <div
-      class="ant-col ant-col-4 ant-form-item-label"
-    >
-      <label
-        class=""
-        title="Radio"
-      >
-        Radio
-      </label>
-    </div>
-    <div
-      class="ant-col ant-col-14 ant-form-item-control"
-    >
-      <div
-        class="ant-form-item-control-input"
-      >
-        <div
-          class="ant-form-item-control-input-content"
-        >
-          <div
-            class="ant-radio-group ant-radio-group-outline"
-          >
-            <label
-              class="ant-radio-wrapper ant-radio-wrapper-in-form-item"
-            >
-              <span
-                class="ant-radio"
-              >
-                <input
-                  class="ant-radio-input"
-                  type="radio"
-                  value="apple"
-                />
-                <span
-                  class="ant-radio-inner"
-                />
-              </span>
-              <span>
-                 Apple 
-              </span>
-            </label>
-            <label
-              class="ant-radio-wrapper ant-radio-wrapper-in-form-item"
-            >
-              <span
-                class="ant-radio"
-              >
-                <input
-                  class="ant-radio-input"
-                  type="radio"
-                  value="pear"
-                />
-                <span
-                  class="ant-radio-inner"
-                />
-              </span>
-              <span>
-                 Pear 
-              </span>
-            </label>
-          </div>
-        </div>
-      </div>
-    </div>
-  </div>
-  <div
-    class="ant-row ant-form-item"
-  >
-    <div
-      class="ant-col ant-col-4 ant-form-item-label"
-    >
-      <label
-        class=""
-        title="Input"
-      >
-        Input
-      </label>
-    </div>
-    <div
-      class="ant-col ant-col-14 ant-form-item-control"
-    >
-      <div
-        class="ant-form-item-control-input"
-      >
-        <div
-          class="ant-form-item-control-input-content"
-        >
-          <input
-            class="ant-input"
-            type="text"
-            value=""
-          />
-        </div>
-      </div>
-    </div>
-  </div>
-  <div
-    class="ant-row ant-form-item"
-  >
-    <div
-      class="ant-col ant-col-4 ant-form-item-label"
-    >
-      <label
-        class=""
-        title="Select"
-      >
-        Select
-      </label>
-    </div>
-    <div
-      class="ant-col ant-col-14 ant-form-item-control"
-    >
-      <div
-        class="ant-form-item-control-input"
-      >
-        <div
-          class="ant-form-item-control-input-content"
-        >
-          <div
-            class="ant-select ant-select-in-form-item ant-select-single ant-select-show-arrow"
-          >
-            <div
-              class="ant-select-selector"
-            >
-              <span
-                class="ant-select-selection-search"
-              >
-                <input
-                  aria-activedescendant="rc_select_TEST_OR_SSR_list_0"
-                  aria-autocomplete="list"
-                  aria-controls="rc_select_TEST_OR_SSR_list"
-                  aria-haspopup="listbox"
-                  aria-owns="rc_select_TEST_OR_SSR_list"
-                  autocomplete="off"
-                  class="ant-select-selection-search-input"
-                  id="rc_select_TEST_OR_SSR"
-                  readonly=""
-                  role="combobox"
-                  style="opacity: 0;"
-                  type="search"
-                  unselectable="on"
-                  value=""
-                />
-              </span>
-              <span
-                class="ant-select-selection-placeholder"
-              />
-            </div>
-            <span
-              aria-hidden="true"
-              class="ant-select-arrow"
-              style="user-select: none;"
-              unselectable="on"
-            >
-              <span
-                aria-label="down"
-                class="anticon anticon-down ant-select-suffix"
-                role="img"
-              >
-                <svg
-                  aria-hidden="true"
-                  data-icon="down"
-                  fill="currentColor"
-                  focusable="false"
-                  height="1em"
-                  viewBox="64 64 896 896"
-                  width="1em"
-                >
-                  <path
-                    d="M884 256h-75c-5.1 0-9.9 2.5-12.9 6.6L512 654.2 227.9 262.6c-3-4.1-7.8-6.6-12.9-6.6h-75c-6.5 0-10.3 7.4-6.5 12.7l352.6 486.1c12.8 17.6 39 17.6 51.7 0l352.6-486.1c3.9-5.3.1-12.7-6.4-12.7z"
-                  />
-                </svg>
-              </span>
-            </span>
-          </div>
-        </div>
-      </div>
-    </div>
-  </div>
-  <div
-    class="ant-row ant-form-item"
-  >
-    <div
-      class="ant-col ant-col-4 ant-form-item-label"
-    >
-      <label
-        class=""
-        title="TreeSelect"
-      >
-        TreeSelect
-      </label>
-    </div>
-    <div
-      class="ant-col ant-col-14 ant-form-item-control"
-    >
-      <div
-        class="ant-form-item-control-input"
-      >
-        <div
-          class="ant-form-item-control-input-content"
-        >
-          <div
-            class="ant-select ant-tree-select ant-select-in-form-item ant-select-single ant-select-show-arrow"
-          >
-            <div
-              class="ant-select-selector"
-            >
-              <span
-                class="ant-select-selection-search"
-              >
-                <input
-                  aria-autocomplete="list"
-                  aria-controls="rc_select_TEST_OR_SSR_list"
-                  aria-haspopup="listbox"
-                  aria-owns="rc_select_TEST_OR_SSR_list"
-                  autocomplete="off"
-                  class="ant-select-selection-search-input"
-                  id="rc_select_TEST_OR_SSR"
-                  readonly=""
-                  role="combobox"
-                  style="opacity: 0;"
-                  type="search"
-                  unselectable="on"
-                  value=""
-                />
-              </span>
-              <span
-                class="ant-select-selection-placeholder"
-              />
-            </div>
-            <span
-              aria-hidden="true"
-              class="ant-select-arrow"
-              style="user-select: none;"
-              unselectable="on"
-            >
-              <span
-                aria-label="down"
-                class="anticon anticon-down ant-select-suffix"
-                role="img"
-              >
-                <svg
-                  aria-hidden="true"
-                  data-icon="down"
-                  fill="currentColor"
-                  focusable="false"
-                  height="1em"
-                  viewBox="64 64 896 896"
-                  width="1em"
-                >
-                  <path
-                    d="M884 256h-75c-5.1 0-9.9 2.5-12.9 6.6L512 654.2 227.9 262.6c-3-4.1-7.8-6.6-12.9-6.6h-75c-6.5 0-10.3 7.4-6.5 12.7l352.6 486.1c12.8 17.6 39 17.6 51.7 0l352.6-486.1c3.9-5.3.1-12.7-6.4-12.7z"
-                  />
-                </svg>
-              </span>
-            </span>
-          </div>
-        </div>
-      </div>
-    </div>
-  </div>
-  <div
-    class="ant-row ant-form-item"
-  >
-    <div
-      class="ant-col ant-col-4 ant-form-item-label"
-    >
-      <label
-        class=""
-        title="Cascader"
-      >
-        Cascader
-      </label>
-    </div>
-    <div
-      class="ant-col ant-col-14 ant-form-item-control"
-    >
-      <div
-        class="ant-form-item-control-input"
-      >
-        <div
-          class="ant-form-item-control-input-content"
-        >
-          <div
-            class="ant-select ant-cascader ant-select-in-form-item ant-select-single ant-select-allow-clear ant-select-show-arrow"
-          >
-            <div
-              class="ant-select-selector"
-            >
-              <span
-                class="ant-select-selection-search"
-              >
-                <input
-                  aria-autocomplete="list"
-                  aria-controls="rc_select_TEST_OR_SSR_list"
-                  aria-haspopup="listbox"
-                  aria-owns="rc_select_TEST_OR_SSR_list"
-                  autocomplete="off"
-                  class="ant-select-selection-search-input"
-                  id="rc_select_TEST_OR_SSR"
-                  readonly=""
-                  role="combobox"
-                  style="opacity: 0;"
-                  type="search"
-                  unselectable="on"
-                  value=""
-                />
-              </span>
-              <span
-                class="ant-select-selection-placeholder"
-              />
-            </div>
-            <span
-              aria-hidden="true"
-              class="ant-select-arrow"
-              style="user-select: none;"
-              unselectable="on"
-            >
-              <span
-                aria-label="down"
-                class="anticon anticon-down ant-select-suffix"
-                role="img"
-              >
-                <svg
-                  aria-hidden="true"
-                  data-icon="down"
-                  fill="currentColor"
-                  focusable="false"
-                  height="1em"
-                  viewBox="64 64 896 896"
-                  width="1em"
-                >
-                  <path
-                    d="M884 256h-75c-5.1 0-9.9 2.5-12.9 6.6L512 654.2 227.9 262.6c-3-4.1-7.8-6.6-12.9-6.6h-75c-6.5 0-10.3 7.4-6.5 12.7l352.6 486.1c12.8 17.6 39 17.6 51.7 0l352.6-486.1c3.9-5.3.1-12.7-6.4-12.7z"
-                  />
-                </svg>
-              </span>
-            </span>
-          </div>
-        </div>
-      </div>
-    </div>
-  </div>
-  <div
-    class="ant-row ant-form-item"
-  >
-    <div
-      class="ant-col ant-col-4 ant-form-item-label"
-    >
-      <label
-        class=""
-        title="DatePicker"
-      >
-        DatePicker
-      </label>
-    </div>
-    <div
-      class="ant-col ant-col-14 ant-form-item-control"
-    >
-      <div
-        class="ant-form-item-control-input"
-      >
-        <div
-          class="ant-form-item-control-input-content"
-        >
-          <div
-            class="ant-picker"
-          >
-            <div
-              class="ant-picker-input"
-            >
-              <input
-                autocomplete="off"
-                placeholder="Select date"
-                readonly=""
-                size="12"
-                title=""
-                value=""
-              />
-              <span
-                class="ant-picker-suffix"
-              >
-                <span
-                  aria-label="calendar"
-                  class="anticon anticon-calendar"
-                  role="img"
-                >
-                  <svg
-                    aria-hidden="true"
-                    data-icon="calendar"
-                    fill="currentColor"
-                    focusable="false"
-                    height="1em"
-                    viewBox="64 64 896 896"
-                    width="1em"
-                  >
-                    <path
-                      d="M880 184H712v-64c0-4.4-3.6-8-8-8h-56c-4.4 0-8 3.6-8 8v64H384v-64c0-4.4-3.6-8-8-8h-56c-4.4 0-8 3.6-8 8v64H144c-17.7 0-32 14.3-32 32v664c0 17.7 14.3 32 32 32h736c17.7 0 32-14.3 32-32V216c0-17.7-14.3-32-32-32zm-40 656H184V460h656v380zM184 392V256h128v48c0 4.4 3.6 8 8 8h56c4.4 0 8-3.6 8-8v-48h256v48c0 4.4 3.6 8 8 8h56c4.4 0 8-3.6 8-8v-48h128v136H184z"
-                    />
-                  </svg>
-                </span>
-              </span>
-            </div>
-          </div>
-        </div>
-      </div>
-    </div>
-  </div>
-  <div
-    class="ant-row ant-form-item"
-  >
-    <div
-      class="ant-col ant-col-4 ant-form-item-label"
-    >
-      <label
-        class=""
-        title="RangePicker"
-      >
-        RangePicker
-      </label>
-    </div>
-    <div
-      class="ant-col ant-col-14 ant-form-item-control"
-    >
-      <div
-        class="ant-form-item-control-input"
-      >
-        <div
-          class="ant-form-item-control-input-content"
-        >
-          <div
-            class="ant-picker ant-picker-range"
-          >
-            <div
-              class="ant-picker-input ant-picker-input-active"
-            >
-              <input
-                autocomplete="off"
-                placeholder="Start date"
-                readonly=""
-                size="12"
-                value=""
-              />
-            </div>
-            <div
-              class="ant-picker-range-separator"
-            >
-              <span
-                aria-label="to"
-                class="ant-picker-separator"
-              >
-                <span
-                  aria-label="swap-right"
-                  class="anticon anticon-swap-right"
-                  role="img"
-                >
-                  <svg
-                    aria-hidden="true"
-                    data-icon="swap-right"
-                    fill="currentColor"
-                    focusable="false"
-                    height="1em"
-                    viewBox="0 0 1024 1024"
-                    width="1em"
-                  >
-                    <path
-                      d="M873.1 596.2l-164-208A32 32 0 00684 376h-64.8c-6.7 0-10.4 7.7-6.3 13l144.3 183H152c-4.4 0-8 3.6-8 8v60c0 4.4 3.6 8 8 8h695.9c26.8 0 41.7-30.8 25.2-51.8z"
-                    />
-                  </svg>
-                </span>
-              </span>
-            </div>
-            <div
-              class="ant-picker-input"
-            >
-              <input
-                autocomplete="off"
-                placeholder="End date"
-                readonly=""
-                size="12"
-                value=""
-              />
-            </div>
-            <div
-              class="ant-picker-active-bar"
-              style="left: 0px; width: 0px; position: absolute;"
-            />
-            <span
-              class="ant-picker-suffix"
-            >
-              <span
-                aria-label="calendar"
-                class="anticon anticon-calendar"
-                role="img"
-              >
-                <svg
-                  aria-hidden="true"
-                  data-icon="calendar"
-                  fill="currentColor"
-                  focusable="false"
-                  height="1em"
-                  viewBox="64 64 896 896"
-                  width="1em"
-                >
-                  <path
-                    d="M880 184H712v-64c0-4.4-3.6-8-8-8h-56c-4.4 0-8 3.6-8 8v64H384v-64c0-4.4-3.6-8-8-8h-56c-4.4 0-8 3.6-8 8v64H144c-17.7 0-32 14.3-32 32v664c0 17.7 14.3 32 32 32h736c17.7 0 32-14.3 32-32V216c0-17.7-14.3-32-32-32zm-40 656H184V460h656v380zM184 392V256h128v48c0 4.4 3.6 8 8 8h56c4.4 0 8-3.6 8-8v-48h256v48c0 4.4 3.6 8 8 8h56c4.4 0 8-3.6 8-8v-48h128v136H184z"
-                  />
-                </svg>
-              </span>
-            </span>
-          </div>
-        </div>
-      </div>
-    </div>
-  </div>
-  <div
-    class="ant-row ant-form-item"
-  >
-    <div
-      class="ant-col ant-col-4 ant-form-item-label"
-    >
-      <label
-        class=""
-        title="InputNumber"
-      >
-        InputNumber
-      </label>
-    </div>
-    <div
-      class="ant-col ant-col-14 ant-form-item-control"
-    >
-      <div
-        class="ant-form-item-control-input"
-      >
-        <div
-          class="ant-form-item-control-input-content"
-        >
-          <div
-            class="ant-input-number ant-input-number-in-form-item"
-          >
-            <div
-              class="ant-input-number-handler-wrap"
-            >
-              <span
-                aria-disabled="false"
-                aria-label="Increase Value"
-                class="ant-input-number-handler ant-input-number-handler-up"
-                role="button"
-                unselectable="on"
-              >
-                <span
-                  aria-label="up"
-                  class="anticon anticon-up ant-input-number-handler-up-inner"
-                  role="img"
-                >
-                  <svg
-                    aria-hidden="true"
-                    data-icon="up"
-                    fill="currentColor"
-                    focusable="false"
-                    height="1em"
-                    viewBox="64 64 896 896"
-                    width="1em"
-                  >
-                    <path
-                      d="M890.5 755.3L537.9 269.2c-12.8-17.6-39-17.6-51.7 0L133.5 755.3A8 8 0 00140 768h75c5.1 0 9.9-2.5 12.9-6.6L512 369.8l284.1 391.6c3 4.1 7.8 6.6 12.9 6.6h75c6.5 0 10.3-7.4 6.5-12.7z"
-                    />
-                  </svg>
-                </span>
-              </span>
-              <span
-                aria-disabled="false"
-                aria-label="Decrease Value"
-                class="ant-input-number-handler ant-input-number-handler-down"
-                role="button"
-                unselectable="on"
-              >
-                <span
-                  aria-label="down"
-                  class="anticon anticon-down ant-input-number-handler-down-inner"
-                  role="img"
-                >
-                  <svg
-                    aria-hidden="true"
-                    data-icon="down"
-                    fill="currentColor"
-                    focusable="false"
-                    height="1em"
-                    viewBox="64 64 896 896"
-                    width="1em"
-                  >
-                    <path
-                      d="M884 256h-75c-5.1 0-9.9 2.5-12.9 6.6L512 654.2 227.9 262.6c-3-4.1-7.8-6.6-12.9-6.6h-75c-6.5 0-10.3 7.4-6.5 12.7l352.6 486.1c12.8 17.6 39 17.6 51.7 0l352.6-486.1c3.9-5.3.1-12.7-6.4-12.7z"
-                    />
-                  </svg>
-                </span>
-              </span>
-            </div>
-            <div
-              class="ant-input-number-input-wrap"
-            >
-              <input
-                autocomplete="off"
-                class="ant-input-number-input"
-                role="spinbutton"
-                step="1"
-                value=""
-              />
-            </div>
-          </div>
-        </div>
-      </div>
-    </div>
-  </div>
-  <div
-    class="ant-row ant-form-item"
-  >
-    <div
-      class="ant-col ant-col-4 ant-form-item-label"
-    >
-      <label
-        class=""
-        title="TextArea"
-      >
-        TextArea
-      </label>
-    </div>
-    <div
-      class="ant-col ant-col-14 ant-form-item-control"
-    >
-      <div
-        class="ant-form-item-control-input"
-      >
-        <div
-          class="ant-form-item-control-input-content"
-        >
-          <textarea
-            class="ant-input"
-            rows="4"
-          />
-        </div>
-      </div>
-    </div>
-  </div>
-  <div
-    class="ant-row ant-form-item"
-  >
-    <div
-      class="ant-col ant-col-4 ant-form-item-label"
-    >
-      <label
-        class=""
-        title="Switch"
-      >
-        Switch
-      </label>
-    </div>
-    <div
-      class="ant-col ant-col-14 ant-form-item-control"
-    >
-      <div
-        class="ant-form-item-control-input"
-      >
-        <div
-          class="ant-form-item-control-input-content"
-        >
-          <button
-            aria-checked="false"
-            class="ant-switch"
+            class="ant-switch ant-switch-disabled"
+            disabled=""
             role="switch"
             type="button"
           >
@@ -1620,6 +862,7 @@ exports[`Form form should support disabled 2`] = `
         >
           <button
             class="ant-btn ant-btn-default"
+            disabled=""
             type="button"
           >
             <span>
diff --git a/components/form/__tests__/index.test.js b/components/form/__tests__/index.test.js
index a134d1d882..3f7f0f836c 100644
--- a/components/form/__tests__/index.test.js
+++ b/components/form/__tests__/index.test.js
@@ -886,93 +886,76 @@ describe('Form', () => {
   });
 
   it('form should support disabled', () => {
-    const App = () => {
-      const [componentDisabled, setComponentDisabled] = React.useState(false);
-      const onFormLayoutChange = ({ disabled }) => {
-        setComponentDisabled(disabled);
-      };
-      return (
-        <Form
-          labelCol={{ span: 4 }}
-          wrapperCol={{ span: 14 }}
-          layout="horizontal"
-          initialValues={{ disabled: componentDisabled }}
-          onValuesChange={onFormLayoutChange}
-          disabled={componentDisabled}
-        >
-          <Form.Item label="Form disabled" name="disabled" valuePropName="checked">
-            <Checkbox>disabled</Checkbox>
-          </Form.Item>
-          <Form.Item label="Radio">
-            <Radio.Group>
-              <Radio value="apple"> Apple </Radio>
-              <Radio value="pear"> Pear </Radio>
-            </Radio.Group>
-          </Form.Item>
-          <Form.Item label="Input">
-            <Input />
-          </Form.Item>
-          <Form.Item label="Select">
-            <Select>
-              <Select.Option value="demo">Demo</Select.Option>
-            </Select>
-          </Form.Item>
-          <Form.Item label="TreeSelect">
-            <TreeSelect
-              treeData={[
-                {
-                  title: 'Light',
-                  value: 'light',
-                  children: [{ title: 'Bamboo', value: 'bamboo' }],
-                },
-              ]}
-            />
-          </Form.Item>
-          <Form.Item label="Cascader">
-            <Cascader
-              options={[
-                {
-                  value: 'zhejiang',
-                  label: 'Zhejiang',
-                  children: [
-                    {
-                      value: 'hangzhou',
-                      label: 'Hangzhou',
-                    },
-                  ],
-                },
-              ]}
-            />
-          </Form.Item>
-          <Form.Item label="DatePicker">
-            <DatePicker />
-          </Form.Item>
-          <Form.Item label="RangePicker">
-            <RangePicker />
-          </Form.Item>
-          <Form.Item label="InputNumber">
-            <InputNumber />
-          </Form.Item>
-          <Form.Item label="TextArea">
-            <TextArea rows={4} />
-          </Form.Item>
-          <Form.Item label="Switch" valuePropName="checked">
-            <Switch />
-          </Form.Item>
-          <Form.Item label="Button">
-            <Button>Button</Button>
-          </Form.Item>
-        </Form>
-      );
-    };
+    const App = () => (
+      <Form labelCol={{ span: 4 }} wrapperCol={{ span: 14 }} layout="horizontal" disabled>
+        <Form.Item label="Form disabled" name="disabled" valuePropName="checked">
+          <Checkbox>disabled</Checkbox>
+        </Form.Item>
+        <Form.Item label="Radio">
+          <Radio.Group>
+            <Radio value="apple"> Apple </Radio>
+            <Radio value="pear"> Pear </Radio>
+          </Radio.Group>
+        </Form.Item>
+        <Form.Item label="Input">
+          <Input />
+        </Form.Item>
+        <Form.Item label="Select">
+          <Select>
+            <Select.Option value="demo">Demo</Select.Option>
+          </Select>
+        </Form.Item>
+        <Form.Item label="TreeSelect">
+          <TreeSelect
+            treeData={[
+              {
+                title: 'Light',
+                value: 'light',
+                children: [{ title: 'Bamboo', value: 'bamboo' }],
+              },
+            ]}
+          />
+        </Form.Item>
+        <Form.Item label="Cascader">
+          <Cascader
+            options={[
+              {
+                value: 'zhejiang',
+                label: 'Zhejiang',
+                children: [
+                  {
+                    value: 'hangzhou',
+                    label: 'Hangzhou',
+                  },
+                ],
+              },
+            ]}
+          />
+        </Form.Item>
+        <Form.Item label="DatePicker">
+          <DatePicker />
+        </Form.Item>
+        <Form.Item label="RangePicker">
+          <RangePicker />
+        </Form.Item>
+        <Form.Item label="InputNumber">
+          <InputNumber />
+        </Form.Item>
+        <Form.Item label="TextArea">
+          <TextArea rows={4} />
+        </Form.Item>
+        <Form.Item label="Switch" valuePropName="checked">
+          <Switch />
+        </Form.Item>
+        <Form.Item label="Button">
+          <Button>Button</Button>
+        </Form.Item>
+      </Form>
+    );
 
     const wrapper = mount(<App />);
 
     expect(wrapper.render()).toMatchSnapshot();
-    act(() => {
-      wrapper.find('.ant-checkbox-input').at(0).simulate('change');
-    });
-    expect(wrapper.render()).toMatchSnapshot();
   });
 
   it('_internalItemRender api test', () => {

From 1d82f221b62ce5e0b1d3acc744c8fe20b06d778f Mon Sep 17 00:00:00 2001
From: yykoypj <601924094@qq.com>
Date: Sat, 2 Jul 2022 16:31:13 +0800
Subject: [PATCH 8/9] test: move test cases to @testing/library for Carousel
 (#35926)

* test: move test cases to @testing/library for Carousel

* fix: wait for animation
---
 components/carousel/__tests__/index.test.js | 44 +++++++++++++--------
 1 file changed, 27 insertions(+), 17 deletions(-)

diff --git a/components/carousel/__tests__/index.test.js b/components/carousel/__tests__/index.test.js
index 010ae4e60c..36cbca03f4 100644
--- a/components/carousel/__tests__/index.test.js
+++ b/components/carousel/__tests__/index.test.js
@@ -1,9 +1,8 @@
-import { mount } from 'enzyme';
 import React from 'react';
 import Carousel from '..';
 import mountTest from '../../../tests/shared/mountTest';
 import rtlTest from '../../../tests/shared/rtlTest';
-import { render, sleep } from '../../../tests/utils';
+import { sleep, render, act } from '../../../tests/utils';
 
 describe('Carousel', () => {
   mountTest(Carousel);
@@ -17,9 +16,17 @@ describe('Carousel', () => {
     jest.useRealTimers();
   });
 
+  function runAllTimersWithAct(times = 1) {
+    for (let i = 0; i < times; i++) {
+      act(() => {
+        jest.runAllTimers();
+      });
+    }
+  }
+
   it('should has innerSlider', () => {
     const ref = React.createRef();
-    mount(
+    render(
       <Carousel ref={ref}>
         <div />
       </Carousel>,
@@ -28,9 +35,9 @@ describe('Carousel', () => {
     expect(typeof innerSlider.slickNext).toBe('function');
   });
 
-  it('should has prev, next and go function', () => {
+  it('should has prev, next and go function', async () => {
     const ref = React.createRef();
-    mount(
+    render(
       <Carousel ref={ref}>
         <div>1</div>
         <div>2</div>
@@ -43,20 +50,23 @@ describe('Carousel', () => {
     expect(typeof goTo).toBe('function');
     expect(ref.current.innerSlider.state.currentSlide).toBe(0);
     ref.current.goTo(2);
-    jest.runAllTimers();
+    runAllTimersWithAct(1);
     expect(ref.current.innerSlider.state.currentSlide).toBe(2);
+    // wait for animation to be finished
+    runAllTimersWithAct(2);
     ref.current.prev();
-    jest.runAllTimers();
+    runAllTimersWithAct(1);
     expect(ref.current.innerSlider.state.currentSlide).toBe(1);
+    runAllTimersWithAct(2);
     ref.current.next();
-    jest.runAllTimers();
+    runAllTimersWithAct(1);
     expect(ref.current.innerSlider.state.currentSlide).toBe(2);
   });
 
   it('should trigger autoPlay after window resize', async () => {
     jest.useRealTimers();
     const ref = React.createRef();
-    mount(
+    render(
       <Carousel autoplay ref={ref}>
         <div>1</div>
         <div>2</div>
@@ -64,14 +74,14 @@ describe('Carousel', () => {
       </Carousel>,
     );
     const spy = jest.spyOn(ref.current.innerSlider, 'autoPlay');
-    window.resizeTo(1000);
+    window.resizeTo(1000, window.outerHeight);
     expect(spy).not.toHaveBeenCalled();
     await sleep(500);
     expect(spy).toHaveBeenCalled();
   });
 
   it('cancel resize listener when unmount', async () => {
-    const wrapper = mount(
+    const { unmount } = render(
       <Carousel autoplay>
         <div>1</div>
         <div>2</div>
@@ -79,7 +89,7 @@ describe('Carousel', () => {
       </Carousel>,
     );
     const spy = jest.spyOn(window, 'removeEventListener');
-    wrapper.unmount();
+    unmount();
     expect(spy).toHaveBeenCalled();
   });
 
@@ -87,12 +97,13 @@ describe('Carousel', () => {
     ['left', 'right', 'top', 'bottom'].forEach(dotPosition => {
       // eslint-disable-next-line jest/valid-title
       it(dotPosition, () => {
-        const wrapper = mount(
+        const { container } = render(
           <Carousel dotPosition={dotPosition}>
             <div />
           </Carousel>,
         );
-        expect(wrapper.render()).toMatchSnapshot();
+        container.normalize();
+        expect(container.firstChild).toMatchSnapshot();
       });
     });
   });
@@ -126,15 +137,14 @@ describe('Carousel', () => {
 
   describe('dots precise control by plain object', () => {
     it('use dots to provide dotsClasse', () => {
-      const wrapper = mount(
+      const { container } = render(
         <Carousel dots={{ className: 'customDots' }}>
           <div>1</div>
           <div>2</div>
           <div>3</div>
         </Carousel>,
       );
-      wrapper.update();
-      expect(wrapper.find('.slick-dots').hasClass('customDots')).toBeTruthy();
+      expect(container.querySelector('.slick-dots')).toHaveClass('customDots');
     });
   });
 });

From 40728fb4dc75110ac76ac5164ade248b3fb78004 Mon Sep 17 00:00:00 2001
From: dingkang <dingkang0458@gmail.com>
Date: Sat, 2 Jul 2022 16:31:38 +0800
Subject: [PATCH 9/9] test: replace layout test case with test lib (#36323)

* test: replace layout test case with test lib

* test: fix react 18

* test: clean up

Co-authored-by: zombiej <smith3816@gmail.com>
---
 .../__snapshots__/index.test.js.snap          |   2 +-
 .../__tests__/dynamic-breakpoint.test.tsx     |  26 +--
 components/layout/__tests__/index.test.js     | 156 +++++++++++-------
 3 files changed, 109 insertions(+), 75 deletions(-)

diff --git a/components/layout/__tests__/__snapshots__/index.test.js.snap b/components/layout/__tests__/__snapshots__/index.test.js.snap
index d9d432a065..814b4c1405 100644
--- a/components/layout/__tests__/__snapshots__/index.test.js.snap
+++ b/components/layout/__tests__/__snapshots__/index.test.js.snap
@@ -3,7 +3,7 @@
 exports[`Layout renders string width correctly 1`] = `
 <aside
   class="ant-layout-sider ant-layout-sider-dark"
-  style="flex:0 0 200px;max-width:200px;min-width:200px;width:200px"
+  style="flex: 0 0 200px; max-width: 200px; min-width: 200px; width: 200px;"
 >
   <div
     class="ant-layout-sider-children"
diff --git a/components/layout/__tests__/dynamic-breakpoint.test.tsx b/components/layout/__tests__/dynamic-breakpoint.test.tsx
index 295723c146..68863b4ed7 100644
--- a/components/layout/__tests__/dynamic-breakpoint.test.tsx
+++ b/components/layout/__tests__/dynamic-breakpoint.test.tsx
@@ -1,6 +1,6 @@
-import { mount } from 'enzyme';
 import React, { useState } from 'react';
 import Sider from '../Sider';
+import { render, fireEvent } from '../../../tests/utils';
 
 const Content = () => {
   const [breakpoint, setBreakpoint] = useState('sm');
@@ -23,25 +23,27 @@ const Content = () => {
 it('Dynamic breakpoint in Sider component', () => {
   const add = jest.fn();
   const remove = jest.fn();
-  jest.spyOn(window, 'matchMedia').mockReturnValue({
+  const newMatch = jest.spyOn(window, 'matchMedia').mockReturnValue({
     matches: true,
     addEventListener: add,
     removeEventListener: remove,
   } as any);
 
-  const wrapper = mount(<Content />);
-  const newMatch = window.matchMedia as jest.Mock;
+  const { container } = render(<Content />);
+
+  // Record here since React 18 strict mode will render twice at first mount
+  const originCallTimes = newMatch.mock.calls.length;
+  expect(originCallTimes <= 2).toBeTruthy();
 
   // subscribe at first
-  expect(newMatch.mock.calls.length).toBe(1);
-  expect(add.mock.calls.length).toBe(1);
-  expect(remove.mock.calls.length).toBe(0);
+  expect(add.mock.calls).toHaveLength(originCallTimes);
+  expect(remove.mock.calls).toHaveLength(originCallTimes - 1);
 
-  wrapper.find('#toggle').at(0).simulate('click');
-  // unsubscribe then subscribe again
-  expect(newMatch.mock.calls.length).toBe(2);
-  expect(add.mock.calls.length).toBe(2);
-  expect(remove.mock.calls.length).toBe(1);
+  fireEvent.click(container.querySelector('#toggle') as Element);
+
+  expect(newMatch.mock.calls).toHaveLength(originCallTimes + 1);
+  expect(add.mock.calls).toHaveLength(originCallTimes + 1);
+  expect(remove.mock.calls).toHaveLength(originCallTimes);
 
   jest.restoreAllMocks();
 });
diff --git a/components/layout/__tests__/index.test.js b/components/layout/__tests__/index.test.js
index 92a6236493..4dbd066938 100644
--- a/components/layout/__tests__/index.test.js
+++ b/components/layout/__tests__/index.test.js
@@ -1,10 +1,11 @@
-import { mount, render } from 'enzyme';
 import React, { useState } from 'react';
+import { act } from 'react-dom/test-utils';
 import Layout from '..';
 import mountTest from '../../../tests/shared/mountTest';
 import rtlTest from '../../../tests/shared/rtlTest';
 import Icon from '../../icon';
 import Menu from '../../menu';
+import { fireEvent, render } from '../../../tests/utils';
 
 const { Sider, Content, Footer, Header } = Layout;
 
@@ -24,14 +25,16 @@ describe('Layout', () => {
   rtlTest(Sider);
 
   it('detect the sider as children', () => {
-    const wrapper = mount(
+    const { container, unmount } = render(
       <Layout>
         <Sider>Sider</Sider>
         <Content>Content</Content>
       </Layout>,
     );
-    expect(wrapper.find('.ant-layout').hasClass('ant-layout-has-sider')).toBe(true);
-    wrapper.unmount();
+    expect(container.querySelector('.ant-layout').className.includes('ant-layout-has-sider')).toBe(
+      true,
+    );
+    unmount();
   });
 
   it('umount from multiple siders', async () => {
@@ -53,16 +56,22 @@ describe('Layout', () => {
         </Layout>
       );
     };
-    const wrapper = mount(<App />);
-    expect(wrapper.find('.ant-layout').hasClass('ant-layout-has-sider')).toBe(true);
-    wrapper.find('button').at(0).simulate('click');
-    expect(wrapper.find('.ant-layout').hasClass('ant-layout-has-sider')).toBe(true);
-    wrapper.find('button').at(1).simulate('click');
-    expect(wrapper.find('.ant-layout').hasClass('ant-layout-has-sider')).toBe(false);
+    const { container } = render(<App />);
+    expect(container.querySelector('.ant-layout').className.includes('ant-layout-has-sider')).toBe(
+      true,
+    );
+    fireEvent.click(container.querySelectorAll('button')[0]);
+    expect(container.querySelector('.ant-layout').className.includes('ant-layout-has-sider')).toBe(
+      true,
+    );
+    fireEvent.click(container.querySelectorAll('button')[1]);
+    expect(container.querySelector('.ant-layout').className.includes('ant-layout-has-sider')).toBe(
+      false,
+    );
   });
 
   it('detect the sider inside the children', async () => {
-    const wrapper = mount(
+    const { container } = render(
       <Layout>
         <div>
           <Sider>Sider</Sider>
@@ -70,11 +79,13 @@ describe('Layout', () => {
         <Content>Content</Content>
       </Layout>,
     );
-    expect(wrapper.find('.ant-layout').hasClass('ant-layout-has-sider')).toBe(true);
+    expect(container.querySelector('.ant-layout').className.includes('ant-layout-has-sider')).toBe(
+      true,
+    );
   });
 
   it('detect ant-layout-sider-has-trigger class in sider when ant-layout-sider-trigger div tag exists', async () => {
-    const wrapper = mount(
+    const { container } = render(
       <Layout>
         <div>
           <Sider collapsible>Sider</Sider>
@@ -82,11 +93,15 @@ describe('Layout', () => {
         <Content>Content</Content>
       </Layout>,
     );
-    expect(wrapper.find('.ant-layout-sider').hasClass('ant-layout-sider-has-trigger')).toBe(true);
+    expect(
+      container
+        .querySelector('.ant-layout-sider')
+        .className.includes('ant-layout-sider-has-trigger'),
+    ).toBe(true);
   });
 
   it('should have 50% width of sidebar', async () => {
-    const wrapper = mount(
+    const { container } = render(
       <Layout>
         <div>
           <Sider width="50%">Sider</Sider>
@@ -94,13 +109,13 @@ describe('Layout', () => {
         <Content>Content</Content>
       </Layout>,
     );
-    expect(wrapper.find('.ant-layout-sider').at(0).prop('style').width).toBe('50%');
-    expect(wrapper.find('.ant-layout-sider').at(0).prop('style').flex).toBe('0 0 50%');
+    expect(container.querySelector('.ant-layout-sider').style.width).toBe('50%');
+    expect(container.querySelector('.ant-layout-sider').style.flex).toBe('0 0 50%');
   });
 
   describe('zeroWidth', () => {
     it('detect ant-layout-sider-zero-width class in sider when its width is 0%', async () => {
-      const wrapper = mount(
+      const { container } = render(
         <Layout>
           <div>
             <Sider width="0%">Sider</Sider>
@@ -108,14 +123,18 @@ describe('Layout', () => {
           <Content>Content</Content>
         </Layout>,
       );
-      expect(wrapper.find('.ant-layout-sider').hasClass('ant-layout-sider-zero-width')).toBe(true);
+      expect(
+        container
+          .querySelector('.ant-layout-sider')
+          .className.includes('ant-layout-sider-zero-width'),
+      ).toBe(true);
     });
 
     describe('should collapsible', () => {
       it('uncontrolled', () => {
         const onCollapse = jest.fn();
 
-        const wrapper = mount(
+        const { container } = render(
           <Layout>
             <Sider collapsible breakpoint="lg" collapsedWidth="0" onCollapse={onCollapse}>
               Sider
@@ -125,8 +144,7 @@ describe('Layout', () => {
         );
 
         onCollapse.mockReset();
-
-        wrapper.find('.ant-layout-sider-zero-width-trigger').simulate('click');
+        fireEvent.click(container.querySelector('.ant-layout-sider-zero-width-trigger'));
         expect(onCollapse).toHaveBeenCalledTimes(1);
       });
 
@@ -150,50 +168,54 @@ describe('Layout', () => {
           );
         };
 
-        const wrapper = mount(<Demo />);
-        expect(wrapper.find(Sider).prop('collapsed')).toBeTruthy();
-
-        wrapper.find('.ant-layout-sider-zero-width-trigger').simulate('click');
-        expect(wrapper.find(Sider).prop('collapsed')).toBeFalsy();
+        const { container } = render(<Demo />);
+        expect(container.querySelector('.ant-layout-sider-collapsed')).toBeTruthy();
+        fireEvent.click(container.querySelector('.ant-layout-sider-zero-width-trigger'));
+        expect(container.querySelector('.ant-layout-sider-collapsed')).toBeFalsy();
       });
     });
   });
 
   it('detect ant-layout-sider-dark as default theme', async () => {
-    const wrapper = mount(<Sider>Sider</Sider>);
-    expect(wrapper.find('.ant-layout-sider').hasClass('ant-layout-sider-dark')).toBe(true);
+    const { container } = render(<Sider>Sider</Sider>);
+    expect(
+      container.querySelector('.ant-layout-sider').className.includes('ant-layout-sider-dark'),
+    ).toBe(true);
   });
 
   it('detect ant-layout-sider-light when set light theme', async () => {
-    const wrapper = mount(<Sider theme="light">Sider</Sider>);
-    expect(wrapper.find('.ant-layout-sider').hasClass('ant-layout-sider-light')).toBe(true);
+    const { container } = render(<Sider theme="light">Sider</Sider>);
+    expect(
+      container.querySelector('.ant-layout-sider').className.includes('ant-layout-sider-light'),
+    ).toBe(true);
   });
 
   it('renders string width correctly', () => {
-    const wrapper = render(<Sider width="200">Sider</Sider>);
-    expect(wrapper).toMatchSnapshot();
+    const { asFragment } = render(<Sider width="200">Sider</Sider>);
+    expect(asFragment().firstChild).toMatchSnapshot();
   });
 
   it('should be controlled by collapsed', () => {
-    const wrapper = mount(<Sider>Sider</Sider>);
-    expect(wrapper.render()).toMatchSnapshot();
-    wrapper.setProps({ collapsed: true });
-    wrapper.update();
-    expect(wrapper.render()).toMatchSnapshot();
+    const { asFragment, rerender } = render(<Sider>Sider</Sider>);
+    expect(asFragment().firstChild).toMatchSnapshot();
+    rerender(<Sider collapsed>Sider</Sider>);
+    expect(asFragment().firstChild).toMatchSnapshot();
   });
 
   it('should not add ant-layout-has-sider when `hasSider` is `false`', () => {
-    const wrapper = mount(
+    const { container } = render(
       <Layout hasSider={false}>
         <Sider>Sider</Sider>
       </Layout>,
     );
-    expect(wrapper.find('.ant-layout').hasClass('ant-layout-has-sider')).toBe(false);
+    expect(container.querySelector('.ant-layout').className.includes('ant-layout-has-sider')).toBe(
+      false,
+    );
   });
 
   it('render correct with Tooltip', () => {
     jest.useFakeTimers();
-    const wrapper = mount(
+    const { container, rerender } = render(
       <Sider collapsible collapsed={false}>
         <Menu mode="inline">
           <Menu.Item key="1">
@@ -204,19 +226,27 @@ describe('Layout', () => {
       </Sider>,
     );
 
-    wrapper.find('.ant-menu-item').hostNodes().simulate('mouseenter');
-    jest.runAllTimers();
-    wrapper.update();
-    expect(wrapper.find('.ant-tooltip-inner').length).toBeFalsy();
-    wrapper.find('.ant-menu-item').hostNodes().simulate('mouseout');
-    jest.runAllTimers();
-    wrapper.update();
+    fireEvent.mouseEnter(container.querySelector('.ant-menu-item'));
+    act(() => {
+      jest.runAllTimers();
+    });
+    expect(container.querySelectorAll('.ant-tooltip-inner').length).toBeFalsy();
 
-    wrapper.setProps({ collapsed: true });
-    wrapper.find('.ant-menu-item').hostNodes().simulate('mouseenter');
-    jest.runAllTimers();
-    wrapper.update();
-    expect(wrapper.find('.ant-tooltip-inner').length).toBeTruthy();
+    rerender(
+      <Sider collapsible collapsed>
+        <Menu mode="inline">
+          <Menu.Item key="1">
+            <Icon type="user" />
+            <span>Light</span>
+          </Menu.Item>
+        </Menu>
+      </Sider>,
+    );
+    fireEvent.mouseEnter(container.querySelector('.ant-menu-item'));
+    act(() => {
+      jest.runAllTimers();
+    });
+    expect(container.querySelectorAll('.ant-tooltip-inner').length).toBeTruthy();
 
     jest.useRealTimers();
   });
@@ -236,7 +266,7 @@ describe('Sider', () => {
   it('should trigger onBreakpoint', async () => {
     const onBreakpoint = jest.fn();
 
-    mount(
+    render(
       <Sider breakpoint="md" onBreakpoint={onBreakpoint}>
         Sider
       </Sider>,
@@ -245,7 +275,7 @@ describe('Sider', () => {
   });
 
   it('should warning if use `inlineCollapsed` with menu', () => {
-    mount(
+    render(
       <Sider collapsible>
         <Menu mode="inline" inlineCollapsed />
       </Sider>,
@@ -256,7 +286,7 @@ describe('Sider', () => {
   });
 
   it('zeroWidthTriggerStyle should work', () => {
-    const wrapper = mount(
+    const { container } = render(
       <Sider collapsedWidth={0} collapsible zeroWidthTriggerStyle={{ background: '#F96' }}>
         <Menu theme="dark" mode="inline" defaultSelectedKeys={['1']}>
           <Menu.Item key="1">
@@ -266,13 +296,13 @@ describe('Sider', () => {
         </Menu>
       </Sider>,
     );
-    expect(wrapper.find('.ant-layout-sider-zero-width-trigger').props().style).toEqual({
-      background: '#F96',
-    });
+    expect(
+      container.querySelector('.ant-layout-sider-zero-width-trigger').style.background,
+    ).toEqual('rgb(255, 153, 102)');
   });
 
   it('should be able to customize zero width trigger by trigger prop', () => {
-    const wrapper = mount(
+    const { container } = render(
       <Sider collapsedWidth={0} collapsible trigger={<span className="my-trigger" />}>
         <Menu theme="dark" mode="inline" defaultSelectedKeys={['1']}>
           <Menu.Item key="1">
@@ -282,7 +312,9 @@ describe('Sider', () => {
         </Menu>
       </Sider>,
     );
-    expect(wrapper.find('.ant-layout-sider-zero-width-trigger').find('.my-trigger').length).toBe(1);
+    expect(
+      container.querySelector('.ant-layout-sider-zero-width-trigger').querySelector('.my-trigger'),
+    ).toBeTruthy();
   });
 
   ['Layout', 'Header', 'Footer', 'Sider'].forEach(tag => {
@@ -292,7 +324,7 @@ describe('Sider', () => {
       const onSelect = jest.fn();
       const Component = ComponentMap[tag];
 
-      mount(
+      render(
         <Component onSelect={onSelect} ref={ref}>
           {tag}
         </Component>,