test: move test cases to testing lib for Spin (#36317)

* test: move test cases to testing lib for Spin

* fix: types

* fix: lint

components/spin/__tests__/delay.test.js → components/spin/__tests__/delay.test.tsx

@@ -1,4 +1,3 @@
-import { mount } from 'enzyme';
 import React from 'react';
 // eslint-disable-next-line import/no-named-as-default
 import { render } from '@testing-library/react';
@@ -7,33 +6,41 @@ import Spin from '..';
 import { sleep } from '../../../tests/utils';
 
 jest.mock('lodash/debounce');
-debounce.mockImplementation(jest.requireActual('lodash/debounce'));
+(debounce as jest.Mock).mockImplementation((...args: any[]) =>
+  jest.requireActual('lodash/debounce')(...args),
+);
 
 describe('delay spinning', () => {
   it("should render with delay when it's mounted with spinning=true and delay", () => {
-    const wrapper = mount(<Spin spinning delay={500} />);
-    expect(wrapper.find('.ant-spin').at(0).hasClass('ant-spin-spinning')).toEqual(false);
+    const { container } = render(<Spin spinning delay={500} />);
+    expect(container.querySelector('.ant-spin')?.classList.contains('ant-spin-spinning')).toEqual(
+      false,
+    );
   });
 
   it('should render when delay is init set', async () => {
-    const wrapper = mount(<Spin spinning delay={100} />);
+    const { container } = render(<Spin spinning delay={100} />);
 
-    expect(wrapper.find('.ant-spin').at(0).hasClass('ant-spin-spinning')).toEqual(false);
+    expect(container.querySelector('.ant-spin')?.classList.contains('ant-spin-spinning')).toEqual(
+      false,
+    );
 
     // use await not jest.runAllTimers()
     // because of https://github.com/facebook/jest/issues/3465
     await sleep(500);
-    wrapper.update();
 
-    expect(wrapper.find('.ant-spin').at(0).hasClass('ant-spin-spinning')).toEqual(true);
+    expect(container.querySelector('.ant-spin')?.classList.contains('ant-spin-spinning')).toEqual(
+      true,
+    );
   });
 
   it('should cancel debounce function when unmount', async () => {
     const debouncedFn = jest.fn();
     const cancel = jest.fn();
-    debouncedFn.cancel = cancel;
-    debounce.mockReturnValueOnce(debouncedFn);
+    (debouncedFn as any).cancel = cancel;
+    (debounce as jest.Mock).mockReturnValueOnce(debouncedFn);
     const { unmount } = render(<Spin spinning delay={100} />);
+
     expect(cancel).not.toHaveBeenCalled();
     unmount();
     expect(cancel).toHaveBeenCalled();

components/spin/__tests__/index.test.js → components/spin/__tests__/index.test.tsx

@@ -1,4 +1,3 @@
-import { mount } from 'enzyme';
 import React from 'react';
 // eslint-disable-next-line import/no-named-as-default
 import { render } from '@testing-library/react';
@@ -11,19 +10,21 @@ describe('Spin', () => {
   rtlTest(Spin);
 
   it('should only affect the spin element when set style to a nested <Spin>xx</Spin>', () => {
-    const wrapper = mount(
+    const { container } = render(
       <Spin style={{ background: 'red' }}>
         <div>content</div>
       </Spin>,
     );
-    expect(wrapper.find('.ant-spin-nested-loading').at(0).prop('style')).toBeFalsy();
-    expect(wrapper.find('.ant-spin').at(0).prop('style').background).toBe('red');
+    expect((container.querySelector('.ant-spin-nested-loading')! as HTMLElement).style.length).toBe(
+      0,
+    );
+    expect((container.querySelector('.ant-spin')! as HTMLElement).style.background).toBe('red');
   });
 
   it("should render custom indicator when it's set", () => {
     const customIndicator = <div className="custom-indicator" />;
-    const wrapper = mount(<Spin indicator={customIndicator} />);
-    expect(wrapper.render()).toMatchSnapshot();
+    const { asFragment } = render(<Spin indicator={customIndicator} />);
+    expect(asFragment().firstChild).toMatchSnapshot();
   });
 
   it('should be controlled by spinning', () => {
@@ -34,19 +35,19 @@ describe('Spin', () => {
   });
 
   it('if indicator set null should not be render default indicator', () => {
-    const wrapper = mount(<Spin indicator={null} />);
-    expect(wrapper.render()).toMatchSnapshot();
+    const { asFragment } = render(<Spin indicator={null as any} />);
+    expect(asFragment().firstChild).toMatchSnapshot();
   });
 
   it('should support static method Spin.setDefaultIndicator', () => {
     Spin.setDefaultIndicator(<em className="custom-spinner" />);
-    const wrapper = mount(<Spin />);
-    expect(wrapper.render()).toMatchSnapshot();
+    const { asFragment } = render(<Spin />);
+    expect(asFragment().firstChild).toMatchSnapshot();
     Spin.setDefaultIndicator(null);
   });
 
   it('should render 0', () => {
-    const wrapper = mount(<Spin>{0}</Spin>);
-    expect(wrapper.find('.ant-spin-container').at(0).text()).toBe('0');
+    const { container } = render(<Spin>{0}</Spin>);
+    expect(container.querySelector('.ant-spin-container')?.textContent).toBe('0');
   });
 });