chore: auto merge branches (#37191)

chore: Feature merge master

CHANGELOG.en-US.md

@@ -15,6 +15,13 @@ timeline: true
 
 ---
 
+## 4.22.7
+
+`2022-08-21`
+
+- 🐞 Fix Typography visible change some time Tooltip not work with ellipsis. [#37147](https://github.com/ant-design/ant-design/pull/37147)
+- 🐞 Fix InputNumber that style cannot be customized with controls less variables. [#37070](https://github.com/ant-design/ant-design/pull/37070) [@coldice945](https://github.com/coldice945)
+
 ## 4.22.6
 
 `2022-08-17`

CHANGELOG.zh-CN.md

@@ -15,6 +15,13 @@ timeline: true
 
 ---
 
+## 4.22.7
+
+`2022-08-21`
+
+- 🐞 修复 Typography 可见度切换时有时候省略不会显示 Tooltip 的问题。[#37147](https://github.com/ant-design/ant-design/pull/37147)
+- 🐞 修复 InputNumber 样式不跟随控件 less 变量改变的问题。[#37070](https://github.com/ant-design/ant-design/pull/37070) [@coldice945](https://github.com/coldice945)
+
 ## 4.22.6
 
 `2022-08-17`

components/_util/__tests__/easings.test.ts

@@ -2,7 +2,7 @@ import { easeInOutCubic } from '../easings';
 
 describe('Test easings', () => {
   it('easeInOutCubic return value', () => {
-    const nums = [];
+    const nums: number[] = [];
     // eslint-disable-next-line no-plusplus
     for (let index = 0; index < 5; index++) {
       nums.push(easeInOutCubic(index, 1, 5, 4));

components/_util/__tests__/getScroll.test.ts

@@ -41,7 +41,7 @@ describe('getScroll', () => {
   });
 
   it('getScroll documentElement', async () => {
-    const div = {};
+    const div: any = {};
     const scrollToSpy = jest.spyOn(window, 'scrollTo').mockImplementation((x, y) => {
       div.scrollLeft = null;
       div.scrollTop = null;

components/_util/__tests__/scrollTo.test.ts

@@ -2,7 +2,7 @@ import { sleep } from '../../../tests/utils';
 import scrollTo from '../scrollTo';
 
 describe('Test ScrollTo function', () => {
-  let dateNowMock;
+  let dateNowMock: jest.SpyInstance;
 
   beforeEach(() => {
     dateNowMock = jest
@@ -16,7 +16,7 @@ describe('Test ScrollTo function', () => {
   });
 
   it('test scrollTo', async () => {
-    const scrollToSpy = jest.spyOn(window, 'scrollTo').mockImplementation((x, y) => {
+    const scrollToSpy = jest.spyOn(window, 'scrollTo').mockImplementation((_, y) => {
       window.scrollY = y;
       window.pageYOffset = y;
     });

components/_util/__tests__/transButton.test.js

@@ -1,12 +0,0 @@
-import { mount } from 'enzyme';
-import React from 'react';
-import TransButton from '../transButton';
-
-describe('transButton component', () => {
-  it('disabled should update style', () => {
-    const wrapper = mount(<TransButton disabled />);
-    expect(wrapper.find('div').first().props().style).toEqual(
-      expect.objectContaining({ pointerEvents: 'none' }),
-    );
-  });
-});

components/_util/__tests__/transButton.test.tsx

@@ -0,0 +1,10 @@
+import React from 'react';
+import TransButton from '../transButton';
+import { render } from '../../../tests/utils';
+
+describe('transButton component', () => {
+  it('disabled should update style', () => {
+    const { container } = render(<TransButton disabled />);
+    expect(container.querySelector('div')?.style.pointerEvents).toBe('none');
+  });
+});

components/_util/__tests__/useSyncState.test.js

@@ -1,26 +0,0 @@
-import { mount } from 'enzyme';
-import React from 'react';
-import useSyncState from '../hooks/useSyncState';
-
-describe('Table', () => {
-  it('useSyncState', () => {
-    const Test = () => {
-      const [getVal, setVal] = useSyncState('light');
-
-      return (
-        <span
-          onClick={() => {
-            setVal('bamboo');
-          }}
-        >
-          {getVal()}
-        </span>
-      );
-    };
-
-    const wrapper = mount(<Test />);
-    expect(wrapper.text()).toEqual('light');
-    wrapper.find('span').simulate('click');
-    expect(wrapper.text()).toEqual('bamboo');
-  });
-});

components/_util/__tests__/useSyncState.test.tsx

@@ -0,0 +1,17 @@
+import React from 'react';
+import useSyncState from '../hooks/useSyncState';
+import { render, fireEvent } from '../../../tests/utils';
+
+describe('Table', () => {
+  it('useSyncState', () => {
+    const Test: React.FC = () => {
+      const [getVal, setVal] = useSyncState('light');
+      return <span onClick={() => setVal('bamboo')}>{getVal()}</span>;
+    };
+
+    const { container } = render(<Test />);
+    expect(container.querySelector('span')?.innerHTML).toBe('light');
+    fireEvent.click(container.querySelector('span')!);
+    expect(container.querySelector('span')?.innerHTML).toBe('bamboo');
+  });
+});

components/_util/__tests__/util.test.tsx

@@ -1,9 +1,8 @@
 /* eslint-disable class-methods-use-this */
-import { mount } from 'enzyme';
 import KeyCode from 'rc-util/lib/KeyCode';
 import raf from 'rc-util/lib/raf';
 import React from 'react';
-import { sleep } from '../../../tests/utils';
+import { sleep, render, fireEvent } from '../../../tests/utils';
 import getDataOrAriaProps from '../getDataOrAriaProps';
 import delayRaf from '../raf';
 import { isStyleSupport } from '../styleChecker';
@@ -141,20 +140,24 @@ describe('Test utils function', () => {
 
   describe('TransButton', () => {
     it('can be focus/blur', () => {
-      const ref = React.createRef();
+      const ref = React.createRef<any>();
-      mount(<TransButton ref={ref}>TransButton</TransButton>);
+      render(<TransButton ref={ref}>TransButton</TransButton>);
-      expect(typeof ref.current.focus).toBe('function');
+      expect(typeof ref.current?.focus).toBe('function');
-      expect(typeof ref.current.blur).toBe('function');
+      expect(typeof ref.current?.blur).toBe('function');
     });
 
     it('should trigger onClick when press enter', () => {
       const onClick = jest.fn();
-      const preventDefault = jest.fn();
+
-      const wrapper = mount(<TransButton onClick={onClick}>TransButton</TransButton>);
+      const { container } = render(<TransButton onClick={onClick}>TransButton</TransButton>);
-      wrapper.simulate('keyUp', { keyCode: KeyCode.ENTER });
+
-      expect(onClick).toHaveBeenCalled();
+      // callback should trigger
-      wrapper.simulate('keyDown', { keyCode: KeyCode.ENTER, preventDefault });
+      fireEvent.keyUp(container.querySelector('div')!, { keyCode: KeyCode.ENTER });
-      expect(preventDefault).toHaveBeenCalled();
+      expect(onClick).toHaveBeenCalledTimes(1);
+
+      // callback should not trigger
+      fireEvent.keyDown(container.querySelector('div')!, { keyCode: KeyCode.ENTER });
+      expect(onClick).toHaveBeenCalledTimes(1);
     });
   });
 
@@ -167,7 +170,7 @@ describe('Test utils function', () => {
     it('isStyleSupport return false in service side', () => {
       const spy = jest
         .spyOn(window.document, 'documentElement', 'get')
-        .mockImplementation(() => undefined);
+        .mockImplementation(() => undefined as unknown as HTMLElement);
       expect(isStyleSupport('color')).toBe(false);
       expect(isStyleSupport('not-existed')).toBe(false);
       spy.mockRestore();

components/_util/__tests__/warning.test.ts

@@ -23,9 +23,7 @@ describe('Test warning', () => {
 
     expect(value).toBe(undefined);
     expect(spy).not.toHaveBeenCalled();
-    expect(() => {
+    expect(noop).not.toThrow();
-      noop();
-    }).not.toThrow();
   });
 
   describe('process.env.NODE_ENV !== "production"', () => {

components/_util/__tests__/wave.test.tsx

@@ -1,7 +1,6 @@
-import { mount } from 'enzyme';
 import React from 'react';
 import mountTest from '../../../tests/shared/mountTest';
-import { render, sleep } from '../../../tests/utils';
+import { render, sleep, fireEvent } from '../../../tests/utils';
 import ConfigProvider from '../../config-provider';
 import Wave from '../wave';
 
@@ -18,139 +17,155 @@ describe('Wave component', () => {
   it('isHidden works', () => {
     const TEST_NODE_ENV = process.env.NODE_ENV;
     process.env.NODE_ENV = 'development';
-    const wrapper = mount(
+    const { container, unmount } = render(
       <Wave>
         <button type="button">button</button>
       </Wave>,
     );
-    expect(wrapper.find('button').getDOMNode().className).toBe('');
+    expect(container.querySelector('button')?.className).toBe('');
-    wrapper.find('button').getDOMNode().click();
+
+    container.querySelector('button')?.click();
+
     expect(
-      wrapper.find('button').getDOMNode().hasAttribute('ant-click-animating-without-extra-node'),
+      container.querySelector('button')?.hasAttribute('ant-click-animating-without-extra-node'),
-    ).toBe(false);
+    ).toBeFalsy();
-    wrapper.unmount();
+    unmount();
     process.env.NODE_ENV = TEST_NODE_ENV;
   });
 
   it('isHidden is mocked', () => {
-    const wrapper = mount(
+    const { container, unmount } = render(
       <Wave>
         <button type="button">button</button>
       </Wave>,
     );
-    expect(wrapper.find('button').getDOMNode().className).toBe('');
+    expect(container.querySelector('button')?.className).toBe('');
-    wrapper.find('button').getDOMNode().click();
+    container.querySelector('button')?.click();
     expect(
-      wrapper.find('button').getDOMNode().getAttribute('ant-click-animating-without-extra-node'),
+      container.querySelector('button')?.getAttribute('ant-click-animating-without-extra-node'),
     ).toBe('false');
-    wrapper.unmount();
+    unmount();
   });
 
   it('wave color is grey', async () => {
-    const wrapper = mount(
+    const { container, unmount } = render(
       <Wave>
         <button type="button" style={{ borderColor: 'rgb(0, 0, 0)' }}>
           button
         </button>
       </Wave>,
     );
-    wrapper.find('button').getDOMNode().click();
+    container.querySelector('button')?.click();
     await sleep(0);
-    const styles = wrapper.find('button').getDOMNode().getRootNode().getElementsByTagName('style');
+    const styles = (
+      container.querySelector('button')?.getRootNode() as HTMLButtonElement
+    ).getElementsByTagName('style');
     expect(styles.length).toBe(0);
-    wrapper.unmount();
+    unmount();
   });
 
   it('wave color is not grey', async () => {
-    const wrapper = mount(
+    const { container, unmount } = render(
       <Wave>
         <button type="button" style={{ borderColor: 'red' }}>
           button
         </button>
       </Wave>,
     );
-    wrapper.find('button').getDOMNode().click();
+    container.querySelector('button')?.click();
     await sleep(200);
-    const styles = wrapper.find('button').getDOMNode().getRootNode().getElementsByTagName('style');
+    const styles = (
+      container.querySelector('button')?.getRootNode() as HTMLButtonElement
+    ).getElementsByTagName('style');
     expect(styles.length).toBe(1);
     expect(styles[0].innerHTML).toContain('--antd-wave-shadow-color: red;');
-    wrapper.unmount();
+    unmount();
   });
 
   it('read wave color from border-top-color', async () => {
-    const wrapper = mount(
+    const { container, unmount } = render(
       <Wave>
         <div style={{ borderTopColor: 'blue' }}>button</div>
       </Wave>,
     );
-    wrapper.find('div').getDOMNode().click();
+    container.querySelector('div')?.click();
     await sleep(0);
-    const styles = wrapper.find('div').getDOMNode().getRootNode().getElementsByTagName('style');
+    const styles = (
+      container.querySelector('div')?.getRootNode() as HTMLDivElement
+    ).getElementsByTagName('style');
     expect(styles.length).toBe(1);
     expect(styles[0].innerHTML).toContain('--antd-wave-shadow-color: blue;');
-    wrapper.unmount();
+    unmount();
   });
 
   it('read wave color from background color', async () => {
-    const wrapper = mount(
+    const { container, unmount } = render(
       <Wave>
         <div style={{ backgroundColor: 'green' }}>button</div>
       </Wave>,
     );
-    wrapper.find('div').getDOMNode().click();
+    container.querySelector('div')?.click();
     await sleep(0);
-    const styles = wrapper.find('div').getDOMNode().getRootNode().getElementsByTagName('style');
+    const styles = (
+      container.querySelector('div')?.getRootNode() as HTMLDivElement
+    ).getElementsByTagName('style');
     expect(styles.length).toBe(1);
     expect(styles[0].innerHTML).toContain('--antd-wave-shadow-color: green;');
-    wrapper.unmount();
+    unmount();
   });
 
   it('read wave color from border firstly', async () => {
-    const wrapper = mount(
+    const { container, unmount } = render(
       <Wave>
         <div style={{ borderColor: 'yellow', backgroundColor: 'green' }}>button</div>
       </Wave>,
     );
-    wrapper.find('div').getDOMNode().click();
+    container.querySelector('div')?.click();
     await sleep(0);
-    const styles = wrapper.find('div').getDOMNode().getRootNode().getElementsByTagName('style');
+    const styles = (
+      container.querySelector('div')?.getRootNode() as HTMLDivElement
+    ).getElementsByTagName('style');
     expect(styles.length).toBe(1);
     expect(styles[0].innerHTML).toContain('--antd-wave-shadow-color: yellow;');
-    wrapper.unmount();
+    unmount();
   });
 
   it('hidden element with -leave className', async () => {
-    const wrapper = mount(
+    const { container, unmount } = render(
       <Wave>
         <button type="button" className="xx-leave">
           button
         </button>
       </Wave>,
     );
-    wrapper.find('button').getDOMNode().click();
+    container.querySelector('button')?.click();
     await sleep(0);
-    const styles = wrapper.find('button').getDOMNode().getRootNode().getElementsByTagName('style');
+    const styles = (
+      container.querySelector('button')?.getRootNode() as HTMLButtonElement
+    ).getElementsByTagName('style');
     expect(styles.length).toBe(0);
-    wrapper.unmount();
+    unmount();
   });
 
   it('ConfigProvider csp', async () => {
-    const wrapper = mount(
+    const { container, unmount } = render(
       <ConfigProvider csp={{ nonce: 'YourNonceCode' }}>
         <Wave>
           <button type="button">button</button>
         </Wave>
       </ConfigProvider>,
     );
-    wrapper.find('button').getDOMNode().click();
+    container.querySelector('button')?.click();
     await sleep(0);
-    const styles = wrapper.find('button').getDOMNode().getRootNode().getElementsByTagName('style');
+    const styles = (
+      container.querySelector('button')?.getRootNode() as HTMLButtonElement
+    ).getElementsByTagName('style');
     expect(styles[0].getAttribute('nonce')).toBe('YourNonceCode');
-    wrapper.unmount();
+    unmount();
   });
 
   it('bindAnimationEvent should return when node is null', () => {
-    const ref = React.createRef();
+    const ref = React.createRef<any>();
     render(
       <Wave ref={ref}>
         <button type="button" disabled>
@@ -162,7 +177,7 @@ describe('Wave component', () => {
   });
 
   it('bindAnimationEvent.onClick should return when children is hidden', () => {
-    const ref = React.createRef();
+    const ref = React.createRef<any>();
     render(
       <Wave ref={ref}>
         <button type="button" style={{ display: 'none' }}>
@@ -174,7 +189,7 @@ describe('Wave component', () => {
   });
 
   it('bindAnimationEvent.onClick should return when children is input', () => {
-    const ref = React.createRef();
+    const ref = React.createRef<any>();
     render(
       <Wave ref={ref}>
         <input />
@@ -185,16 +200,16 @@ describe('Wave component', () => {
 
   it('should not throw when click it', () => {
     expect(() => {
-      const wrapper = mount(
+      const { container } = render(
         <Wave>
           <div />
         </Wave>,
       );
-      wrapper.simulate('click');
+      fireEvent.click(container);
     }).not.toThrow();
   });
 
   it('should not throw when no children', () => {
-    expect(() => mount(<Wave />)).not.toThrow();
+    expect(() => render(<Wave />)).not.toThrow();
   });
 });

components/_util/warning.ts

@@ -3,7 +3,7 @@ import rcWarning, { resetWarned } from 'rc-util/lib/warning';
 export { resetWarned };
 export function noop() {}
 
-type Warning = (valid: boolean, component: string, message: string) => void;
+type Warning = (valid: boolean, component: string, message?: string) => void;
 
 // eslint-disable-next-line import/no-mutable-exports
 let warning: Warning = noop;

components/cascader/__tests__/__snapshots__/index.test.js.snap

@@ -902,7 +902,6 @@ exports[`Cascader legacy props should support showCheckedStrategy child 1`] = `
             aria-hidden="true"
             class="ant-select-selection-search-mirror"
           >
-             
           </span>
         </div>
       </div>
@@ -1056,7 +1055,6 @@ exports[`Cascader legacy props should support showCheckedStrategy parent 1`] = `
             aria-hidden="true"
             class="ant-select-selection-search-mirror"
           >
-             
           </span>
         </div>
       </div>

components/checkbox/style/mixin.less

@@ -26,7 +26,7 @@
       width: 100%;
       height: 100%;
       border: 1px solid @checkbox-color;
-      border-radius: @border-radius-base;
+      border-radius: @checkbox-border-radius;
       visibility: hidden;
       animation: antCheckboxEffect 0.36s ease-in-out;
       animation-fill-mode: backwards;

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

@@ -1,4 +1,3 @@
-import { render } from 'enzyme';
 import moment from 'moment';
 import React from 'react';
 import ConfigProvider from '..';
@@ -54,72 +53,71 @@ import Transfer from '../../transfer';
 import Tree from '../../tree';
 import TreeSelect from '../../tree-select';
 import Upload from '../../upload';
+import { render } from '../../../tests/utils';
 
 jest.mock('rc-util/lib/Portal');
 
 describe('ConfigProvider', () => {
   describe('components', () => {
     function testPair(name, renderComponent) {
+      const isArray = ['Menu', 'TimePicker', 'Tooltip'].includes(name);
       describe(`${name}`, () => {
         // normal
         it('normal', () => {
-          expect(render(renderComponent({}))).toMatchSnapshot();
+          const { container } = render(renderComponent({}));
+          expect(isArray ? Array.from(container.children) : container.firstChild).toMatchSnapshot();
         });
 
         // prefixCls
         it('prefixCls', () => {
-          expect(render(renderComponent({ prefixCls: `prefix-${name}` }))).toMatchSnapshot();
+          const { container } = render(renderComponent({ prefixCls: `prefix-${name}` }));
+          expect(isArray ? Array.from(container.children) : container.firstChild).toMatchSnapshot();
         });
 
         // configProvider
         it('configProvider', () => {
-          expect(
+          const { container } = render(
-            render(
+            <ConfigProvider pageHeader={{ ghost: false }} prefixCls="config">
-              <ConfigProvider pageHeader={{ ghost: false }} prefixCls="config">
+              {renderComponent({})}
-                {renderComponent({})}
+            </ConfigProvider>,
-              </ConfigProvider>,
+          );
-            ),
+          expect(isArray ? Array.from(container.children) : container.firstChild).toMatchSnapshot();
-          ).toMatchSnapshot();
         });
 
         it('configProvider componentSize large', () => {
-          expect(
+          const { container } = render(
-            render(
+            <ConfigProvider componentSize="large" prefixCls="config">
-              <ConfigProvider componentSize="large" prefixCls="config">
+              {renderComponent({})}
-                {renderComponent({})}
+            </ConfigProvider>,
-              </ConfigProvider>,
+          );
-            ),
+          expect(isArray ? Array.from(container.children) : container.firstChild).toMatchSnapshot();
-          ).toMatchSnapshot();
         });
 
         it('configProvider componentSize middle', () => {
-          expect(
+          const { container } = render(
-            render(
+            <ConfigProvider componentSize="middle" prefixCls="config">
-              <ConfigProvider componentSize="middle" prefixCls="config">
+              {renderComponent({})}
-                {renderComponent({})}
+            </ConfigProvider>,
-              </ConfigProvider>,
+          );
-            ),
+          expect(isArray ? Array.from(container.children) : container.firstChild).toMatchSnapshot();
-          ).toMatchSnapshot();
         });
 
         it('configProvider componentDisabled', () => {
-          expect(
+          const { container } = render(
-            render(
+            <ConfigProvider componentDisabled prefixCls="config">
-              <ConfigProvider componentDisabled prefixCls="config">
+              {renderComponent({})}
-                {renderComponent({})}
+            </ConfigProvider>,
-              </ConfigProvider>,
+          );
-            ),
+          expect(isArray ? Array.from(container.children) : container.firstChild).toMatchSnapshot();
-          ).toMatchSnapshot();
         });
 
         it('configProvider virtual and dropdownMatchSelectWidth', () => {
-          expect(
+          const { container } = render(
-            render(
+            <ConfigProvider virtual={false} dropdownMatchSelectWidth={false}>
-              <ConfigProvider virtual={false} dropdownMatchSelectWidth={false}>
+              {renderComponent({})}
-                {renderComponent({})}
+            </ConfigProvider>,
-              </ConfigProvider>,
+          );
-            ),
+          expect(isArray ? Array.from(container.children) : container.firstChild).toMatchSnapshot();
-          ).toMatchSnapshot();
         });
       });
     }
@@ -147,9 +145,7 @@ describe('ConfigProvider', () => {
 
     // Badge
     testPair('Badge', props => {
-      const newProps = {
+      const newProps = { ...props };
-        ...props,
-      };
 
       // Hook for additional `scrollNumberPrefixCls` prop
       if (props.prefixCls) {
@@ -161,7 +157,6 @@ describe('ConfigProvider', () => {
           <Badge {...newProps} count={5}>
             <span />
           </Badge>
-
           <Badge {...newProps} dot>
             <span />
           </Badge>
@@ -230,7 +225,7 @@ describe('ConfigProvider', () => {
     // Collapse
     testPair('Collapse', props => (
       <Collapse {...props}>
-        <Collapse.Panel header="Bamboo">
+        <Collapse.Panel key="Collapse" header="Bamboo">
           <p>Light</p>
         </Collapse.Panel>
       </Collapse>
@@ -509,19 +504,11 @@ describe('ConfigProvider', () => {
           title: 'Name',
           dataIndex: 'name',
           filters: [
-            {
+            { text: 'Joe', value: 'Joe' },
-              text: 'Joe',
-              value: 'Joe',
-            },
             {
               text: 'Submenu',
               value: 'Submenu',
-              children: [
+              children: [{ text: 'Green', value: 'Green' }],
-                {
-                  text: 'Green',
-                  value: 'Green',
-                },
-              ],
             },
           ],
           filterDropdownOpen: true,
@@ -581,7 +568,6 @@ describe('ConfigProvider', () => {
         <Tree {...props}>
           <Tree.TreeNode title="bamboo" />
         </Tree>
-
         <Tree.DirectoryTree {...props}>
           <Tree.TreeNode title="bamboo" />
         </Tree.DirectoryTree>
@@ -597,16 +583,7 @@ describe('ConfigProvider', () => {
 
     // Upload
     testPair('Upload', props => (
-      <Upload
+      <Upload {...props} defaultFileList={[{ uid: '1', name: 'xxx.png', status: 'done' }]}>
-        {...props}
-        defaultFileList={[
-          {
-            uid: '1',
-            name: 'xxx.png',
-            status: 'done',
-          },
-        ]}
-      >
         <span />
       </Upload>
     ));

components/config-provider/__tests__/container.test.tsx

@@ -1,15 +1,15 @@
-import { mount } from 'enzyme';
 import React from 'react';
 import ConfigProvider from '..';
 import Cascader from '../../cascader';
 import DatePicker from '../../date-picker';
 import Drawer from '../../drawer';
 import Slider from '../../slider';
+import { render, fireEvent } from '../../../tests/utils';
 
 describe('ConfigProvider.GetPopupContainer', () => {
   it('Datepicker', () => {
     const getPopupContainer = jest.fn(node => node.parentNode);
-    mount(
+    render(
       <ConfigProvider getPopupContainer={getPopupContainer}>
         <DatePicker open />
       </ConfigProvider>,
@@ -19,29 +19,29 @@ describe('ConfigProvider.GetPopupContainer', () => {
 
   it('Slider', () => {
     const getPopupContainer = jest.fn(node => node.parentNode);
-    const wrapper = mount(
+    const wrapper = render(
       <ConfigProvider getPopupContainer={getPopupContainer}>
         <Slider />
       </ConfigProvider>,
     );
-    wrapper.find('.ant-slider-handle').first().simulate('mouseenter');
+    fireEvent.mouseEnter(wrapper.container.querySelector('.ant-slider-handle')!);
     expect(getPopupContainer).toHaveBeenCalled();
   });
 
   it('Drawer', () => {
     const getPopupContainer = jest.fn(node => node.parentNode);
-    const Demo = ({ visible }) => (
+    const Demo: React.FC<{ visible?: boolean }> = ({ visible }) => (
       <ConfigProvider getPopupContainer={getPopupContainer}>
         <Drawer visible={visible} />
       </ConfigProvider>
     );
-    mount(<Demo visible />);
+    render(<Demo visible />);
     expect(getPopupContainer).toHaveBeenCalled();
   });
 
   it('Cascader', () => {
     const getPopupContainer = jest.fn(node => node.parentNode);
-    mount(<Cascader getPopupContainer={getPopupContainer} open />);
+    render(<Cascader getPopupContainer={getPopupContainer} open />);
     expect(getPopupContainer).toHaveBeenCalled();
   });
 });

components/config-provider/__tests__/form.test.tsx

@@ -1,4 +1,3 @@
-import { mount } from 'enzyme';
 import React from 'react';
 import { act } from 'react-dom/test-utils';
 import ConfigProvider from '..';
@@ -16,9 +15,8 @@ describe('ConfigProvider.Form', () => {
   });
 
   describe('form validateMessages', () => {
-    const renderComponent = ({ validateMessages }) => {
+    const renderComponent = ({ validateMessages }: { validateMessages?: any }) => {
-      const formRef = React.createRef();
+      const formRef = React.createRef<any>();
-
       const { container } = render(
         <ConfigProvider locale={zhCN} form={{ validateMessages }}>
           <Form ref={formRef} initialValues={{ age: 18 }}>
@@ -31,8 +29,7 @@ describe('ConfigProvider.Form', () => {
           </Form>
         </ConfigProvider>,
       );
-
+      return [container, formRef] as const;
-      return [container, formRef];
     };
 
     it('set locale zhCN', async () => {
@@ -40,7 +37,7 @@ describe('ConfigProvider.Form', () => {
 
       await act(async () => {
         try {
-          await formRef.current.validateFields();
+          await formRef.current?.validateFields();
         } catch (e) {
           // Do nothing
         }
@@ -63,7 +60,7 @@ describe('ConfigProvider.Form', () => {
 
       await act(async () => {
         try {
-          await formRef.current.validateFields();
+          await formRef.current?.validateFields();
         } catch (e) {
           // Do nothing
         }
@@ -86,8 +83,8 @@ describe('ConfigProvider.Form', () => {
   });
 
   describe('form requiredMark', () => {
-    it('set requiredMark optional', async () => {
+    it('set requiredMark optional', () => {
-      const wrapper = mount(
+      const { container } = render(
         <ConfigProvider form={{ requiredMark: 'optional' }}>
           <Form initialValues={{ age: 18 }}>
             <Form.Item name="age" label="年龄" rules={[{ type: 'number', len: 17 }]}>
@@ -96,14 +93,13 @@ describe('ConfigProvider.Form', () => {
           </Form>
         </ConfigProvider>,
       );
-
+      expect(container.firstChild).toMatchSnapshot();
-      expect(wrapper.render()).toMatchSnapshot();
     });
   });
 
   describe('form colon', () => {
-    it('set colon false', async () => {
+    it('set colon false', () => {
-      const wrapper = mount(
+      const { container } = render(
         <ConfigProvider form={{ colon: false }}>
           <Form>
             <Form.Item label="没有冒号">
@@ -112,12 +108,11 @@ describe('ConfigProvider.Form', () => {
           </Form>
         </ConfigProvider>,
       );
-
+      expect(container.querySelector('.ant-form-item-no-colon')).toBeTruthy();
-      expect(wrapper.exists('.ant-form-item-no-colon')).toBeTruthy();
     });
 
-    it('set colon default', async () => {
+    it('set colon default', () => {
-      const wrapper = mount(
+      const { container } = render(
         <ConfigProvider>
           <Form>
             <Form.Item label="姓名">
@@ -126,8 +121,7 @@ describe('ConfigProvider.Form', () => {
           </Form>
         </ConfigProvider>,
       );
-
+      expect(container.querySelector('.ant-form-item-no-colon')).toBeFalsy();
-      expect(wrapper.exists('.ant-form-item-no-colon')).toBeFalsy();
     });
   });
 });

components/config-provider/__tests__/icon.test.tsx

@@ -1,7 +1,7 @@
 import { SmileOutlined } from '@ant-design/icons';
 import IconContext from '@ant-design/icons/lib/components/Context';
-import { mount } from 'enzyme';
 import React from 'react';
+import { render } from '../../../tests/utils';
 import ConfigProvider from '..';
 
 describe('ConfigProvider.Icon', () => {
@@ -12,24 +12,23 @@ describe('ConfigProvider.Icon', () => {
 
   afterEach(() => {
     document.querySelectorAll('style').forEach(style => {
-      style.parentNode.removeChild(style);
+      style.parentNode?.removeChild(style);
     });
   });
 
   describe('csp', () => {
     it('raw', () => {
-      mount(
+      render(
         <ConfigProvider csp={{ nonce: 'little' }}>
           <SmileOutlined />
         </ConfigProvider>,
       );
-
       const styleNode = document.querySelector('style');
-      expect(styleNode.nonce).toEqual('little');
+      expect(styleNode?.nonce).toEqual('little');
     });
 
     it('mix with iconPrefixCls', () => {
-      const wrapper = mount(
+      const { container } = render(
         <ConfigProvider iconPrefixCls="bamboo" csp={{ nonce: 'light' }}>
           <SmileOutlined />
         </ConfigProvider>,
@@ -37,18 +36,18 @@ describe('ConfigProvider.Icon', () => {
 
       const styleNode = document.querySelector('style');
 
-      expect(wrapper.exists('.bamboo-smile')).toBeTruthy();
+      expect(container.querySelector('.bamboo-smile')).toBeTruthy();
-      expect(styleNode.nonce).toEqual('light');
+      expect(styleNode?.nonce).toEqual('light');
     });
   });
 
   it('nest', () => {
     const Checker = () => {
       const { csp } = React.useContext(IconContext);
-      return <div id="csp">{csp.nonce}</div>;
+      return <div id="csp">{csp?.nonce}</div>;
     };
 
-    const wrapper = mount(
+    const { container } = render(
       <ConfigProvider iconPrefixCls="bamboo" csp={{ nonce: 'light' }}>
         <ConfigProvider>
           <SmileOutlined />
@@ -59,8 +58,8 @@ describe('ConfigProvider.Icon', () => {
 
     const styleNode = document.querySelector('style');
 
-    expect(wrapper.exists('.bamboo-smile')).toBeTruthy();
+    expect(container.querySelector('.bamboo-smile')).toBeTruthy();
-    expect(styleNode.nonce).toEqual('light');
+    expect(styleNode?.nonce).toEqual('light');
-    expect(wrapper.find('#csp').text()).toEqual('light');
+    expect(container.querySelector('#csp')?.innerHTML).toEqual('light');
   });
 });

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

@@ -1,9 +1,9 @@
 import { SmileOutlined } from '@ant-design/icons';
-import { mount } from 'enzyme';
 import React, { useState } from 'react';
+import type { ConfigConsumerProps } from '..';
 import ConfigProvider, { ConfigContext } from '..';
 import mountTest from '../../../tests/shared/mountTest';
-import { fireEvent, render } from '../../../tests/utils';
+import { act, fireEvent, render } from '../../../tests/utils';
 import Button from '../../button';
 import Input from '../../input';
 import Table from '../../table';
@@ -16,38 +16,49 @@ describe('ConfigProvider', () => {
   ));
 
   it('Content Security Policy', () => {
+    jest.useFakeTimers();
+
     const csp = { nonce: 'test-antd' };
-    const wrapper = mount(
+    const { container } = render(
       <ConfigProvider csp={csp}>
         <Button />
       </ConfigProvider>,
     );
 
-    expect(wrapper.find('InternalWave').instance().csp).toBe(csp);
+    fireEvent.click(container.querySelector('button')!);
+    act(() => {
+      jest.runAllTimers();
+    });
+    const styles = Array.from(document.body.querySelectorAll<HTMLStyleElement>('style'));
+    expect(styles[styles.length - 1].nonce).toEqual(csp.nonce);
+
+    jest.useRealTimers();
   });
 
   it('autoInsertSpaceInButton', () => {
-    const wrapper = mount(
+    const text = '确定';
+    const { container } = render(
       <ConfigProvider autoInsertSpaceInButton={false}>
-        <Button>确定</Button>
+        <Button>{text}</Button>
       </ConfigProvider>,
     );
-
+    expect(container.querySelector('span')?.innerHTML).toBe(text);
-    expect(wrapper.find('Button').text()).toBe('确定');
   });
 
   it('renderEmpty', () => {
-    const wrapper = mount(
+    const text = 'empty placeholder';
-      <ConfigProvider renderEmpty={() => <div>empty placeholder</div>}>
+    const { container } = render(
+      <ConfigProvider renderEmpty={() => <div>{text}</div>}>
         <Table />
       </ConfigProvider>,
     );
-
+    expect(container.querySelector('.ant-table-placeholder')?.querySelector('div')?.innerHTML).toBe(
-    expect(wrapper.text()).toContain('empty placeholder');
+      text,
+    );
   });
 
   it('nest prefixCls', () => {
-    const wrapper = mount(
+    const { container } = render(
       <ConfigProvider prefixCls="bamboo">
         <ConfigProvider>
           <Button />
@@ -55,11 +66,11 @@ describe('ConfigProvider', () => {
       </ConfigProvider>,
     );
 
-    expect(wrapper.exists('button.bamboo-btn')).toBeTruthy();
+    expect(container.querySelector('button.bamboo-btn')).toBeTruthy();
   });
 
   it('dynamic prefixCls', () => {
-    const DynamicPrefixCls = () => {
+    const DynamicPrefixCls: React.FC = () => {
       const [prefixCls, setPrefixCls] = useState('bamboo');
       return (
         <div>
@@ -78,37 +89,36 @@ describe('ConfigProvider', () => {
     const { container } = render(<DynamicPrefixCls />);
 
     expect(container.querySelector('button.bamboo-btn')).toBeTruthy();
-    fireEvent.click(container.querySelector('.toggle-button'));
+    fireEvent.click(container.querySelector('.toggle-button')!);
     expect(container.querySelector('button.light-btn')).toBeTruthy();
   });
 
   it('iconPrefixCls', () => {
-    const wrapper = mount(
+    const { container } = render(
       <ConfigProvider iconPrefixCls="bamboo">
         <SmileOutlined />
       </ConfigProvider>,
     );
 
-    expect(wrapper.find('[role="img"]').hasClass('bamboo')).toBeTruthy();
+    expect(container.querySelector('[role="img"]')).toHaveClass('bamboo');
-    expect(wrapper.find('[role="img"]').hasClass('bamboo-smile')).toBeTruthy();
+    expect(container.querySelector('[role="img"]')).toHaveClass('bamboo-smile');
   });
 
   it('input autoComplete', () => {
-    const wrapper = mount(
+    const { container } = render(
       <ConfigProvider input={{ autoComplete: 'off' }}>
         <Input />
       </ConfigProvider>,
     );
-
+    expect(container.querySelector('input')?.autocomplete).toEqual('off');
-    expect(wrapper.find('input').props().autoComplete).toEqual('off');
   });
 
   it('render empty', () => {
     let rendered = false;
     let cacheRenderEmpty;
 
-    const App = () => {
+    const App: React.FC = () => {
-      const { renderEmpty } = React.useContext(ConfigContext);
+      const { renderEmpty } = React.useContext<ConfigConsumerProps>(ConfigContext);
       rendered = true;
       cacheRenderEmpty = renderEmpty;
       return null;

components/config-provider/__tests__/locale.test.tsx

@@ -1,24 +1,24 @@
-import { mount } from 'enzyme';
 import React from 'react';
+import { closePicker, openPicker, selectCell } from '../../date-picker/__tests__/utils';
 import ConfigProvider from '..';
 import DatePicker from '../../date-picker';
-import { closePicker, openPicker, selectCell } from '../../date-picker/__tests__/utils';
+import type { Locale } from '../../locale-provider';
 import LocaleProvider from '../../locale-provider';
 import enUS from '../../locale/en_US';
 import zhCN from '../../locale/zh_CN';
 import Modal from '../../modal';
 import Pagination from '../../pagination';
 import TimePicker from '../../time-picker';
-import { act } from '../../../tests/utils';
+import { act, render, fireEvent } from '../../../tests/utils';
 
 describe('ConfigProvider.Locale', () => {
-  function $$(className) {
+  function $$(className: string): NodeListOf<Element> {
     return document.body.querySelectorAll(className);
   }
 
   it('not throw', () => {
-    mount(
+    render(
-      <ConfigProvider locale={{}}>
+      <ConfigProvider locale={{} as Locale}>
         <span />
         <span />
       </ConfigProvider>,
@@ -28,23 +28,16 @@ describe('ConfigProvider.Locale', () => {
   // https://github.com/ant-design/ant-design/issues/18731
   it('should not reset locale for Modal', () => {
     class App extends React.Component {
-      state = {
+      state = { showButton: false };
-        showButton: false,
-      };
 
       componentDidMount() {
-        this.setState({
+        this.setState({ showButton: true });
-          showButton: true,
-        });
       }
 
       // eslint-disable-next-line class-methods-use-this
       openConfirm = () => {
         jest.useFakeTimers();
-        Modal.confirm({
+        Modal.confirm({ title: 'title', content: 'Some descriptions' });
-          title: 'title',
-          content: 'Some descriptions',
-        });
         act(() => {
           jest.runAllTimers();
         });
@@ -66,24 +59,24 @@ describe('ConfigProvider.Locale', () => {
       }
     }
 
-    const wrapper = mount(<App />);
+    const wrapper = render(<App />);
-    wrapper.find('button').simulate('click');
+    fireEvent.click(wrapper.container.querySelector('button')!);
     expect($$('.ant-btn-primary')[0].textContent).toBe('OK');
   });
 
   // https://github.com/ant-design/ant-design/issues/31592
   it('should not reset the component state when switching locale', () => {
-    const wrapper = mount(
+    const wrapper = render(
       <ConfigProvider locale={zhCN}>
         <DatePicker />
         <Pagination total={50} />
       </ConfigProvider>,
     );
 
-    const datepickerInitProps = wrapper.find('.ant-picker-input input').props();
+    const datepicke = wrapper.container.querySelector<HTMLInputElement>('.ant-picker-input input');
-    expect(datepickerInitProps.value).toBe('');
+    expect(datepicke?.value).toBe('');
-    expect(datepickerInitProps.placeholder).toBe('请选择日期');
+    expect(datepicke?.placeholder).toBe('请选择日期');
-    expect(wrapper.find('.ant-pagination-item-1').props().className).toContain(
+    expect(wrapper.container.querySelector('.ant-pagination-item-1')?.className).toContain(
       'ant-pagination-item-active',
     );
 
@@ -91,58 +84,68 @@ describe('ConfigProvider.Locale', () => {
     selectCell(wrapper, 10);
     closePicker(wrapper);
 
-    expect(wrapper.find('.ant-picker-input input').props().value).not.toBe('');
+    expect(
+      wrapper.container.querySelector<HTMLInputElement>('.ant-picker-input input')?.value,
+    ).not.toBe('');
+    wrapper.rerender(
+      <ConfigProvider locale={{} as Locale}>
+        <DatePicker />
+        <Pagination total={50} />
+      </ConfigProvider>,
+    );
 
-    wrapper.setProps({ locale: {} });
+    fireEvent.click(wrapper.container.querySelector('.ant-pagination-item-3')!);
-    wrapper.find('.ant-pagination-item-3').simulate('click');
 
-    const datepickerProps = wrapper.find('.ant-picker-input input').props();
+    const datepicker = wrapper.container.querySelector<HTMLInputElement>('.ant-picker-input input');
-    expect(datepickerProps.placeholder).not.toBe('请选择日期');
-    expect(datepickerProps.value).not.toBe('');
-    expect(datepickerProps.value).toContain('-10');
 
-    expect(wrapper.find('.ant-pagination-item-3').props().className).toContain(
+    expect(datepicker?.placeholder).not.toBe('请选择日期');
+    expect(datepicker?.value).not.toBe('');
+    expect(datepicker?.value).toContain('-10');
+
+    expect(wrapper.container.querySelector('.ant-pagination-item-3')?.className).toContain(
       'ant-pagination-item-active',
     );
   });
 
   describe('support legacy LocaleProvider', () => {
-    function testLocale(wrapper) {
+    function testLocale(wrapper: ReturnType<typeof render>): void {
-      expect(wrapper.find('input').props().placeholder).toBe(zhCN.TimePicker.placeholder);
+      expect(wrapper.container.querySelector('input')?.placeholder).toBe(
+        zhCN.TimePicker?.placeholder,
+      );
     }
 
     it('LocaleProvider', () => {
-      const wrapper = mount(
+      testLocale(
-        <LocaleProvider locale={zhCN}>
+        render(
-          <TimePicker />
+          <LocaleProvider locale={zhCN}>
-        </LocaleProvider>,
+            <TimePicker />
+          </LocaleProvider>,
+        ),
       );
-
-      testLocale(wrapper);
     });
 
     it('LocaleProvider > ConfigProvider', () => {
-      const wrapper = mount(
+      testLocale(
-        <LocaleProvider locale={zhCN}>
+        render(
-          <ConfigProvider>
+          <LocaleProvider locale={zhCN}>
-            <TimePicker />
+            <ConfigProvider>
-          </ConfigProvider>
+              <TimePicker />
-        </LocaleProvider>,
+            </ConfigProvider>
+          </LocaleProvider>,
+        ),
       );
-
-      testLocale(wrapper);
     });
 
     it('ConfigProvider > ConfigProvider', () => {
-      const wrapper = mount(
+      testLocale(
-        <ConfigProvider locale={zhCN}>
+        render(
-          <ConfigProvider>
+          <ConfigProvider locale={zhCN}>
-            <TimePicker />
+            <ConfigProvider>
-          </ConfigProvider>
+              <TimePicker />
-        </ConfigProvider>,
+            </ConfigProvider>
+          </ConfigProvider>,
+        ),
       );
-
-      testLocale(wrapper);
     });
   });
 });

components/config-provider/__tests__/memo.test.tsx

@@ -1,16 +1,20 @@
-import { mount } from 'enzyme';
 import React, { useState } from 'react';
 import ConfigProvider from '..';
 import Tooltip from '../../tooltip';
+import { pureRender, fireEvent } from '../../../tests/utils';
+
+interface Props {
+  spy: () => void;
+}
 
 // https://github.com/ant-design/ant-design/issues/27617
 describe('ConfigProvider', () => {
-  const Child = ({ spy }) => {
+  const Child: React.FC<Props> = ({ spy }) => {
     React.useEffect(() => spy());
     return <div />;
   };
 
-  const Sibling = ({ spy }) => (
+  const Sibling: React.FC<Props> = ({ spy }) => (
     <Tooltip>
       <Child spy={spy} />
     </Tooltip>
@@ -19,7 +23,7 @@ describe('ConfigProvider', () => {
   it('should not generate new context config when render', () => {
     const MemoedSibling = React.memo(Sibling);
     const spy = jest.fn();
-    const App = () => {
+    const App: React.FC = () => {
       const [pageHeader, setPageHeader] = useState({ ghost: true });
       const [, forceRender] = React.useReducer(v => v + 1, 1);
 
@@ -40,18 +44,19 @@ describe('ConfigProvider', () => {
       );
     };
 
-    const wrapper = mount(<App />);
+    const { container } = pureRender(<App />);
-    wrapper.find('.render').simulate('click');
+
+    fireEvent.click(container.querySelector('.render')!);
     expect(spy.mock.calls.length).toEqual(1);
 
-    wrapper.find('.setState').simulate('click');
+    fireEvent.click(container.querySelector('.setState')!);
     expect(spy.mock.calls.length).toEqual(2);
   });
 
   it('should not generate new context config in nested ConfigProvider when render', () => {
     const MemoedSibling = React.memo(Sibling);
     const spy = jest.fn();
-    const App = () => {
+    const App: React.FC = () => {
       const [pageHeader, setPageHeader] = useState({ ghost: true });
       const [, forceRender] = React.useReducer(v => v + 1, 1);
 
@@ -74,11 +79,12 @@ describe('ConfigProvider', () => {
       );
     };
 
-    const wrapper = mount(<App />);
+    const { container } = pureRender(<App />);
-    wrapper.find('.render').simulate('click');
+
+    fireEvent.click(container.querySelector('.render')!);
     expect(spy.mock.calls.length).toEqual(1);
 
-    wrapper.find('.setState').simulate('click');
+    fireEvent.click(container.querySelector('.setState')!);
     expect(spy.mock.calls.length).toEqual(2);
   });
 });

components/config-provider/__tests__/target.test.tsx

@@ -1,15 +1,14 @@
-import { mount } from 'enzyme';
 import React from 'react';
 import ConfigProvider from '..';
 import Affix from '../../affix';
 import Anchor from '../../anchor';
-import { act } from '../../../tests/utils';
+import { act, render } from '../../../tests/utils';
 
 describe('ConfigProvider.getTargetContainer', () => {
   it('Affix', () => {
     jest.useFakeTimers();
-    const getTargetContainer = jest.fn(() => window);
+    const getTargetContainer = jest.fn(() => window as unknown as HTMLElement);
-    mount(
+    render(
       <ConfigProvider getTargetContainer={getTargetContainer}>
         <Affix>
           <span />
@@ -27,8 +26,8 @@ describe('ConfigProvider.getTargetContainer', () => {
 
   it('Anchor', () => {
     jest.useFakeTimers();
-    const getTargetContainer = jest.fn(() => window);
+    const getTargetContainer = jest.fn(() => window as unknown as HTMLElement);
-    mount(
+    render(
       <ConfigProvider getTargetContainer={getTargetContainer}>
         <Anchor>
           <Anchor.Link href="#API" title="API" />

components/config-provider/__tests__/theme.test.ts

@@ -18,18 +18,16 @@ describe('ConfigProvider.Theme', () => {
     it(colorName, () => {
       ConfigProvider.config({
         prefixCls: 'bamboo',
-        theme: {
+        theme: { [colorName]: '#0000FF' },
-          [colorName]: '#0000FF',
-        },
       });
 
-      const styles: any[] = Array.from(document.querySelectorAll('style'));
+      const styles: HTMLStyleElement[] = Array.from(document.querySelectorAll('style'));
       const themeStyle = styles.find(style =>
-        style.getAttribute('rc-util-key').includes('-dynamic-theme'),
+        style.getAttribute('rc-util-key')?.includes('-dynamic-theme'),
       );
       expect(themeStyle).toBeTruthy();
 
-      expect(themeStyle.innerHTML).toContain(`--bamboo-${kebabCase(colorName)}: rgb(0, 0, 255)`);
+      expect(themeStyle?.innerHTML).toContain(`--bamboo-${kebabCase(colorName)}: rgb(0, 0, 255)`);
     });
   });
 
@@ -40,9 +38,7 @@ describe('ConfigProvider.Theme', () => {
     mockCanUseDom = false;
     expect(canUseDom()).toBeFalsy();
 
-    ConfigProvider.config({
+    ConfigProvider.config({ theme: {} });
-      theme: {},
-    });
 
     expect(errorSpy).toHaveBeenCalledWith(
       'Warning: [antd: ConfigProvider] SSR do not support dynamic theme with css variables.',

components/date-picker/__tests__/DatePicker.test.js

@@ -1,248 +0,0 @@
-import { mount } from 'enzyme';
-import MockDate from 'mockdate';
-import moment from 'moment';
-import React from 'react';
-import DatePicker from '..';
-import focusTest from '../../../tests/shared/focusTest';
-
-describe('DatePicker', () => {
-  const errorSpy = jest.spyOn(console, 'error').mockImplementation(() => {});
-
-  focusTest(DatePicker, { refFocus: true });
-
-  beforeEach(() => {
-    MockDate.set(moment('2016-11-22').valueOf());
-  });
-
-  afterEach(() => {
-    MockDate.reset();
-    errorSpy.mockReset();
-  });
-
-  afterAll(() => {
-    errorSpy.mockRestore();
-  });
-
-  it('prop locale should works', () => {
-    const locale = {
-      lang: {
-        locale: 'mk',
-        placeholder: 'Избери дата',
-        rangePlaceholder: ['Начална дата', 'Крайна дата'],
-        today: 'Днес',
-        now: 'Сега',
-        backToToday: 'Към днес',
-        ok: 'Добре',
-        clear: 'Изчистване',
-        month: 'Месец',
-        year: 'Година',
-        timeSelect: 'Избор на час',
-        dateSelect: 'Избор на дата',
-        monthSelect: 'Избор на месец',
-        yearSelect: 'Избор на година',
-        decadeSelect: 'Десетилетие',
-        previousMonth: 'Предишен месец (PageUp)',
-        nextMonth: 'Следващ месец (PageDown)',
-        previousYear: 'Последна година (Control + left)',
-        nextYear: 'Следваща година (Control + right)',
-        previousDecade: 'Предишно десетилетие',
-        nextDecade: 'Следващо десетилетие',
-        previousCentury: 'Последен век',
-        nextCentury: 'Следващ век',
-        yearFormat: 'YYYY',
-        dateFormat: 'D M YYYY',
-        dayFormat: 'D',
-        dateTimeFormat: 'D M YYYY HH:mm:ss',
-        monthBeforeYear: true,
-      },
-      timePickerLocale: {
-        placeholder: 'Избор на час',
-      },
-    };
-    const birthday = moment('2000-01-01', 'YYYY-MM-DD');
-    const wrapper = mount(<DatePicker open locale={locale} value={birthday} />);
-    expect(wrapper.render()).toMatchSnapshot();
-  });
-
-  it('disabled date', () => {
-    const disabledDate = current => current && current < moment().endOf('day');
-    const wrapper = mount(<DatePicker disabledDate={disabledDate} open />);
-    expect(wrapper.render()).toMatchSnapshot();
-  });
-
-  it('placeholder', () => {
-    const wrapper = mount(<DatePicker placeholder={undefined} />);
-    expect(wrapper.find('input').props().placeholder).toEqual('Select date');
-  });
-
-  it('showTime={{ showHour: true, showMinute: true }}', () => {
-    const wrapper = mount(
-      <DatePicker
-        defaultValue={moment()}
-        showTime={{ showHour: true, showMinute: true }}
-        format="YYYY-MM-DD"
-        open
-      />,
-    );
-    expect(wrapper.find('.ant-picker-time-panel-column').length).toBe(2);
-    expect(
-      wrapper.find('.ant-picker-time-panel-column').at(0).find('.ant-picker-time-panel-cell')
-        .length,
-    ).toBe(24);
-    expect(
-      wrapper.find('.ant-picker-time-panel-column').at(1).find('.ant-picker-time-panel-cell')
-        .length,
-    ).toBe(60);
-  });
-
-  it('showTime={{ showHour: true, showSecond: true }}', () => {
-    const wrapper = mount(
-      <DatePicker
-        defaultValue={moment()}
-        showTime={{ showHour: true, showSecond: true }}
-        format="YYYY-MM-DD"
-        open
-      />,
-    );
-    expect(wrapper.find('.ant-picker-time-panel-column').length).toBe(2);
-    expect(
-      wrapper.find('.ant-picker-time-panel-column').at(0).find('.ant-picker-time-panel-cell')
-        .length,
-    ).toBe(24);
-    expect(
-      wrapper.find('.ant-picker-time-panel-column').at(1).find('.ant-picker-time-panel-cell')
-        .length,
-    ).toBe(60);
-  });
-
-  it('showTime={{ showMinute: true, showSecond: true }}', () => {
-    const wrapper = mount(
-      <DatePicker
-        defaultValue={moment()}
-        showTime={{ showMinute: true, showSecond: true }}
-        format="YYYY-MM-DD"
-        open
-      />,
-    );
-    expect(wrapper.find('.ant-picker-time-panel-column').length).toBe(2);
-    expect(
-      wrapper.find('.ant-picker-time-panel-column').at(0).find('.ant-picker-time-panel-cell')
-        .length,
-    ).toBe(60);
-    expect(
-      wrapper.find('.ant-picker-time-panel-column').at(1).find('.ant-picker-time-panel-cell')
-        .length,
-    ).toBe(60);
-  });
-  it('showTime should work correctly when format is custom function', () => {
-    const wrapper = mount(
-      <DatePicker defaultValue={moment()} showTime format={val => val.format('YYYY-MM-DD')} open />,
-    );
-    const input = wrapper.find('input').simulate('mousedown');
-    expect(input.simulate.bind(input, 'focus')).not.toThrowError();
-  });
-
-  it('12 hours', () => {
-    const wrapper = mount(
-      <DatePicker defaultValue={moment()} showTime format="YYYY-MM-DD HH:mm:ss A" open />,
-    );
-    expect(wrapper.find('.ant-picker-time-panel-column').length).toBe(4);
-    expect(
-      wrapper.find('.ant-picker-time-panel-column').at(0).find('.ant-picker-time-panel-cell')
-        .length,
-    ).toBe(12);
-    expect(
-      wrapper.find('.ant-picker-time-panel-column').at(1).find('.ant-picker-time-panel-cell')
-        .length,
-    ).toBe(60);
-    expect(
-      wrapper.find('.ant-picker-time-panel-column').at(2).find('.ant-picker-time-panel-cell')
-        .length,
-    ).toBe(60);
-    expect(
-      wrapper.find('.ant-picker-time-panel-column').at(3).find('.ant-picker-time-panel-cell')
-        .length,
-    ).toBe(2);
-  });
-
-  it('24 hours', () => {
-    const wrapper = mount(
-      <DatePicker defaultValue={moment()} showTime format="YYYY-MM-DD HH:mm:ss" open />,
-    );
-    expect(wrapper.find('.ant-picker-time-panel-column').length).toBe(3);
-    expect(
-      wrapper.find('.ant-picker-time-panel-column').at(0).find('.ant-picker-time-panel-cell')
-        .length,
-    ).toBe(24);
-    expect(
-      wrapper.find('.ant-picker-time-panel-column').at(1).find('.ant-picker-time-panel-cell')
-        .length,
-    ).toBe(60);
-    expect(
-      wrapper.find('.ant-picker-time-panel-column').at(2).find('.ant-picker-time-panel-cell')
-        .length,
-    ).toBe(60);
-  });
-
-  it('DatePicker should show warning when use dropdownClassName', () => {
-    mount(<DatePicker dropdownClassName="myCustomClassName" />);
-    expect(errorSpy).toHaveBeenCalledWith(
-      'Warning: [antd: DatePicker] `dropdownClassName` is deprecated which will be removed in next major version. Please use `popupClassName` instead.',
-    );
-  });
-
-  it('RangePicker should show warning when use dropdownClassName', () => {
-    mount(<DatePicker.RangePicker dropdownClassName="myCustomClassName" />);
-    expect(errorSpy).toHaveBeenCalledWith(
-      'Warning: [antd: RangePicker] `dropdownClassName` is deprecated which will be removed in next major version. Please use `popupClassName` instead.',
-    );
-  });
-
-  it('DatePicker.RangePicker with defaultPickerValue and showTime', () => {
-    const startDate = moment('1982-02-12');
-    const endDate = moment('1982-02-22');
-
-    const wrapper = mount(
-      <DatePicker.RangePicker defaultPickerValue={[startDate, endDate]} showTime open />,
-    );
-
-    const month = wrapper.find('.ant-picker-header-view .ant-picker-month-btn').text();
-    const year = wrapper.find('.ant-picker-header-view .ant-picker-year-btn').text();
-
-    expect(month).toBe(startDate.format('MMM'));
-    expect(year).toBe(startDate.format('YYYY'));
-    expect(wrapper.find('.ant-picker-time-panel').length).toBe(1);
-  });
-
-  it('placement api work correctly ', () => {
-    const popupAlignDefault = (points = ['tl', 'bl'], offset = [0, 4]) => ({
-      points,
-      offset,
-      overflow: {
-        adjustX: 1,
-        adjustY: 1,
-      },
-    });
-
-    const wrapper = mount(
-      <DatePicker.RangePicker defaultValue={moment()} placement="bottomLeft" />,
-    );
-    expect(wrapper.find('Trigger').prop('popupAlign')).toEqual(popupAlignDefault(['tl', 'bl']));
-    wrapper.setProps({
-      placement: 'bottomRight',
-    });
-    expect(wrapper.find('Trigger').prop('popupAlign')).toEqual(popupAlignDefault(['tr', 'br']));
-    wrapper.setProps({
-      placement: 'topLeft',
-    });
-    expect(wrapper.find('Trigger').prop('popupAlign')).toEqual(
-      popupAlignDefault(['bl', 'tl'], [0, -4]),
-    );
-    wrapper.setProps({
-      placement: 'topRight',
-    });
-    expect(wrapper.find('Trigger').prop('popupAlign')).toEqual(
-      popupAlignDefault(['br', 'tr'], [0, -4]),
-    );
-  });
-});

components/date-picker/__tests__/DatePicker.test.tsx

@@ -0,0 +1,282 @@
+import MockDate from 'mockdate';
+import moment from 'moment';
+import React from 'react';
+import type { TriggerProps } from 'rc-trigger';
+import { fireEvent, render } from '../../../tests/utils';
+import DatePicker from '..';
+import focusTest from '../../../tests/shared/focusTest';
+import type { PickerLocale } from '../generatePicker';
+
+let triggerProps: TriggerProps;
+
+jest.mock('rc-trigger', () => {
+  let Trigger = jest.requireActual('rc-trigger/lib/mock');
+  Trigger = Trigger.default || Trigger;
+  const h: typeof React = jest.requireActual('react');
+
+  return {
+    default: h.forwardRef<unknown, TriggerProps>((props, ref) => {
+      triggerProps = props;
+      return h.createElement(Trigger, { ref, ...props });
+    }),
+    __esModule: true,
+  };
+});
+
+describe('DatePicker', () => {
+  const errorSpy = jest.spyOn(console, 'error').mockImplementation(() => {});
+
+  focusTest(DatePicker, { refFocus: true });
+
+  beforeEach(() => {
+    MockDate.set(moment('2016-11-22').valueOf());
+  });
+
+  afterEach(() => {
+    MockDate.reset();
+    errorSpy.mockReset();
+  });
+
+  afterAll(() => {
+    errorSpy.mockRestore();
+  });
+
+  it('prop locale should works', () => {
+    const locale = {
+      lang: {
+        locale: 'mk',
+        placeholder: 'Избери дата',
+        rangePlaceholder: ['Начална дата', 'Крайна дата'],
+        today: 'Днес',
+        now: 'Сега',
+        backToToday: 'Към днес',
+        ok: 'Добре',
+        clear: 'Изчистване',
+        month: 'Месец',
+        year: 'Година',
+        timeSelect: 'Избор на час',
+        dateSelect: 'Избор на дата',
+        monthSelect: 'Избор на месец',
+        yearSelect: 'Избор на година',
+        decadeSelect: 'Десетилетие',
+        previousMonth: 'Предишен месец (PageUp)',
+        nextMonth: 'Следващ месец (PageDown)',
+        previousYear: 'Последна година (Control + left)',
+        nextYear: 'Следваща година (Control + right)',
+        previousDecade: 'Предишно десетилетие',
+        nextDecade: 'Следващо десетилетие',
+        previousCentury: 'Последен век',
+        nextCentury: 'Следващ век',
+        yearFormat: 'YYYY',
+        dateFormat: 'D M YYYY',
+        dayFormat: 'D',
+        dateTimeFormat: 'D M YYYY HH:mm:ss',
+        monthBeforeYear: true,
+      },
+      timePickerLocale: {
+        placeholder: 'Избор на час',
+      },
+    };
+    const birthday = moment('2000-01-01', 'YYYY-MM-DD');
+    const wrapper = render(<DatePicker open locale={locale as PickerLocale} value={birthday} />);
+    expect(Array.from(wrapper.container.children)).toMatchSnapshot();
+  });
+
+  it('disabled date', () => {
+    const disabledDate = (current: any) => current && current < moment().endOf('day');
+    const wrapper = render(<DatePicker disabledDate={disabledDate} open />);
+    expect(Array.from(wrapper.container.children)).toMatchSnapshot();
+  });
+
+  it('placeholder', () => {
+    const wrapper = render(<DatePicker placeholder={undefined} />);
+    expect(wrapper.container.querySelector('input')?.placeholder).toEqual('Select date');
+  });
+
+  it('showTime={{ showHour: true, showMinute: true }}', () => {
+    const { container } = render(
+      <DatePicker
+        defaultValue={moment()}
+        showTime={{ showHour: true, showMinute: true }}
+        format="YYYY-MM-DD"
+        open
+      />,
+    );
+    expect(container.querySelectorAll('.ant-picker-time-panel-column').length).toBe(2);
+    expect(
+      container
+        .querySelectorAll('.ant-picker-time-panel-column')?.[0]
+        .querySelectorAll('.ant-picker-time-panel-cell').length,
+    ).toBe(24);
+    expect(
+      container
+        .querySelectorAll('.ant-picker-time-panel-column')?.[1]
+        .querySelectorAll('.ant-picker-time-panel-cell').length,
+    ).toBe(60);
+  });
+
+  it('showTime={{ showHour: true, showSecond: true }}', () => {
+    const { container } = render(
+      <DatePicker
+        defaultValue={moment()}
+        showTime={{ showHour: true, showSecond: true }}
+        format="YYYY-MM-DD"
+        open
+      />,
+    );
+    expect(container.querySelectorAll('.ant-picker-time-panel-column').length).toBe(2);
+    expect(
+      container
+        .querySelectorAll('.ant-picker-time-panel-column')?.[0]
+        .querySelectorAll('.ant-picker-time-panel-cell').length,
+    ).toBe(24);
+    expect(
+      container
+        .querySelectorAll('.ant-picker-time-panel-column')?.[1]
+        .querySelectorAll('.ant-picker-time-panel-cell').length,
+    ).toBe(60);
+  });
+
+  it('showTime={{ showMinute: true, showSecond: true }}', () => {
+    const { container } = render(
+      <DatePicker
+        defaultValue={moment()}
+        showTime={{ showMinute: true, showSecond: true }}
+        format="YYYY-MM-DD"
+        open
+      />,
+    );
+    expect(container.querySelectorAll('.ant-picker-time-panel-column').length).toBe(2);
+    expect(
+      container
+        .querySelectorAll('.ant-picker-time-panel-column')?.[0]
+        .querySelectorAll('.ant-picker-time-panel-cell').length,
+    ).toBe(60);
+    expect(
+      container
+        .querySelectorAll('.ant-picker-time-panel-column')?.[1]
+        .querySelectorAll('.ant-picker-time-panel-cell').length,
+    ).toBe(60);
+  });
+  it('showTime should work correctly when format is custom function', () => {
+    const { container } = render(
+      <DatePicker defaultValue={moment()} showTime format={val => val.format('YYYY-MM-DD')} open />,
+    );
+    const fuousEvent = () => {
+      fireEvent.focus(container.querySelector('input')!);
+    };
+    const mouseDownEvent = () => {
+      fireEvent.mouseDown(container.querySelector('input')!);
+    };
+    expect(fuousEvent).not.toThrowError();
+    expect(mouseDownEvent).not.toThrowError();
+  });
+
+  it('12 hours', () => {
+    const { container } = render(
+      <DatePicker defaultValue={moment()} showTime format="YYYY-MM-DD HH:mm:ss A" open />,
+    );
+    expect(container.querySelectorAll('.ant-picker-time-panel-column').length).toBe(4);
+    expect(
+      container
+        .querySelectorAll('.ant-picker-time-panel-column')?.[0]
+        .querySelectorAll('.ant-picker-time-panel-cell').length,
+    ).toBe(12);
+    expect(
+      container
+        .querySelectorAll('.ant-picker-time-panel-column')?.[1]
+        .querySelectorAll('.ant-picker-time-panel-cell').length,
+    ).toBe(60);
+    expect(
+      container
+        .querySelectorAll('.ant-picker-time-panel-column')?.[2]
+        .querySelectorAll('.ant-picker-time-panel-cell').length,
+    ).toBe(60);
+    expect(
+      container
+        .querySelectorAll('.ant-picker-time-panel-column')?.[3]
+        .querySelectorAll('.ant-picker-time-panel-cell').length,
+    ).toBe(2);
+  });
+
+  it('24 hours', () => {
+    const { container } = render(
+      <DatePicker defaultValue={moment()} showTime format="YYYY-MM-DD HH:mm:ss" open />,
+    );
+    expect(container.querySelectorAll('.ant-picker-time-panel-column').length).toBe(3);
+    expect(
+      container
+        .querySelectorAll('.ant-picker-time-panel-column')?.[0]
+        .querySelectorAll('.ant-picker-time-panel-cell').length,
+    ).toBe(24);
+    expect(
+      container
+        .querySelectorAll('.ant-picker-time-panel-column')?.[1]
+        .querySelectorAll('.ant-picker-time-panel-cell').length,
+    ).toBe(60);
+    expect(
+      container
+        .querySelectorAll('.ant-picker-time-panel-column')?.[2]
+        .querySelectorAll('.ant-picker-time-panel-cell').length,
+    ).toBe(60);
+  });
+
+  it('DatePicker should show warning when use dropdownClassName', () => {
+    render(<DatePicker dropdownClassName="myCustomClassName" />);
+    expect(errorSpy).toHaveBeenCalledWith(
+      'Warning: [antd: DatePicker] `dropdownClassName` is deprecated which will be removed in next major version. Please use `popupClassName` instead.',
+    );
+  });
+
+  it('RangePicker should show warning when use dropdownClassName', () => {
+    render(<DatePicker.RangePicker dropdownClassName="myCustomClassName" />);
+    expect(errorSpy).toHaveBeenCalledWith(
+      'Warning: [antd: RangePicker] `dropdownClassName` is deprecated which will be removed in next major version. Please use `popupClassName` instead.',
+    );
+  });
+
+  it('DatePicker.RangePicker with defaultPickerValue and showTime', () => {
+    const startDate = moment('1982-02-12');
+    const endDate = moment('1982-02-22');
+
+    const { container } = render(
+      <DatePicker.RangePicker defaultPickerValue={[startDate, endDate]} showTime open />,
+    );
+
+    const m = container.querySelector('.ant-picker-header-view .ant-picker-month-btn')?.innerHTML;
+    const y = container.querySelector('.ant-picker-header-view .ant-picker-year-btn')?.innerHTML;
+    expect(m).toBe(startDate.format('MMM'));
+    expect(y).toBe(startDate.format('YYYY'));
+    expect(container.querySelectorAll('.ant-picker-time-panel').length).toBe(1);
+  });
+
+  it('placement api work correctly', () => {
+    const { rerender } = render(<DatePicker.RangePicker open placement="topLeft" />);
+    expect(triggerProps?.builtinPlacements).toEqual(
+      expect.objectContaining({
+        topLeft: expect.objectContaining({ offset: [0, -4], points: ['bl', 'tl'] }),
+      }),
+    );
+
+    rerender(<DatePicker.RangePicker open placement="topRight" />);
+    expect(triggerProps?.builtinPlacements).toEqual(
+      expect.objectContaining({
+        topRight: expect.objectContaining({ offset: [0, -4], points: ['br', 'tr'] }),
+      }),
+    );
+
+    rerender(<DatePicker.RangePicker open placement="bottomLeft" />);
+    expect(triggerProps?.builtinPlacements).toEqual(
+      expect.objectContaining({
+        bottomLeft: expect.objectContaining({ offset: [0, 4], points: ['tl', 'bl'] }),
+      }),
+    );
+
+    rerender(<DatePicker.RangePicker open placement="bottomRight" />);
+    expect(triggerProps?.builtinPlacements).toEqual(
+      expect.objectContaining({
+        bottomRight: expect.objectContaining({ offset: [0, 4], points: ['tr', 'br'] }),
+      }),
+    );
+  });
+});

components/date-picker/__tests__/QuarterPicker.test.tsx

@@ -1,6 +1,6 @@
-import { mount } from 'enzyme';
 import React from 'react';
 import DatePicker from '..';
+import { render } from '../../../tests/utils';
 import { resetWarned } from '../../_util/warning';
 
 const { QuarterPicker } = DatePicker;
@@ -10,8 +10,8 @@ describe('QuarterPicker', () => {
     resetWarned();
     const warnSpy = jest.spyOn(console, 'error');
 
-    const wrapper = mount(<QuarterPicker style={{ width: 400 }} />);
+    const { container } = render(<QuarterPicker style={{ width: 400 }} />);
-    expect(wrapper.render()).toMatchSnapshot();
+    expect(container.firstChild).toMatchSnapshot();
 
     expect(warnSpy).toHaveBeenCalledWith(
       "Warning: [antd: QuarterPicker] DatePicker.QuarterPicker is legacy usage. Please use DatePicker[picker='quarter'] directly.",

components/date-picker/__tests__/RangePicker.test.js

@@ -1,104 +0,0 @@
-import { mount } from 'enzyme';
-import moment from 'moment';
-import React from 'react';
-import DatePicker from '..';
-import focusTest from '../../../tests/shared/focusTest';
-import { resetMockDate, setMockDate } from '../../../tests/utils';
-import enUS from '../locale/en_US';
-import { closePicker, openPicker, selectCell } from './utils';
-
-const { RangePicker } = DatePicker;
-
-describe('RangePicker', () => {
-  focusTest(RangePicker, { refFocus: true });
-
-  beforeEach(() => {
-    setMockDate();
-  });
-
-  afterEach(() => {
-    resetMockDate();
-  });
-
-  // issue: https://github.com/ant-design/ant-design/issues/5872
-  it('should not throw error when value is reset to `[]`', () => {
-    const birthday = moment('2000-01-01', 'YYYY-MM-DD');
-    const wrapper = mount(<RangePicker value={[birthday, birthday]} open />);
-    wrapper.setProps({ value: [] });
-
-    expect(() => {
-      openPicker(wrapper);
-      selectCell(wrapper, 3);
-      closePicker(wrapper);
-
-      openPicker(wrapper, 1);
-      selectCell(wrapper, 5, 1);
-      closePicker(wrapper, 1);
-    }).not.toThrow();
-  });
-
-  it('customize separator', () => {
-    const wrapper = mount(<RangePicker separator="test" />);
-    expect(wrapper.render()).toMatchSnapshot();
-  });
-
-  // https://github.com/ant-design/ant-design/issues/13302
-  describe('in "month" mode, when the left and right panels select the same month', () => {
-    it('the cell status is correct', () => {
-      class Test extends React.Component {
-        state = {
-          value: null,
-        };
-
-        onPanelChange = value => {
-          this.setState({ value });
-        };
-
-        render() {
-          return (
-            <RangePicker
-              value={this.state.value}
-              mode={['month', 'month']}
-              onPanelChange={this.onPanelChange}
-            />
-          );
-        }
-      }
-      const wrapper = mount(<Test />);
-      openPicker(wrapper);
-      selectCell(wrapper, 'Feb');
-      openPicker(wrapper, 1);
-      selectCell(wrapper, 'Feb');
-      closePicker(wrapper, 1);
-      const { value } = wrapper.find(Test).state();
-      expect(value[0].isSame(value[1], 'date')).toBeTruthy();
-    });
-  });
-
-  describe('ranges', () => {
-    it('RangePicker support presetted ranges with Tags', () => {
-      const wrapper = mount(
-        <RangePicker
-          ranges={{
-            Today: [moment(), moment()],
-            'This Month': [moment().startOf('month'), moment().endOf('month')],
-          }}
-          open
-        />,
-      );
-      expect(wrapper.render()).toMatchSnapshot();
-    });
-  });
-
-  it('placeholder', () => {
-    const wrapper = mount(<RangePicker placeholder={undefined} />);
-    expect(wrapper.find('input').first().props().placeholder).toEqual('Start date');
-    expect(wrapper.find('input').last().props().placeholder).toEqual('End date');
-  });
-
-  it('RangePicker picker quarter placeholder', () => {
-    const wrapper = mount(<RangePicker picker="quarter" locale={enUS} />);
-    expect(wrapper.find('input').at(0).props().placeholder).toEqual('Start quarter');
-    expect(wrapper.find('input').at(1).props().placeholder).toEqual('End quarter');
-  });
-});

components/date-picker/__tests__/RangePicker.test.tsx

@@ -0,0 +1,115 @@
+import moment from 'moment';
+import type { RangeValue } from 'rc-picker/lib/interface';
+import React from 'react';
+import DatePicker from '..';
+import focusTest from '../../../tests/shared/focusTest';
+import { render, resetMockDate, setMockDate } from '../../../tests/utils';
+import enUS from '../locale/en_US';
+
+import { closePicker, openPicker, selectCell } from './utils';
+
+const { RangePicker } = DatePicker;
+
+describe('RangePicker', () => {
+  focusTest(RangePicker, { refFocus: true });
+
+  beforeEach(() => {
+    setMockDate();
+  });
+
+  afterEach(() => {
+    resetMockDate();
+  });
+
+  // issue: https://github.com/ant-design/ant-design/issues/5872
+  it('should not throw error when value is reset to `[]`', () => {
+    const birthday = moment('2000-01-01', 'YYYY-MM-DD');
+    const wrapper1 = render(<RangePicker value={[birthday, birthday]} open />);
+    const wrapper2 = render(<RangePicker value={[] as unknown as null} open />);
+
+    expect(() => {
+      openPicker(wrapper1);
+      selectCell(wrapper1, 3);
+      closePicker(wrapper1);
+
+      openPicker(wrapper1, 1);
+      selectCell(wrapper1, 5, 1);
+      closePicker(wrapper1, 1);
+
+      openPicker(wrapper2);
+      selectCell(wrapper2, 3);
+      closePicker(wrapper2);
+
+      openPicker(wrapper2, 1);
+      selectCell(wrapper2, 5, 1);
+      closePicker(wrapper2, 1);
+    }).not.toThrow();
+  });
+
+  it('customize separator', () => {
+    const { container } = render(<RangePicker separator="test" />);
+    expect(container.firstChild).toMatchSnapshot();
+  });
+
+  // https://github.com/ant-design/ant-design/issues/13302
+  describe('in "month" mode, when the left and right panels select the same month', () => {
+    it('the cell status is correct', () => {
+      let rangePickerValue = [] as unknown as RangeValue<any>;
+      class Test extends React.Component {
+        state = { value: null };
+
+        render() {
+          return (
+            <RangePicker
+              value={this.state.value}
+              mode={['month', 'month']}
+              onPanelChange={value => {
+                this.setState({ value });
+                rangePickerValue = value;
+              }}
+            />
+          );
+        }
+      }
+      const wrapper = render(<Test />);
+
+      openPicker(wrapper);
+      selectCell(wrapper, 'Feb');
+      openPicker(wrapper, 1);
+      selectCell(wrapper, 'Feb');
+      closePicker(wrapper, 1);
+
+      const [start, end] = rangePickerValue as [moment.Moment, moment.Moment];
+
+      expect(start.isSame(end, 'date')).toBeTruthy();
+    });
+  });
+
+  describe('ranges', () => {
+    it('RangePicker support presetted ranges with Tags', () => {
+      const { container } = render(
+        <RangePicker
+          open
+          ranges={{
+            Today: [moment(), moment()],
+            'This Month': [moment().startOf('month'), moment().endOf('month')],
+          }}
+        />,
+      );
+      expect(Array.from(container.children)).toMatchSnapshot();
+    });
+  });
+
+  it('placeholder', () => {
+    const { container } = render(<RangePicker placeholder={undefined} />);
+    const inputLists = container.querySelectorAll('input');
+    expect(inputLists[0]?.placeholder).toEqual('Start date');
+    expect(inputLists[inputLists.length - 1].placeholder).toEqual('End date');
+  });
+
+  it('RangePicker picker quarter placeholder', () => {
+    const { container } = render(<RangePicker picker="quarter" locale={enUS} />);
+    expect(container.querySelectorAll('input')[0]?.placeholder).toEqual('Start quarter');
+    expect(container.querySelectorAll('input')[1]?.placeholder).toEqual('End quarter');
+  });
+});

components/date-picker/__tests__/WeekPicker.test.tsx

@@ -1,8 +1,7 @@
-import { mount } from 'enzyme';
 import React from 'react';
 import DatePicker from '..';
 import focusTest from '../../../tests/shared/focusTest';
-import { resetMockDate, setMockDate } from '../../../tests/utils';
+import { render, resetMockDate, setMockDate } from '../../../tests/utils';
 
 const { WeekPicker } = DatePicker;
 
@@ -18,7 +17,7 @@ describe('WeekPicker', () => {
   focusTest(WeekPicker, { refFocus: true });
 
   it('should support style prop', () => {
-    const wrapper = mount(<WeekPicker style={{ width: 400 }} />);
+    const { container } = render(<WeekPicker style={{ width: 400 }} />);
-    expect(wrapper.render()).toMatchSnapshot();
+    expect(container.firstChild).toMatchSnapshot();
   });
 });

components/date-picker/__tests__/__snapshots__/other.test.tsx.snap

@@ -3,8 +3,8 @@
 exports[`MonthPicker and WeekPicker render MonthPicker 1`] = `
 <div>
   <div
-    class="ant-picker-dropdown"
+    class="ant-picker-dropdown ant-slide-up-appear ant-slide-up-appear-prepare ant-slide-up"
-    style="opacity:0"
+    style="opacity: 0;"
   >
     <div
       class="ant-picker-panel-container"
@@ -196,8 +196,8 @@ exports[`MonthPicker and WeekPicker render MonthPicker 1`] = `
 exports[`MonthPicker and WeekPicker render WeekPicker 1`] = `
 <div>
   <div
-    class="ant-picker-dropdown"
+    class="ant-picker-dropdown ant-slide-up-appear ant-slide-up-appear-prepare ant-slide-up"
-    style="opacity:0"
+    style="opacity: 0;"
   >
     <div
       class="ant-picker-panel-container"

components/date-picker/__tests__/other.test.tsx

@@ -1,12 +1,13 @@
-import { mount, render } from 'enzyme';
 import moment from 'moment';
 import React from 'react';
 import DatePicker from '..';
 import ConfigProvider from '../../config-provider';
+import type { Locale } from '../../locale-provider';
 import LocaleProvider from '../../locale-provider';
 import locale from '../../locale-provider/zh_CN';
 import jaJP from '../../locale/ja_JP';
 import zhTW from '../locale/zh_TW';
+import { render } from '../../../tests/utils';
 
 const { MonthPicker, WeekPicker } = DatePicker;
 
@@ -23,15 +24,14 @@ describe('Picker format by locale', () => {
   };
 
   const date = moment('2000-01-01', 'YYYY-MM-DD');
-  function matchPicker(name, Picker, props) {
+  function matchPicker(name: string, Picker: typeof MonthPicker | typeof WeekPicker, props?: any) {
     it(name, () => {
-      const wrapper = mount(
+      const { container } = render(
-        <LocaleProvider locale={myLocale}>
+        <LocaleProvider locale={myLocale as Locale}>
           <Picker value={date} {...props} />
         </LocaleProvider>,
       );
-
+      expect(container.firstChild).toMatchSnapshot();
-      expect(wrapper.render()).toMatchSnapshot();
     });
   }
 
@@ -44,35 +44,33 @@ describe('Picker format by locale', () => {
 describe('MonthPicker and WeekPicker', () => {
   it('render MonthPicker', () => {
     const birthday = moment('2000-01-01', 'YYYY-MM-DD').locale('zh-cn');
-    const wrapper = mount(<MonthPicker open />);
+    const { container } = render(<MonthPicker open value={birthday} />);
-    wrapper.setProps({ value: birthday });
+    expect(container.querySelector('div.ant-picker-dropdown')?.parentNode).toMatchSnapshot();
-    expect(render(wrapper.find('Trigger').instance().getComponent())).toMatchSnapshot();
   });
 
   it('render WeekPicker', () => {
     const birthday = moment('2000-01-01', 'YYYY-MM-DD').locale('zh-cn');
-    const wrapper = mount(<WeekPicker open />);
+    const { container } = render(<WeekPicker open value={birthday} />);
-    wrapper.setProps({ value: birthday });
+    expect(container.querySelector('div.ant-picker-dropdown')?.parentNode).toMatchSnapshot();
-    expect(render(wrapper.find('Trigger').instance().getComponent())).toMatchSnapshot();
   });
 });
 
 describe('Override locale setting of the ConfigProvider', () => {
   it('DatePicker', () => {
-    const wrapper = mount(
+    const { container } = render(
       <ConfigProvider locale={jaJP}>
         <DatePicker locale={zhTW} />
       </ConfigProvider>,
     );
-    expect(wrapper.find('input').props().placeholder).toEqual('請選擇日期');
+    expect(container.querySelector('input')?.placeholder).toEqual('請選擇日期');
   });
   it('RangePicker', () => {
-    const wrapper = mount(
+    const { container } = render(
       <ConfigProvider locale={jaJP}>
         <DatePicker.RangePicker locale={zhTW} />
       </ConfigProvider>,
     );
-    expect(wrapper.find('input').at(0).props().placeholder).toEqual('開始日期');
+    expect(container.querySelectorAll('input')[0]?.placeholder).toEqual('開始日期');
-    expect(wrapper.find('input').at(1).props().placeholder).toEqual('結束日期');
+    expect(container.querySelectorAll('input')[1]?.placeholder).toEqual('結束日期');
   });
 });

components/date-picker/__tests__/utils.js

@@ -1,58 +0,0 @@
-/* eslint-disable import/prefer-default-export */
-export function selectDate(wrapper, date, index) {
-  let calendar = wrapper;
-  if (index !== undefined) {
-    calendar = wrapper.find('.ant-calendar-range-part').at(index);
-  }
-  calendar.find({ title: date.format('LL'), role: 'gridcell' }).simulate('click');
-}
-
-export function hasSelected(wrapper, date) {
-  return wrapper
-    .find({ title: date.format('LL'), role: 'gridcell' })
-    .hasClass('ant-calendar-selected-day');
-}
-
-export function openPanel(wrapper) {
-  wrapper.find('.ant-calendar-picker-input').simulate('click');
-}
-
-export function clearInput(wrapper) {
-  wrapper.find('.ant-calendar-picker-clear').hostNodes().simulate('click');
-}
-
-export function nextYear(wrapper) {
-  wrapper.find('.ant-calendar-next-year-btn').simulate('click');
-}
-
-export function nextMonth(wrapper) {
-  wrapper.find('.ant-calendar-next-month-btn').simulate('click');
-}
-
-export function openPicker(wrapper, index = 0) {
-  wrapper.find('input').at(index).simulate('mousedown').simulate('focus');
-}
-export function closePicker(wrapper, index = 0) {
-  wrapper.find('input').at(index).simulate('blur');
-}
-
-export function selectCell(wrapper, text, index = 0) {
-  let matchCell;
-
-  wrapper
-    .find('table')
-    .at(index)
-    .find('td')
-    .forEach(td => {
-      if (td.text() === String(text) && td.props().className.includes('-in-view')) {
-        matchCell = td;
-        td.simulate('click');
-      }
-    });
-
-  if (!matchCell) {
-    throw new Error('Cell not match in picker panel.');
-  }
-
-  return matchCell;
-}

components/date-picker/__tests__/utils.ts

@@ -0,0 +1,27 @@
+import { fireEvent } from '../../../tests/utils';
+import type { render } from '../../../tests/utils';
+
+export function openPicker(wrapper: ReturnType<typeof render>, index = 0) {
+  fireEvent.mouseDown(wrapper.container?.querySelectorAll('input')?.[index]!);
+  fireEvent.focus(wrapper.container?.querySelectorAll('input')?.[index]!);
+}
+
+export function closePicker(wrapper: ReturnType<typeof render>, index = 0) {
+  fireEvent.blur(wrapper.container?.querySelectorAll('input')[index]!);
+}
+
+export function selectCell(wrapper: ReturnType<typeof render>, text: string | number, index = 0) {
+  let matchCell: HTMLTableCellElement | null = null;
+  const tds = wrapper.container?.querySelectorAll('table')?.[index]?.querySelectorAll('td');
+  tds.forEach(td => {
+    if (td.querySelector('div')?.innerHTML === String(text) && td.className.includes('-in-view')) {
+      matchCell = td;
+      fireEvent.click(td);
+    }
+  });
+  /* istanbul ignore next */
+  if (!matchCell) {
+    throw new Error('Cell not match in picker panel.');
+  }
+  return matchCell;
+}

components/date-picker/util.ts

@@ -95,17 +95,11 @@ export function transPlacement2DropdownAlign(
       };
     }
     default: {
-      return direction === 'rtl'
+      return {
-        ? {
+        points: direction === 'rtl' ? ['tr', 'br'] : ['tl', 'bl'],
-            points: ['tr', 'br'],
+        offset: [0, 4],
-            offset: [0, 4],
+        overflow,
-            overflow,
+      };
-          }
-        : {
-            points: ['tl', 'bl'],
-            offset: [0, 4],
-            overflow,
-          };
     }
   }
 }

components/style/themes/compact.less

@@ -203,7 +203,6 @@
 
 // Card
 // ---
-@card-padding-base: 16px;
 @card-head-height: 36px;
 @card-head-font-size: @card-head-font-size-sm;
 @card-head-padding: 8.5px;

components/table/__tests__/Table.sorter.test.js

@@ -104,6 +104,33 @@ describe('Table.sorter', () => {
     expect(getNameColumn().getAttribute('aria-sort')).toEqual(null);
   });
 
+  it('should have aria-lable if the column is sortable and is not sorted', () => {
+    const { container } = render(
+      createTable(
+        {
+          sortDirections: ['descend', 'ascend'],
+        },
+        {
+          defaultSortOrder: 'descend',
+        },
+      ),
+    );
+
+    const getNameColumn = () => container.querySelector('th');
+
+    expect(renderedNames(container)).toEqual(['Tom', 'Lucy', 'Jack', 'Jerry']);
+    expect(getNameColumn().getAttribute('aria-sort')).toEqual('descending');
+    expect(getNameColumn().getAttribute('aria-label')).toEqual(null);
+
+    fireEvent.click(container.querySelector('.ant-table-column-sorters'));
+    expect(getNameColumn().getAttribute('aria-sort')).toEqual('ascending');
+    expect(getNameColumn().getAttribute('aria-label')).toEqual(null);
+
+    fireEvent.click(container.querySelector('.ant-table-column-sorters'));
+    expect(getNameColumn().getAttribute('aria-sort')).toEqual(null);
+    expect(getNameColumn().getAttribute('aria-label')).toEqual('Name sortable');
+  });
+
   it('sort records', () => {
     const { container } = render(createTable());
     const getNameColumn = () => container.querySelector('th');

components/table/__tests__/__snapshots__/Table.rowSelection.test.js.snap

@@ -85,7 +85,6 @@ exports[`Table.rowSelection fix expand on th left when selection column fixed on
                     <div
                       style="height: 0px; overflow: hidden;"
                     >
-                       
                     </div>
                   </td>
                   <td
@@ -94,7 +93,6 @@ exports[`Table.rowSelection fix expand on th left when selection column fixed on
                     <div
                       style="height: 0px; overflow: hidden;"
                     >
-                       
                     </div>
                   </td>
                   <td
@@ -103,7 +101,6 @@ exports[`Table.rowSelection fix expand on th left when selection column fixed on
                     <div
                       style="height: 0px; overflow: hidden;"
                     >
-                       
                     </div>
                   </td>
                 </tr>
@@ -443,7 +440,6 @@ exports[`Table.rowSelection fix selection column on the left 1`] = `
                     <div
                       style="height: 0px; overflow: hidden;"
                     >
-                       
                     </div>
                   </td>
                   <td
@@ -452,7 +448,6 @@ exports[`Table.rowSelection fix selection column on the left 1`] = `
                     <div
                       style="height: 0px; overflow: hidden;"
                     >
-                       
                     </div>
                   </td>
                 </tr>
@@ -749,7 +744,6 @@ exports[`Table.rowSelection fix selection column on the left when any other colu
                     <div
                       style="height: 0px; overflow: hidden;"
                     >
-                       
                     </div>
                   </td>
                   <td
@@ -758,7 +752,6 @@ exports[`Table.rowSelection fix selection column on the left when any other colu
                     <div
                       style="height: 0px; overflow: hidden;"
                     >
-                       
                     </div>
                   </td>
                 </tr>

components/table/__tests__/__snapshots__/Table.sorter.test.js.snap

@@ -6,6 +6,7 @@ exports[`Table.sorter renders sorter icon correctly 1`] = `
 >
   <tr>
     <th
+      aria-label="Name sortable"
       class="ant-table-cell ant-table-column-has-sorters"
       tabindex="0"
     >
@@ -26,7 +27,7 @@ exports[`Table.sorter renders sorter icon correctly 1`] = `
             <span
               aria-label="caret-up"
               class="anticon anticon-caret-up ant-table-column-sorter-up"
-              role="img"
+              role="presentation"
             >
               <svg
                 aria-hidden="true"
@@ -45,7 +46,7 @@ exports[`Table.sorter renders sorter icon correctly 1`] = `
             <span
               aria-label="caret-down"
               class="anticon anticon-caret-down ant-table-column-sorter-down"
-              role="img"
+              role="presentation"
             >
               <svg
                 aria-hidden="true"
@@ -118,7 +119,7 @@ exports[`Table.sorter should support defaultOrder in Column 1`] = `
                           <span
                             aria-label="caret-up"
                             class="anticon anticon-caret-up ant-table-column-sorter-up active"
-                            role="img"
+                            role="presentation"
                           >
                             <svg
                               aria-hidden="true"
@@ -137,7 +138,7 @@ exports[`Table.sorter should support defaultOrder in Column 1`] = `
                           <span
                             aria-label="caret-down"
                             class="anticon anticon-caret-down ant-table-column-sorter-down"
-                            role="img"
+                            role="presentation"
                           >
                             <svg
                               aria-hidden="true"

components/table/__tests__/__snapshots__/demo-extend.test.ts.snap

@@ -35,6 +35,7 @@ exports[`renders ./components/table/demo/ajax.md extend context correctly 1`] =
               >
                 <tr>
                   <th
+                    aria-label="Name sortable"
                     class="ant-table-cell ant-table-column-has-sorters"
                     tabindex="0"
                   >
@@ -55,7 +56,7 @@ exports[`renders ./components/table/demo/ajax.md extend context correctly 1`] =
                           <span
                             aria-label="caret-up"
                             class="anticon anticon-caret-up ant-table-column-sorter-up"
-                            role="img"
+                            role="presentation"
                           >
                             <svg
                               aria-hidden="true"
@@ -74,7 +75,7 @@ exports[`renders ./components/table/demo/ajax.md extend context correctly 1`] =
                           <span
                             aria-label="caret-down"
                             class="anticon anticon-caret-down ant-table-column-sorter-down"
-                            role="img"
+                            role="presentation"
                           >
                             <svg
                               aria-hidden="true"
@@ -1516,6 +1517,7 @@ exports[`renders ./components/table/demo/custom-filter-panel.md extend context c
                     </div>
                   </th>
                   <th
+                    aria-label="Address sortable"
                     class="ant-table-cell ant-table-column-has-sorters"
                     tabindex="0"
                   >
@@ -1542,7 +1544,7 @@ exports[`renders ./components/table/demo/custom-filter-panel.md extend context c
                               <span
                                 aria-label="caret-up"
                                 class="anticon anticon-caret-up ant-table-column-sorter-up"
-                                role="img"
+                                role="presentation"
                               >
                                 <svg
                                   aria-hidden="true"
@@ -1561,7 +1563,7 @@ exports[`renders ./components/table/demo/custom-filter-panel.md extend context c
                               <span
                                 aria-label="caret-down"
                                 class="anticon anticon-caret-down ant-table-column-sorter-down"
-                                role="img"
+                                role="presentation"
                               >
                                 <svg
                                   aria-hidden="true"
@@ -3266,6 +3268,7 @@ Array [
                       Name
                     </th>
                     <th
+                      aria-label="Age sortable"
                       class="ant-table-cell ant-table-column-has-sorters"
                       tabindex="0"
                     >
@@ -3286,7 +3289,7 @@ Array [
                             <span
                               aria-label="caret-up"
                               class="anticon anticon-caret-up ant-table-column-sorter-up"
-                              role="img"
+                              role="presentation"
                             >
                               <svg
                                 aria-hidden="true"
@@ -3305,7 +3308,7 @@ Array [
                             <span
                               aria-label="caret-down"
                               class="anticon anticon-caret-down ant-table-column-sorter-down"
-                              role="img"
+                              role="presentation"
                             >
                               <svg
                                 aria-hidden="true"
@@ -3576,6 +3579,7 @@ Array [
                       </div>
                     </th>
                     <th
+                      aria-label="Action sortable"
                       class="ant-table-cell ant-table-column-has-sorters"
                       tabindex="0"
                     >
@@ -3596,7 +3600,7 @@ Array [
                             <span
                               aria-label="caret-up"
                               class="anticon anticon-caret-up ant-table-column-sorter-up"
-                              role="img"
+                              role="presentation"
                             >
                               <svg
                                 aria-hidden="true"
@@ -3615,7 +3619,7 @@ Array [
                             <span
                               aria-label="caret-down"
                               class="anticon anticon-caret-down ant-table-column-sorter-down"
-                              role="img"
+                              role="presentation"
                             >
                               <svg
                                 aria-hidden="true"
@@ -7531,6 +7535,7 @@ exports[`renders ./components/table/demo/filter-in-tree.md extend context correc
                     </div>
                   </th>
                   <th
+                    aria-label="Age sortable"
                     class="ant-table-cell ant-table-column-has-sorters"
                     tabindex="0"
                   >
@@ -7551,7 +7556,7 @@ exports[`renders ./components/table/demo/filter-in-tree.md extend context correc
                           <span
                             aria-label="caret-up"
                             class="anticon anticon-caret-up ant-table-column-sorter-up"
-                            role="img"
+                            role="presentation"
                           >
                             <svg
                               aria-hidden="true"
@@ -7570,7 +7575,7 @@ exports[`renders ./components/table/demo/filter-in-tree.md extend context correc
                           <span
                             aria-label="caret-down"
                             class="anticon anticon-caret-down ant-table-column-sorter-down"
-                            role="img"
+                            role="presentation"
                           >
                             <svg
                               aria-hidden="true"
@@ -8351,6 +8356,7 @@ exports[`renders ./components/table/demo/filter-search.md extend context correct
                     </div>
                   </th>
                   <th
+                    aria-label="Age sortable"
                     class="ant-table-cell ant-table-column-has-sorters"
                     tabindex="0"
                   >
@@ -8371,7 +8377,7 @@ exports[`renders ./components/table/demo/filter-search.md extend context correct
                           <span
                             aria-label="caret-up"
                             class="anticon anticon-caret-up ant-table-column-sorter-up"
-                            role="img"
+                            role="presentation"
                           >
                             <svg
                               aria-hidden="true"
@@ -8390,7 +8396,7 @@ exports[`renders ./components/table/demo/filter-search.md extend context correct
                           <span
                             aria-label="caret-down"
                             class="anticon anticon-caret-down ant-table-column-sorter-down"
-                            role="img"
+                            role="presentation"
                           >
                             <svg
                               aria-hidden="true"
@@ -12223,6 +12229,7 @@ exports[`renders ./components/table/demo/grouping-columns.md extend context corr
                 </tr>
                 <tr>
                   <th
+                    aria-label="Age sortable"
                     class="ant-table-cell ant-table-column-has-sorters"
                     rowspan="3"
                     tabindex="0"
@@ -12244,7 +12251,7 @@ exports[`renders ./components/table/demo/grouping-columns.md extend context corr
                           <span
                             aria-label="caret-up"
                             class="anticon anticon-caret-up ant-table-column-sorter-up"
-                            role="img"
+                            role="presentation"
                           >
                             <svg
                               aria-hidden="true"
@@ -12263,7 +12270,7 @@ exports[`renders ./components/table/demo/grouping-columns.md extend context corr
                           <span
                             aria-label="caret-down"
                             class="anticon anticon-caret-down ant-table-column-sorter-down"
-                            role="img"
+                            role="presentation"
                           >
                             <svg
                               aria-hidden="true"
@@ -13330,6 +13337,7 @@ exports[`renders ./components/table/demo/head.md extend context correctly 1`] =
               >
                 <tr>
                   <th
+                    aria-label="Name sortable"
                     class="ant-table-cell ant-table-column-has-sorters"
                     tabindex="0"
                   >
@@ -13356,7 +13364,7 @@ exports[`renders ./components/table/demo/head.md extend context correctly 1`] =
                               <span
                                 aria-label="caret-down"
                                 class="anticon anticon-caret-down ant-table-column-sorter-down"
-                                role="img"
+                                role="presentation"
                               >
                                 <svg
                                   aria-hidden="true"
@@ -13834,7 +13842,7 @@ exports[`renders ./components/table/demo/head.md extend context correctly 1`] =
                           <span
                             aria-label="caret-up"
                             class="anticon anticon-caret-up ant-table-column-sorter-up"
-                            role="img"
+                            role="presentation"
                           >
                             <svg
                               aria-hidden="true"
@@ -13853,7 +13861,7 @@ exports[`renders ./components/table/demo/head.md extend context correctly 1`] =
                           <span
                             aria-label="caret-down"
                             class="anticon anticon-caret-down ant-table-column-sorter-down active"
-                            role="img"
+                            role="presentation"
                           >
                             <svg
                               aria-hidden="true"
@@ -14676,6 +14684,7 @@ exports[`renders ./components/table/demo/multiple-sorter.md extend context corre
                     Name
                   </th>
                   <th
+                    aria-label="Chinese Score sortable"
                     class="ant-table-cell ant-table-column-has-sorters"
                     tabindex="0"
                   >
@@ -14696,7 +14705,7 @@ exports[`renders ./components/table/demo/multiple-sorter.md extend context corre
                           <span
                             aria-label="caret-up"
                             class="anticon anticon-caret-up ant-table-column-sorter-up"
-                            role="img"
+                            role="presentation"
                           >
                             <svg
                               aria-hidden="true"
@@ -14715,7 +14724,7 @@ exports[`renders ./components/table/demo/multiple-sorter.md extend context corre
                           <span
                             aria-label="caret-down"
                             class="anticon anticon-caret-down ant-table-column-sorter-down"
-                            role="img"
+                            role="presentation"
                           >
                             <svg
                               aria-hidden="true"
@@ -14760,6 +14769,7 @@ exports[`renders ./components/table/demo/multiple-sorter.md extend context corre
                     </div>
                   </th>
                   <th
+                    aria-label="Math Score sortable"
                     class="ant-table-cell ant-table-column-has-sorters"
                     tabindex="0"
                   >
@@ -14780,7 +14790,7 @@ exports[`renders ./components/table/demo/multiple-sorter.md extend context corre
                           <span
                             aria-label="caret-up"
                             class="anticon anticon-caret-up ant-table-column-sorter-up"
-                            role="img"
+                            role="presentation"
                           >
                             <svg
                               aria-hidden="true"
@@ -14799,7 +14809,7 @@ exports[`renders ./components/table/demo/multiple-sorter.md extend context corre
                           <span
                             aria-label="caret-down"
                             class="anticon anticon-caret-down ant-table-column-sorter-down"
-                            role="img"
+                            role="presentation"
                           >
                             <svg
                               aria-hidden="true"
@@ -14844,6 +14854,7 @@ exports[`renders ./components/table/demo/multiple-sorter.md extend context corre
                     </div>
                   </th>
                   <th
+                    aria-label="English Score sortable"
                     class="ant-table-cell ant-table-column-has-sorters"
                     tabindex="0"
                   >
@@ -14864,7 +14875,7 @@ exports[`renders ./components/table/demo/multiple-sorter.md extend context corre
                           <span
                             aria-label="caret-up"
                             class="anticon anticon-caret-up ant-table-column-sorter-up"
-                            role="img"
+                            role="presentation"
                           >
                             <svg
                               aria-hidden="true"
@@ -14883,7 +14894,7 @@ exports[`renders ./components/table/demo/multiple-sorter.md extend context corre
                           <span
                             aria-label="caret-down"
                             class="anticon anticon-caret-down ant-table-column-sorter-down"
-                            role="img"
+                            role="presentation"
                           >
                             <svg
                               aria-hidden="true"
@@ -20360,6 +20371,7 @@ Array [
                 >
                   <tr>
                     <th
+                      aria-label="Name sortable"
                       class="ant-table-cell ant-table-cell-ellipsis ant-table-column-has-sorters"
                       tabindex="0"
                     >
@@ -20386,7 +20398,7 @@ Array [
                                 <span
                                   aria-label="caret-up"
                                   class="anticon anticon-caret-up ant-table-column-sorter-up"
-                                  role="img"
+                                  role="presentation"
                                 >
                                   <svg
                                     aria-hidden="true"
@@ -20405,7 +20417,7 @@ Array [
                                 <span
                                   aria-label="caret-down"
                                   class="anticon anticon-caret-down ant-table-column-sorter-down"
-                                  role="img"
+                                  role="presentation"
                                 >
                                   <svg
                                     aria-hidden="true"
@@ -20665,6 +20677,7 @@ Array [
                       </div>
                     </th>
                     <th
+                      aria-label="Age sortable"
                       class="ant-table-cell ant-table-cell-ellipsis ant-table-column-has-sorters"
                       tabindex="0"
                     >
@@ -20685,7 +20698,7 @@ Array [
                             <span
                               aria-label="caret-up"
                               class="anticon anticon-caret-up ant-table-column-sorter-up"
-                              role="img"
+                              role="presentation"
                             >
                               <svg
                                 aria-hidden="true"
@@ -20704,7 +20717,7 @@ Array [
                             <span
                               aria-label="caret-down"
                               class="anticon anticon-caret-down ant-table-column-sorter-down"
-                              role="img"
+                              role="presentation"
                             >
                               <svg
                                 aria-hidden="true"
@@ -20749,6 +20762,7 @@ Array [
                       </div>
                     </th>
                     <th
+                      aria-label="Address sortable"
                       class="ant-table-cell ant-table-cell-ellipsis ant-table-column-has-sorters"
                       tabindex="0"
                     >
@@ -20775,7 +20789,7 @@ Array [
                                 <span
                                   aria-label="caret-up"
                                   class="anticon anticon-caret-up ant-table-column-sorter-up"
-                                  role="img"
+                                  role="presentation"
                                 >
                                   <svg
                                     aria-hidden="true"
@@ -20794,7 +20808,7 @@ Array [
                                 <span
                                   aria-label="caret-down"
                                   class="anticon anticon-caret-down ant-table-column-sorter-down"
-                                  role="img"
+                                  role="presentation"
                                 >
                                   <svg
                                     aria-hidden="true"
@@ -21290,6 +21304,7 @@ exports[`renders ./components/table/demo/resizable-column.md extend context corr
                     />
                   </th>
                   <th
+                    aria-label="Amount sortable"
                     class="ant-table-cell ant-table-column-has-sorters react-resizable"
                     tabindex="0"
                   >
@@ -21310,7 +21325,7 @@ exports[`renders ./components/table/demo/resizable-column.md extend context corr
                           <span
                             aria-label="caret-up"
                             class="anticon anticon-caret-up ant-table-column-sorter-up"
-                            role="img"
+                            role="presentation"
                           >
                             <svg
                               aria-hidden="true"
@@ -21329,7 +21344,7 @@ exports[`renders ./components/table/demo/resizable-column.md extend context corr
                           <span
                             aria-label="caret-down"
                             class="anticon anticon-caret-down ant-table-column-sorter-down"
-                            role="img"
+                            role="presentation"
                           >
                             <svg
                               aria-hidden="true"

components/table/__tests__/__snapshots__/demo.test.js.snap

@@ -35,6 +35,7 @@ exports[`renders ./components/table/demo/ajax.md correctly 1`] = `
               >
                 <tr>
                   <th
+                    aria-label="Name sortable"
                     class="ant-table-cell ant-table-column-has-sorters"
                     tabindex="0"
                   >
@@ -55,7 +56,7 @@ exports[`renders ./components/table/demo/ajax.md correctly 1`] = `
                           <span
                             aria-label="caret-up"
                             class="anticon anticon-caret-up ant-table-column-sorter-up"
-                            role="img"
+                            role="presentation"
                           >
                             <svg
                               aria-hidden="true"
@@ -74,7 +75,7 @@ exports[`renders ./components/table/demo/ajax.md correctly 1`] = `
                           <span
                             aria-label="caret-down"
                             class="anticon anticon-caret-down ant-table-column-sorter-down"
-                            role="img"
+                            role="presentation"
                           >
                             <svg
                               aria-hidden="true"
@@ -1134,6 +1135,7 @@ exports[`renders ./components/table/demo/custom-filter-panel.md correctly 1`] =
                     </div>
                   </th>
                   <th
+                    aria-label="Address sortable"
                     class="ant-table-cell ant-table-column-has-sorters"
                     tabindex="0"
                   >
@@ -1160,7 +1162,7 @@ exports[`renders ./components/table/demo/custom-filter-panel.md correctly 1`] =
                               <span
                                 aria-label="caret-up"
                                 class="anticon anticon-caret-up ant-table-column-sorter-up"
-                                role="img"
+                                role="presentation"
                               >
                                 <svg
                                   aria-hidden="true"
@@ -1179,7 +1181,7 @@ exports[`renders ./components/table/demo/custom-filter-panel.md correctly 1`] =
                               <span
                                 aria-label="caret-down"
                                 class="anticon anticon-caret-down ant-table-column-sorter-down"
-                                role="img"
+                                role="presentation"
                               >
                                 <svg
                                   aria-hidden="true"
@@ -2775,6 +2777,7 @@ Array [
                       Name
                     </th>
                     <th
+                      aria-label="Age sortable"
                       class="ant-table-cell ant-table-column-has-sorters"
                       tabindex="0"
                     >
@@ -2795,7 +2798,7 @@ Array [
                             <span
                               aria-label="caret-up"
                               class="anticon anticon-caret-up ant-table-column-sorter-up"
-                              role="img"
+                              role="presentation"
                             >
                               <svg
                                 aria-hidden="true"
@@ -2814,7 +2817,7 @@ Array [
                             <span
                               aria-label="caret-down"
                               class="anticon anticon-caret-down ant-table-column-sorter-down"
-                              role="img"
+                              role="presentation"
                             >
                               <svg
                                 aria-hidden="true"
@@ -2873,6 +2876,7 @@ Array [
                       </div>
                     </th>
                     <th
+                      aria-label="Action sortable"
                       class="ant-table-cell ant-table-column-has-sorters"
                       tabindex="0"
                     >
@@ -2893,7 +2897,7 @@ Array [
                             <span
                               aria-label="caret-up"
                               class="anticon anticon-caret-up ant-table-column-sorter-up"
-                              role="img"
+                              role="presentation"
                             >
                               <svg
                                 aria-hidden="true"
@@ -2912,7 +2916,7 @@ Array [
                             <span
                               aria-label="caret-down"
                               class="anticon anticon-caret-down ant-table-column-sorter-down"
-                              role="img"
+                              role="presentation"
                             >
                               <svg
                                 aria-hidden="true"
@@ -5850,6 +5854,7 @@ exports[`renders ./components/table/demo/filter-in-tree.md correctly 1`] = `
                     </div>
                   </th>
                   <th
+                    aria-label="Age sortable"
                     class="ant-table-cell ant-table-column-has-sorters"
                     tabindex="0"
                   >
@@ -5870,7 +5875,7 @@ exports[`renders ./components/table/demo/filter-in-tree.md correctly 1`] = `
                           <span
                             aria-label="caret-up"
                             class="anticon anticon-caret-up ant-table-column-sorter-up"
-                            role="img"
+                            role="presentation"
                           >
                             <svg
                               aria-hidden="true"
@@ -5889,7 +5894,7 @@ exports[`renders ./components/table/demo/filter-in-tree.md correctly 1`] = `
                           <span
                             aria-label="caret-down"
                             class="anticon anticon-caret-down ant-table-column-sorter-down"
-                            role="img"
+                            role="presentation"
                           >
                             <svg
                               aria-hidden="true"
@@ -6196,6 +6201,7 @@ exports[`renders ./components/table/demo/filter-search.md correctly 1`] = `
                     </div>
                   </th>
                   <th
+                    aria-label="Age sortable"
                     class="ant-table-cell ant-table-column-has-sorters"
                     tabindex="0"
                   >
@@ -6216,7 +6222,7 @@ exports[`renders ./components/table/demo/filter-search.md correctly 1`] = `
                           <span
                             aria-label="caret-up"
                             class="anticon anticon-caret-up ant-table-column-sorter-up"
-                            role="img"
+                            role="presentation"
                           >
                             <svg
                               aria-hidden="true"
@@ -6235,7 +6241,7 @@ exports[`renders ./components/table/demo/filter-search.md correctly 1`] = `
                           <span
                             aria-label="caret-down"
                             class="anticon anticon-caret-down ant-table-column-sorter-down"
-                            role="img"
+                            role="presentation"
                           >
                             <svg
                               aria-hidden="true"
@@ -9394,6 +9400,7 @@ exports[`renders ./components/table/demo/grouping-columns.md correctly 1`] = `
                 </tr>
                 <tr>
                   <th
+                    aria-label="Age sortable"
                     class="ant-table-cell ant-table-column-has-sorters"
                     rowspan="3"
                     tabindex="0"
@@ -9415,7 +9422,7 @@ exports[`renders ./components/table/demo/grouping-columns.md correctly 1`] = `
                           <span
                             aria-label="caret-up"
                             class="anticon anticon-caret-up ant-table-column-sorter-up"
-                            role="img"
+                            role="presentation"
                           >
                             <svg
                               aria-hidden="true"
@@ -9434,7 +9441,7 @@ exports[`renders ./components/table/demo/grouping-columns.md correctly 1`] = `
                           <span
                             aria-label="caret-down"
                             class="anticon anticon-caret-down ant-table-column-sorter-down"
-                            role="img"
+                            role="presentation"
                           >
                             <svg
                               aria-hidden="true"
@@ -10361,6 +10368,7 @@ exports[`renders ./components/table/demo/head.md correctly 1`] = `
               >
                 <tr>
                   <th
+                    aria-label="Name sortable"
                     class="ant-table-cell ant-table-column-has-sorters"
                     tabindex="0"
                   >
@@ -10387,7 +10395,7 @@ exports[`renders ./components/table/demo/head.md correctly 1`] = `
                               <span
                                 aria-label="caret-down"
                                 class="anticon anticon-caret-down ant-table-column-sorter-down"
-                                role="img"
+                                role="presentation"
                               >
                                 <svg
                                   aria-hidden="true"
@@ -10456,7 +10464,7 @@ exports[`renders ./components/table/demo/head.md correctly 1`] = `
                           <span
                             aria-label="caret-up"
                             class="anticon anticon-caret-up ant-table-column-sorter-up"
-                            role="img"
+                            role="presentation"
                           >
                             <svg
                               aria-hidden="true"
@@ -10475,7 +10483,7 @@ exports[`renders ./components/table/demo/head.md correctly 1`] = `
                           <span
                             aria-label="caret-down"
                             class="anticon anticon-caret-down ant-table-column-sorter-down active"
-                            role="img"
+                            role="presentation"
                           >
                             <svg
                               aria-hidden="true"
@@ -11086,6 +11094,7 @@ exports[`renders ./components/table/demo/multiple-sorter.md correctly 1`] = `
                     Name
                   </th>
                   <th
+                    aria-label="Chinese Score sortable"
                     class="ant-table-cell ant-table-column-has-sorters"
                     tabindex="0"
                   >
@@ -11106,7 +11115,7 @@ exports[`renders ./components/table/demo/multiple-sorter.md correctly 1`] = `
                           <span
                             aria-label="caret-up"
                             class="anticon anticon-caret-up ant-table-column-sorter-up"
-                            role="img"
+                            role="presentation"
                           >
                             <svg
                               aria-hidden="true"
@@ -11125,7 +11134,7 @@ exports[`renders ./components/table/demo/multiple-sorter.md correctly 1`] = `
                           <span
                             aria-label="caret-down"
                             class="anticon anticon-caret-down ant-table-column-sorter-down"
-                            role="img"
+                            role="presentation"
                           >
                             <svg
                               aria-hidden="true"
@@ -11146,6 +11155,7 @@ exports[`renders ./components/table/demo/multiple-sorter.md correctly 1`] = `
                     </div>
                   </th>
                   <th
+                    aria-label="Math Score sortable"
                     class="ant-table-cell ant-table-column-has-sorters"
                     tabindex="0"
                   >
@@ -11166,7 +11176,7 @@ exports[`renders ./components/table/demo/multiple-sorter.md correctly 1`] = `
                           <span
                             aria-label="caret-up"
                             class="anticon anticon-caret-up ant-table-column-sorter-up"
-                            role="img"
+                            role="presentation"
                           >
                             <svg
                               aria-hidden="true"
@@ -11185,7 +11195,7 @@ exports[`renders ./components/table/demo/multiple-sorter.md correctly 1`] = `
                           <span
                             aria-label="caret-down"
                             class="anticon anticon-caret-down ant-table-column-sorter-down"
-                            role="img"
+                            role="presentation"
                           >
                             <svg
                               aria-hidden="true"
@@ -11206,6 +11216,7 @@ exports[`renders ./components/table/demo/multiple-sorter.md correctly 1`] = `
                     </div>
                   </th>
                   <th
+                    aria-label="English Score sortable"
                     class="ant-table-cell ant-table-column-has-sorters"
                     tabindex="0"
                   >
@@ -11226,7 +11237,7 @@ exports[`renders ./components/table/demo/multiple-sorter.md correctly 1`] = `
                           <span
                             aria-label="caret-up"
                             class="anticon anticon-caret-up ant-table-column-sorter-up"
-                            role="img"
+                            role="presentation"
                           >
                             <svg
                               aria-hidden="true"
@@ -11245,7 +11256,7 @@ exports[`renders ./components/table/demo/multiple-sorter.md correctly 1`] = `
                           <span
                             aria-label="caret-down"
                             class="anticon anticon-caret-down ant-table-column-sorter-down"
-                            role="img"
+                            role="presentation"
                           >
                             <svg
                               aria-hidden="true"
@@ -15421,6 +15432,7 @@ Array [
                 >
                   <tr>
                     <th
+                      aria-label="Name sortable"
                       class="ant-table-cell ant-table-cell-ellipsis ant-table-column-has-sorters"
                       tabindex="0"
                     >
@@ -15447,7 +15459,7 @@ Array [
                                 <span
                                   aria-label="caret-up"
                                   class="anticon anticon-caret-up ant-table-column-sorter-up"
-                                  role="img"
+                                  role="presentation"
                                 >
                                   <svg
                                     aria-hidden="true"
@@ -15466,7 +15478,7 @@ Array [
                                 <span
                                   aria-label="caret-down"
                                   class="anticon anticon-caret-down ant-table-column-sorter-down"
-                                  role="img"
+                                  role="presentation"
                                 >
                                   <svg
                                     aria-hidden="true"
@@ -15514,6 +15526,7 @@ Array [
                       </div>
                     </th>
                     <th
+                      aria-label="Age sortable"
                       class="ant-table-cell ant-table-cell-ellipsis ant-table-column-has-sorters"
                       tabindex="0"
                     >
@@ -15534,7 +15547,7 @@ Array [
                             <span
                               aria-label="caret-up"
                               class="anticon anticon-caret-up ant-table-column-sorter-up"
-                              role="img"
+                              role="presentation"
                             >
                               <svg
                                 aria-hidden="true"
@@ -15553,7 +15566,7 @@ Array [
                             <span
                               aria-label="caret-down"
                               class="anticon anticon-caret-down ant-table-column-sorter-down"
-                              role="img"
+                              role="presentation"
                             >
                               <svg
                                 aria-hidden="true"
@@ -15574,6 +15587,7 @@ Array [
                       </div>
                     </th>
                     <th
+                      aria-label="Address sortable"
                       class="ant-table-cell ant-table-cell-ellipsis ant-table-column-has-sorters"
                       tabindex="0"
                     >
@@ -15600,7 +15614,7 @@ Array [
                                 <span
                                   aria-label="caret-up"
                                   class="anticon anticon-caret-up ant-table-column-sorter-up"
-                                  role="img"
+                                  role="presentation"
                                 >
                                   <svg
                                     aria-hidden="true"
@@ -15619,7 +15633,7 @@ Array [
                                 <span
                                   aria-label="caret-down"
                                   class="anticon anticon-caret-down ant-table-column-sorter-down"
-                                  role="img"
+                                  role="presentation"
                                 >
                                   <svg
                                     aria-hidden="true"
@@ -15903,6 +15917,7 @@ exports[`renders ./components/table/demo/resizable-column.md correctly 1`] = `
                     />
                   </th>
                   <th
+                    aria-label="Amount sortable"
                     class="ant-table-cell ant-table-column-has-sorters react-resizable"
                     tabindex="0"
                   >
@@ -15923,7 +15938,7 @@ exports[`renders ./components/table/demo/resizable-column.md correctly 1`] = `
                           <span
                             aria-label="caret-up"
                             class="anticon anticon-caret-up ant-table-column-sorter-up"
-                            role="img"
+                            role="presentation"
                           >
                             <svg
                               aria-hidden="true"
@@ -15942,7 +15957,7 @@ exports[`renders ./components/table/demo/resizable-column.md correctly 1`] = `
                           <span
                             aria-label="caret-down"
                             class="anticon anticon-caret-down ant-table-column-sorter-down"
-                            role="img"
+                            role="presentation"
                           >
                             <svg
                               aria-hidden="true"

components/table/__tests__/__snapshots__/empty.test.js.snap

@@ -349,7 +349,6 @@ exports[`Table renders empty table with fixed columns should work 1`] = `
                     <div
                       style="height: 0px; overflow: hidden;"
                     >
-                       
                     </div>
                   </td>
                   <td
@@ -358,7 +357,6 @@ exports[`Table renders empty table with fixed columns should work 1`] = `
                     <div
                       style="height: 0px; overflow: hidden;"
                     >
-                       
                     </div>
                   </td>
                   <td
@@ -367,7 +365,6 @@ exports[`Table renders empty table with fixed columns should work 1`] = `
                     <div
                       style="height: 0px; overflow: hidden;"
                     >
-                       
                     </div>
                   </td>
                   <td
@@ -376,7 +373,6 @@ exports[`Table renders empty table with fixed columns should work 1`] = `
                     <div
                       style="height: 0px; overflow: hidden;"
                     >
-                       
                     </div>
                   </td>
                   <td
@@ -385,7 +381,6 @@ exports[`Table renders empty table with fixed columns should work 1`] = `
                     <div
                       style="height: 0px; overflow: hidden;"
                     >
-                       
                     </div>
                   </td>
                   <td
@@ -394,7 +389,6 @@ exports[`Table renders empty table with fixed columns should work 1`] = `
                     <div
                       style="height: 0px; overflow: hidden;"
                     >
-                       
                     </div>
                   </td>
                   <td
@@ -403,7 +397,6 @@ exports[`Table renders empty table with fixed columns should work 1`] = `
                     <div
                       style="height: 0px; overflow: hidden;"
                     >
-                       
                     </div>
                   </td>
                   <td
@@ -412,7 +405,6 @@ exports[`Table renders empty table with fixed columns should work 1`] = `
                     <div
                       style="height: 0px; overflow: hidden;"
                     >
-                       
                     </div>
                   </td>
                   <td
@@ -421,7 +413,6 @@ exports[`Table renders empty table with fixed columns should work 1`] = `
                     <div
                       style="height: 0px; overflow: hidden;"
                     >
-                       
                     </div>
                   </td>
                   <td
@@ -430,7 +421,6 @@ exports[`Table renders empty table with fixed columns should work 1`] = `
                     <div
                       style="height: 0px; overflow: hidden;"
                     >
-                       
                     </div>
                   </td>
                   <td
@@ -439,7 +429,6 @@ exports[`Table renders empty table with fixed columns should work 1`] = `
                     <div
                       style="height: 0px; overflow: hidden;"
                     >
-                       
                     </div>
                   </td>
                 </tr>

components/table/hooks/useSorter.tsx

@@ -132,6 +132,7 @@ function injectSorter<RecordType>(
           className={classNames(`${prefixCls}-column-sorter-up`, {
             active: sorterOrder === ASCEND,
           })}
+          role="presentation"
         />
       );
       const downNode: React.ReactNode = sortDirections.includes(DESCEND) && (
@@ -139,6 +140,7 @@ function injectSorter<RecordType>(
           className={classNames(`${prefixCls}-column-sorter-down`, {
             active: sorterOrder === DESCEND,
           })}
+          role="presentation"
         />
       );
       const { cancelSort, triggerAsc, triggerDesc } = tableLocale || {};
@@ -210,6 +212,8 @@ function injectSorter<RecordType>(
             } else {
               cell['aria-sort'] = 'descending';
             }
+          } else {
+            cell['aria-label'] = `${renderColumnTitle(column.title, {})} sortable`;
           }
 
           cell.className = classNames(cell.className, `${prefixCls}-column-has-sorters`);

components/typography/Base/index.tsx

@@ -227,6 +227,7 @@ const Base = React.forwardRef((props: InternalBlockProps, ref: any) => {
   const [expanded, setExpanded] = React.useState(false);
   const [isJsEllipsis, setIsJsEllipsis] = React.useState(false);
   const [isNativeEllipsis, setIsNativeEllipsis] = React.useState(false);
+  const [isNativeVisible, setIsNativeVisible] = React.useState(true);
   const [enableEllipsis, ellipsisConfig] = useMergedConfig<EllipsisConfig>(ellipsis, {
     expandable: false,
   });
@@ -307,7 +308,31 @@ const Base = React.forwardRef((props: InternalBlockProps, ref: any) => {
         setIsNativeEllipsis(currentEllipsis);
       }
     }
-  }, [enableEllipsis, cssEllipsis, children, cssLineClamp]);
+  }, [enableEllipsis, cssEllipsis, children, cssLineClamp, isNativeVisible]);
+
+  // https://github.com/ant-design/ant-design/issues/36786
+  // Use IntersectionObserver to check if element is invisible
+  React.useEffect(() => {
+    const textEle = typographyRef.current;
+    if (
+      typeof IntersectionObserver === 'undefined' ||
+      !textEle ||
+      !cssEllipsis ||
+      !mergedEnableEllipsis
+    ) {
+      return;
+    }
+
+    /* eslint-disable-next-line compat/compat */
+    const observer = new IntersectionObserver(() => {
+      setIsNativeVisible(!!textEle.offsetParent);
+    });
+    observer.observe(textEle!);
+
+    return () => {
+      observer.disconnect();
+    };
+  }, [cssEllipsis, mergedEnableEllipsis]);
 
   // ========================== Tooltip ===========================
   let tooltipProps: TooltipProps = {};

components/typography/__tests__/__snapshots__/demo-extend.test.ts.snap

@@ -618,6 +618,57 @@ Array [
     </span>
     [After]
   </p>,
+  <div
+    style="display:none"
+  >
+    <span
+      aria-label="默认display none 样式的超长文字， 悬停tooltip失效了"
+      class="ant-typography ant-typography-ellipsis ant-typography-single-line"
+      style="width:100px"
+    >
+      默认display none 样式的超长文字， 悬停tooltip失效了
+      <span
+        aria-hidden="true"
+        style="position:fixed;display:block;left:0;top:0;z-index:-9999;visibility:hidden;pointer-events:none;word-break:keep-all;white-space:nowrap"
+      >
+        lg
+      </span>
+      <span
+        aria-hidden="true"
+        style="position:fixed;display:block;left:0;top:0;z-index:-9999;visibility:hidden;pointer-events:none;width:0;white-space:normal;margin:0;padding:0"
+      >
+        <span
+          aria-hidden="true"
+        >
+          ...
+        </span>
+      </span>
+    </span>
+    <div>
+      <div
+        class="ant-tooltip"
+        style="opacity:0"
+      >
+        <div
+          class="ant-tooltip-content"
+        >
+          <div
+            class="ant-tooltip-arrow"
+          >
+            <span
+              class="ant-tooltip-arrow-content"
+            />
+          </div>
+          <div
+            class="ant-tooltip-inner"
+            role="tooltip"
+          >
+            I am ellipsis now!
+          </div>
+        </div>
+      </div>
+    </div>
+  </div>,
 ]
 `;
 

components/typography/__tests__/__snapshots__/demo.test.js.snap

@@ -522,6 +522,33 @@ Array [
     </span>
     [After]
   </p>,
+  <div
+    style="display:none"
+  >
+    <span
+      aria-label="默认display none 样式的超长文字， 悬停tooltip失效了"
+      class="ant-typography ant-typography-ellipsis ant-typography-single-line"
+      style="width:100px"
+    >
+      默认display none 样式的超长文字， 悬停tooltip失效了
+      <span
+        aria-hidden="true"
+        style="position:fixed;display:block;left:0;top:0;z-index:-9999;visibility:hidden;pointer-events:none;word-break:keep-all;white-space:nowrap"
+      >
+        lg
+      </span>
+      <span
+        aria-hidden="true"
+        style="position:fixed;display:block;left:0;top:0;z-index:-9999;visibility:hidden;pointer-events:none;width:0;white-space:normal;margin:0;padding:0"
+      >
+        <span
+          aria-hidden="true"
+        >
+          ...
+        </span>
+      </span>
+    </span>
+  </div>,
 ]
 `;
 

components/typography/__tests__/ellipsis.test.js

@@ -1,5 +1,6 @@
 import { spyElementPrototypes } from 'rc-util/lib/test/domHook';
 import React from 'react';
+import { act } from 'react-dom/test-utils';
 import { fireEvent, render, sleep, triggerResize, waitFor } from '../../../tests/utils';
 import Base from '../Base';
 // eslint-disable-next-line no-unused-vars
@@ -14,6 +15,7 @@ describe('Typography.Ellipsis', () => {
   const LINE_STR_COUNT = 20;
   const errorSpy = jest.spyOn(console, 'error').mockImplementation(() => {});
   let mockRectSpy;
+  let getWidthTimes = 0;
 
   beforeAll(() => {
     mockRectSpy = spyElementPrototypes(HTMLElement, {
@@ -26,7 +28,10 @@ describe('Typography.Ellipsis', () => {
         },
       },
       offsetWidth: {
-        get: () => 100,
+        get: () => {
+          getWidthTimes += 1;
+          return 100;
+        },
       },
       getBoundingClientRect() {
         let html = this.innerHTML;
@@ -39,6 +44,7 @@ describe('Typography.Ellipsis', () => {
 
   afterEach(() => {
     errorSpy.mockReset();
+    getWidthTimes = 0;
   });
 
   afterAll(() => {
@@ -223,28 +229,70 @@ describe('Typography.Ellipsis', () => {
 
   it('should have custom expand style', async () => {
     const symbol = 'more';
-    const { container: wrapper } = render(
+    const { container } = render(
       <Base ellipsis={{ expandable: true, symbol }} component="p">
         {fullStr}
       </Base>,
     );
-    expect(wrapper.querySelector('.ant-typography-expand').textContent).toEqual('more');
+    expect(container.querySelector('.ant-typography-expand').textContent).toEqual('more');
   });
 
-  it('can use css ellipsis', () => {
+  describe('native css ellipsis', () => {
-    const { container: wrapper } = render(<Base ellipsis component="p" />);
+    it('can use css ellipsis', () => {
-    expect(wrapper.querySelectorAll('.ant-typography-ellipsis-single-line').length).toBeGreaterThan(
+      const { container } = render(<Base ellipsis component="p" />);
-      0,
+      expect(container.querySelector('.ant-typography-ellipsis-single-line')).toBeTruthy();
-    );
+    });
-  });
 
-  it('should calculate padding', () => {
+    // https://github.com/ant-design/ant-design/issues/36786
-    const { container: wrapper } = render(
+    it('Tooltip should recheck on parent visible change', () => {
-      <Base ellipsis component="p" style={{ paddingTop: '12px', paddingBottom: '12px' }} />,
+      const originIntersectionObserver = global.IntersectionObserver;
-    );
+
-    expect(wrapper.querySelectorAll('.ant-typography-ellipsis-single-line').length).toBeGreaterThan(
+      let elementChangeCallback;
-      0,
+      const observeFn = jest.fn();
-    );
+      const disconnectFn = jest.fn();
+
+      global.IntersectionObserver = class MockIntersectionObserver {
+        constructor(callback) {
+          elementChangeCallback = callback;
+        }
+
+        observe = observeFn;
+
+        disconnect = disconnectFn;
+      };
+
+      const { container, unmount } = render(<Base ellipsis component="p" />);
+
+      expect(observeFn).toHaveBeenCalled();
+
+      // Hide first
+      act(() => {
+        elementChangeCallback();
+      });
+
+      // Trigger visible should trigger recheck
+      getWidthTimes = 0;
+      Object.defineProperty(container.querySelector('.ant-typography'), 'offsetParent', {
+        get: () => document.body,
+      });
+      act(() => {
+        elementChangeCallback();
+      });
+
+      expect(getWidthTimes).toBeGreaterThan(0);
+
+      unmount();
+      expect(disconnectFn).toHaveBeenCalled();
+
+      global.IntersectionObserver = originIntersectionObserver;
+    });
+
+    it('should calculate padding', () => {
+      const { container } = render(
+        <Base ellipsis component="p" style={{ paddingTop: '12px', paddingBottom: '12px' }} />,
+      );
+      expect(container.querySelector('.ant-typography-ellipsis-single-line')).toBeTruthy();
+    });
   });
 
   describe('should tooltip support', () => {

components/typography/demo/ellipsis-debug.md

@@ -26,6 +26,13 @@ const App: React.FC = () => {
   const [copyable, setCopyable] = useState(false);
   const [editable, setEditable] = useState(false);
   const [expandable, setExpandable] = useState(false);
+  const [display, setDisplay] = useState('none');
+
+  React.useEffect(() => {
+    setTimeout(() => {
+      setDisplay('block');
+    }, 100);
+  }, []);
 
   return (
     <>
@@ -60,6 +67,12 @@ const App: React.FC = () => {
       <p>
         [Before]<Text ellipsis>not ellipsis</Text>[After]
       </p>
+
+      <div style={{ display }}>
+        <Text style={{ width: 100 }} ellipsis={{ tooltip: 'I am ellipsis now!' }}>
+          默认display none 样式的超长文字， 悬停tooltip失效了
+        </Text>
+      </div>
     </>
   );
 };

package.json

@@ -1,6 +1,6 @@
 {
   "name": "antd",
-  "version": "4.22.6",
+  "version": "4.22.7",
   "description": "An enterprise-class UI design language and React components implementation",
   "title": "Ant Design",
   "keywords": [
@@ -253,6 +253,7 @@
     "open": "^8.0.1",
     "prettier": "^2.3.2",
     "prettier-plugin-jsdoc": "^0.3.0",
+    "pretty-format": "^28.1.3",
     "pretty-quick": "^3.0.0",
     "qs": "^6.10.1",
     "rc-footer": "^0.6.6",

tests/setupAfterEnv.ts

@@ -1,4 +1,43 @@
 import { toHaveNoViolations } from 'jest-axe';
 import '@testing-library/jest-dom';
+import format, { plugins } from 'pretty-format';
+
+/**
+ * React 17 & 18 will have different behavior in some special cases:
+ *
+ * React 17:
+ *
+ * ```html
+ * <span> Hello World </span>
+ * ```
+ *
+ * React 18:
+ *
+ * ```html
+ * <span> Hello World </span>
+ * ```
+ *
+ * These diff is nothing important in front end but will break in snapshot diff.
+ */
+expect.addSnapshotSerializer({
+  test: element =>
+    typeof HTMLElement !== 'undefined' &&
+    (element instanceof HTMLElement ||
+      element instanceof DocumentFragment ||
+      element instanceof HTMLCollection ||
+      (Array.isArray(element) && element[0] instanceof HTMLElement)),
+  print: element => {
+    const htmlContent = format(element, {
+      plugins: [plugins.DOMCollection, plugins.DOMElement],
+    });
+
+    const filtered = htmlContent
+      .split(/[\n\r]+/)
+      .filter(line => line.trim())
+      .join('\n');
+
+    return filtered;
+  },
+});
 
 expect.extend(toHaveNoViolations);

tests/utils.tsx

@@ -41,7 +41,14 @@ export function renderHook<T>(func: () => T): { result: React.RefObject<T> } {
   return { result };
 }
 
-export { customRender as render };
+/**
+ * Pure render like `@testing-lib` render which will not wrap with StrictMode.
+ *
+ * Please only use with render times times of memo usage case.
+ */
+const pureRender = render;
+
+export { customRender as render, pureRender };
 
 export const triggerResize = (target: Element) => {
   const originGetBoundingClientRect = target.getBoundingClientRect;