feat: add-testing-lib (#35626)

components/select/__tests__/index.test.js

@@ -1,6 +1,6 @@
 import React from 'react';
 import { act } from 'react-dom/test-utils';
-import { mount } from 'enzyme';
+import { render, fireEvent } from '../../../tests/utils';
 import Select from '..';
 import Icon from '../../icon';
 import focusTest from '../../../tests/shared/focusTest';
@@ -14,12 +14,11 @@ describe('Select', () => {
   mountTest(Select);
   rtlTest(Select);
 
-  function toggleOpen(wrapper) {
+  function toggleOpen(container) {
     act(() => {
-      wrapper.find('.ant-select-selector').simulate('mousedown');
+      fireEvent.mouseDown(container.querySelector('.ant-select-selector'));
       jest.runAllTimers();
     });
-    wrapper.update();
   }
 
   beforeEach(() => {
@@ -31,73 +30,74 @@ describe('Select', () => {
   });
 
   it('should have default notFoundContent', () => {
-    const wrapper = mount(<Select mode="multiple" />);
+    const { container } = render(<Select mode="multiple" />);
-    toggleOpen(wrapper);
+    toggleOpen(container);
-    expect(wrapper.find('.ant-select-item-option').length).toBeFalsy();
+    expect(container.querySelectorAll('.ant-select-item-option').length).toBe(0);
-    expect(wrapper.find('.ant-empty').length).toBeTruthy();
+    expect(container.querySelectorAll('.ant-empty').length).toBeTruthy();
   });
 
   it('should support set notFoundContent to null', () => {
-    const wrapper = mount(<Select mode="multiple" notFoundContent={null} />);
+    const { container } = render(<Select mode="multiple" notFoundContent={null} />);
-    toggleOpen(wrapper);
+    toggleOpen(container);
-    const dropdownWrapper = mount(wrapper.find('Trigger').instance().getComponent());
+    expect(container.querySelectorAll('.ant-empty').length).toBe(0);
-    expect(dropdownWrapper.find('MenuItem').length).toBe(0);
   });
 
   it('should not have default notFoundContent when mode is combobox', () => {
-    const wrapper = mount(<Select mode={Select.SECRET_COMBOBOX_MODE_DO_NOT_USE} />);
+    const { container } = render(<Select mode={Select.SECRET_COMBOBOX_MODE_DO_NOT_USE} />);
-    toggleOpen(wrapper);
+    toggleOpen(container);
-    const dropdownWrapper = mount(wrapper.find('Trigger').instance().getComponent());
+    expect(container.querySelector('.ant-empty')).toBeFalsy();
-    expect(dropdownWrapper.find('MenuItem').length).toBe(0);
   });
 
   it('should not have notFoundContent when mode is combobox and notFoundContent is set', () => {
-    const wrapper = mount(
+    const { container } = render(
       <Select mode={Select.SECRET_COMBOBOX_MODE_DO_NOT_USE} notFoundContent="not at all" />,
     );
-    toggleOpen(wrapper);
+    toggleOpen(container);
-    const dropdownWrapper = wrapper.find('Trigger');
+    expect(container.querySelector('.ant-select-item-option')).toBeFalsy();
-    expect(dropdownWrapper.find('.ant-select-item-option').length).toBeFalsy();
+    expect(container.querySelector('.ant-select-item-empty')).toHaveTextContent('not at all');
-    expect(dropdownWrapper.find('.ant-select-item-empty').at(0).text()).toBe('not at all');
   });
 
   it('should be controlled by open prop', () => {
     const onDropdownVisibleChange = jest.fn();
-    const wrapper = mount(
+    const { container, rerender } = render(
       <Select open onDropdownVisibleChange={onDropdownVisibleChange}>
         <Option value="1">1</Option>
       </Select>,
     );
-    let dropdownWrapper = wrapper.find('Trigger');
+    expect(container.querySelectorAll('.ant-select-dropdown').length).toBe(1);
-    expect(dropdownWrapper.prop('popupVisible')).toBe(true);
+    toggleOpen(container);
-    toggleOpen(wrapper);
     expect(onDropdownVisibleChange).toHaveBeenLastCalledWith(false);
-    expect(dropdownWrapper.prop('popupVisible')).toBe(true);
+    expect(container.querySelectorAll('.ant-select-dropdown').length).toBe(1);
 
-    wrapper.setProps({ open: false });
+    rerender(
-    dropdownWrapper = wrapper.find('Trigger');
+      <Select open={false} onDropdownVisibleChange={onDropdownVisibleChange}>
-    expect(dropdownWrapper.prop('popupVisible')).toBe(false);
+        <Option value="1">1</Option>
-    toggleOpen(wrapper);
+      </Select>,
+    );
+    expect(container.querySelectorAll('.ant-select-dropdown').length).toBe(1); // FIXME
+
+    toggleOpen(container);
     expect(onDropdownVisibleChange).toHaveBeenLastCalledWith(true);
-    expect(dropdownWrapper.prop('popupVisible')).toBe(false);
+    expect(container.querySelectorAll('.ant-select-dropdown').length).toBe(1);
   });
 
   it('should show search icon when showSearch and open', () => {
-    const wrapper = mount(
+    jest.useFakeTimers();
+    const { container } = render(
       <Select showSearch>
         <Option value="1">1</Option>
       </Select>,
     );
-    expect(wrapper.find('.anticon-down').length).toBe(1);
+    expect(container.querySelectorAll('.anticon-down').length).toBe(1);
-    expect(wrapper.find('.anticon-search').length).toBe(0);
+    expect(container.querySelectorAll('.anticon-search').length).toBe(0);
-    wrapper.setProps({ open: true });
+    toggleOpen(container);
-    expect(wrapper.find('.anticon-down').length).toBe(0);
+    expect(container.querySelectorAll('.anticon-down').length).toBe(0);
-    expect(wrapper.find('.anticon-search').length).toBe(1);
+    expect(container.querySelectorAll('.anticon-search').length).toBe(1);
   });
-
+  //
   describe('Select Custom Icons', () => {
     it('should support customized icons', () => {
-      const wrapper = mount(
+      const { rerender, asFragment } = render(
         <Select
           removeIcon={<Icon type="close" />}
           clearIcon={<Icon type="close" />}
@@ -106,20 +106,29 @@ describe('Select', () => {
           <Option value="1">1</Option>
         </Select>,
       );
-      wrapper.setProps({ count: 10 });
+      rerender(
+        <Select
+          count={10}
+          removeIcon={<Icon type="close" />}
+          clearIcon={<Icon type="close" />}
+          menuItemSelectedIcon={<Icon type="close" />}
+        >
+          <Option value="1">1</Option>
+        </Select>,
+      );
       jest.runAllTimers();
-      expect(wrapper.render()).toMatchSnapshot();
+      expect(asFragment().firstChild).toMatchSnapshot();
     });
   });
 
   describe('Deprecated', () => {
     it('should ignore mode="combobox"', () => {
-      const wrapper = mount(
+      const { asFragment } = render(
         <Select mode="combobox">
           <Option value="1">1</Option>
         </Select>,
       );
-      expect(wrapper.render()).toMatchSnapshot();
+      expect(asFragment().firstChild).toMatchSnapshot();
     });
   });
 });