test: update test cases to testing-lib (#35056)

components/form/__tests__/list.test.js

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

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

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

components/input/__tests__/index.test.tsx

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

components/input/__tests__/textarea.test.js

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

components/radio/__tests__/group.test.js

@@ -1,5 +1,6 @@
 import React from 'react';
 import { mount, render } from 'enzyme';
+import { render as testLibRender } from '@testing-library/react';
 import Radio from '..';
 
 describe('Radio Group', () => {
@@ -151,7 +152,7 @@ describe('Radio Group', () => {
 
   it('should forward ref', () => {
     let radioGroupRef;
-    const wrapper = mount(
+    const { container } = testLibRender(
       createRadioGroupByOption({
         ref: ref => {
           radioGroupRef = ref;
@@ -159,18 +160,18 @@ describe('Radio Group', () => {
       }),
     );
 
-    expect(radioGroupRef).toBe(wrapper.children().getDOMNode());
+    expect(radioGroupRef).toBe(container.querySelector('.ant-radio-group'));
   });
 
   it('should support data-* or aria-* props', () => {
-    const wrapper = mount(
+    const { container } = testLibRender(
       createRadioGroup({
         'data-radio-group-id': 'radio-group-id',
         'aria-label': 'radio-group',
       }),
     );
-    expect(wrapper.getDOMNode().getAttribute('data-radio-group-id')).toBe('radio-group-id');
+    expect(container.firstChild.getAttribute('data-radio-group-id')).toBe('radio-group-id');
-    expect(wrapper.getDOMNode().getAttribute('aria-label')).toBe('radio-group');
+    expect(container.firstChild.getAttribute('aria-label')).toBe('radio-group');
   });
 
   it('Radio type should not be override', () => {

components/radio/__tests__/radio-button.test.js

@@ -1,5 +1,6 @@
 import React from 'react';
 import { mount, render } from 'enzyme';
+import { render as testLibRender } from '@testing-library/react';
 import Radio, { Button } from '..';
 import focusTest from '../../../tests/shared/focusTest';
 import mountTest from '../../../tests/shared/mountTest';
@@ -162,7 +163,7 @@ describe('Radio Group', () => {
 
   it('should forward ref', () => {
     let radioGroupRef;
-    const wrapper = mount(
+    const { container } = testLibRender(
       createRadioGroup({
         ref: ref => {
           radioGroupRef = ref;
@@ -170,18 +171,18 @@ describe('Radio Group', () => {
       }),
     );
 
-    expect(radioGroupRef).toBe(wrapper.children().getDOMNode());
+    expect(radioGroupRef).toBe(container.querySelector('.ant-radio-group'));
   });
 
   it('should support data-* or aria-* props', () => {
-    const wrapper = mount(
+    const { container } = testLibRender(
       createRadioGroup({
         'data-radio-group-id': 'radio-group-id',
         'aria-label': 'radio-group',
       }),
     );
-    expect(wrapper.getDOMNode().getAttribute('data-radio-group-id')).toBe('radio-group-id');
+    expect(container.firstChild.getAttribute('data-radio-group-id')).toBe('radio-group-id');
-    expect(wrapper.getDOMNode().getAttribute('aria-label')).toBe('radio-group');
+    expect(container.firstChild.getAttribute('aria-label')).toBe('radio-group');
   });
 
   it('Radio type should not be override', () => {

components/upload/__tests__/uploadlist.test.js

@@ -1,6 +1,7 @@
 import React from 'react';
 import { act } from 'react-dom/test-utils';
 import { mount } from 'enzyme';
+import { fireEvent, render } from '@testing-library/react';
 import Upload from '..';
 import UploadList from '../UploadList';
 import Form from '../../form';
@@ -703,23 +704,23 @@ describe('Upload List', () => {
       );
     };
 
-    const wrapper = mount(<TestForm />);
+    const { container, unmount } = render(<TestForm />);
 
-    wrapper.find(Form).simulate('submit');
+    fireEvent.submit(container.querySelector('form'));
     await sleep();
     expect(formRef.getFieldError(['file'])).toEqual(['file required']);
 
-    wrapper.find('input').simulate('change', {
+    fireEvent.change(container.querySelector('input'), {
       target: {
         files: [{ name: 'foo.png' }],
       },
     });
 
-    wrapper.find(Form).simulate('submit');
+    fireEvent.submit(container.querySelector('form'));
     await sleep();
     expect(formRef.getFieldError(['file'])).toEqual([]);
 
-    wrapper.unmount();
+    unmount();
   });
 
   it('return when prop onPreview not exists', () => {

tests/shared/accessibilityTest.tsx

@@ -1,14 +1,14 @@
 import React from 'react';
-import { mount } from 'enzyme';
 import { axe } from 'jest-axe';
+import { render } from '@testing-library/react';
 
 // eslint-disable-next-line jest/no-export
 export default function accessibilityTest(Component: React.ComponentType) {
   describe(`accessibility`, () => {
     it(`component does not have any violations`, async () => {
       jest.useRealTimers();
-      const wrapper = mount(<Component />);
+      const { container } = render(<Component />);
-      const results = await axe(wrapper.getDOMNode());
+      const results = await axe(container);
       expect(results).toHaveNoViolations();
     });
   });