test: migrate part of utils tests (#37155)

* test: migrate part of utils tests

* test: migrate part of utils tests

* test: migrate part of utils tests

components/_util/__tests__/easings.test.js → 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.js → 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.js → 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.js → 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();
-      mount(<TransButton ref={ref}>TransButton</TransButton>);
-      expect(typeof ref.current.focus).toBe('function');
-      expect(typeof ref.current.blur).toBe('function');
+      const ref = React.createRef<any>();
+      render(<TransButton ref={ref}>TransButton</TransButton>);
+      expect(typeof ref.current?.focus).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>);
-      wrapper.simulate('keyUp', { keyCode: KeyCode.ENTER });
-      expect(onClick).toHaveBeenCalled();
-      wrapper.simulate('keyDown', { keyCode: KeyCode.ENTER, preventDefault });
-      expect(preventDefault).toHaveBeenCalled();
+
+      const { container } = render(<TransButton onClick={onClick}>TransButton</TransButton>);
+
+      // callback should trigger
+      fireEvent.keyUp(container.querySelector('div')!, { keyCode: KeyCode.ENTER });
+      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.js → components/_util/__tests__/warning.test.ts

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

components/_util/__tests__/wave.test.js → 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('');
-    wrapper.find('button').getDOMNode().click();
+    expect(container.querySelector('button')?.className).toBe('');
+
+    container.querySelector('button')?.click();
+
     expect(
-      wrapper.find('button').getDOMNode().hasAttribute('ant-click-animating-without-extra-node'),
-    ).toBe(false);
-    wrapper.unmount();
+      container.querySelector('button')?.hasAttribute('ant-click-animating-without-extra-node'),
+    ).toBeFalsy();
+    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('');
-    wrapper.find('button').getDOMNode().click();
+    expect(container.querySelector('button')?.className).toBe('');
+    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;