test: fix all

Author: zombieJ

tests/Select.multiple.spec.js

@@ -1,12 +1,22 @@
 /* eslint-disable no-undef */
-import { render, fireEvent, within } from '@testing-library/react';
+import { render, fireEvent, within, screen } from '@testing-library/react';
 import { mount } from 'enzyme';
 import KeyCode from '@rc-component/util/lib/KeyCode';
 import React from 'react';
 import TreeSelect, { TreeNode } from '../src';
 import focusTest from './shared/focusTest';
+import { selectNode, clearSelection, search, expectOpen, triggerOpen } from './util';
 
 describe('TreeSelect.multiple', () => {
+  beforeEach(() => {
+    jest.useFakeTimers();
+  });
+
+  afterEach(() => {
+    jest.clearAllTimers();
+    jest.useRealTimers();
+  });
+
   focusTest(true);
 
   const treeData = [
@@ -129,14 +139,29 @@ describe('TreeSelect.multiple', () => {
   });
 
   it('do not open tree when close button click', () => {
-    const wrapper = mount(createSelect());
-    wrapper.openSelect();
-    wrapper.selectNode(0);
-    wrapper.selectNode(1);
-    wrapper.openSelect();
-    wrapper.clearSelection(0);
-    expect(wrapper.isOpen()).toBeFalsy();
-    expect(wrapper.getSelection()).toHaveLength(1);
+    const { container } = render(createSelect());
+
+    // Open the select dropdown
+    triggerOpen(container);
+
+    // Select two nodes
+    selectNode(0);
+    selectNode(1);
+
+    // Check selections exist
+    expect(container.querySelectorAll('.rc-tree-select-selection-item')).toHaveLength(2);
+
+    // Open again to ensure dropdown is open
+    triggerOpen(container);
+
+    // Clear one selection - this should NOT open the dropdown
+    clearSelection(container, 0);
+
+    // Check that only one selection remains
+    expect(container.querySelectorAll('.rc-tree-select-selection-item')).toHaveLength(1);
+
+    // Check that dropdown is closed after clearing
+    expectOpen(container, false);
   });
 
   describe('maxTagCount', () => {
@@ -239,8 +264,8 @@ describe('TreeSelect.multiple', () => {
   // https://github.com/ant-design/ant-design/issues/12315
   it('select searched node', () => {
     const onChange = jest.fn();
-    const wrapper = mount(
-      <TreeSelect value={['leaf1']} multiple onChange={onChange}>
+    const { container } = render(
+      <TreeSelect value={['leaf1']} multiple onChange={onChange} open>
         <TreeNode value="parent 1" title="parent 1" key="0-1">
           <TreeNode value="parent 1-0" title="parent 1-0" key="0-1-1">
             <TreeNode value="leaf1" title="my leaf" key="random" />
@@ -252,8 +277,12 @@ describe('TreeSelect.multiple', () => {
       </TreeSelect>,
     );
 
-    wrapper.search('sss');
-    wrapper.selectNode(2);
+    // Search for 'sss'
+    search(container, 'sss');
+
+    // Find and click on the searched node - use selectNode from util with correct index
+    selectNode(2); // The sss node should be at index 2 after search filtering
+
     expect(onChange).toHaveBeenCalledWith(['leaf1', 'sss'], expect.anything(), expect.anything());
   });
 

tests/Select.tree.spec.js

@@ -1,8 +1,10 @@
 /* eslint-disable no-undef, react/no-multi-comp, no-console */
 import React from 'react';
-import { mount } from 'enzyme';
+import { render, fireEvent, act } from '@testing-library/react';
 import { resetWarned } from '@rc-component/util/lib/warning';
 import TreeSelect, { TreeNode as SelectNode } from '../src';
+import { selectNode, triggerOpen, expectOpen } from './util';
+import { mount } from 'enzyme';
 
 describe('TreeSelect.tree', () => {
   const createSelect = props => (
@@ -71,7 +73,7 @@ describe('TreeSelect.tree', () => {
   it('warning if node key are not same as value', () => {
     resetWarned();
     const spy = jest.spyOn(console, 'error').mockImplementation(() => {});
-    mount(<TreeSelect treeData={[{ title: 'little', value: 'ttt', key: 'little' }]} />);
+    render(<TreeSelect treeData={[{ title: 'little', value: 'ttt', key: 'little' }]} />);
     expect(spy).toHaveBeenCalledWith(
       'Warning: `key` or `value` with TreeNode must be the same or you can remove one of them. key: little, value: ttt.',
     );
@@ -81,15 +83,15 @@ describe('TreeSelect.tree', () => {
   it('warning if node undefined value', () => {
     resetWarned();
     const spy = jest.spyOn(console, 'error').mockImplementation(() => {});
-    mount(<TreeSelect treeData={[{ title: 'little' }]} />);
+    render(<TreeSelect treeData={[{ title: 'little' }]} />);
     expect(spy).toHaveBeenCalledWith('Warning: TreeNode `value` is invalidate: undefined');
     spy.mockRestore();
   });
 
   it('warning if node has same value', () => {
     resetWarned();
     const spy = jest.spyOn(console, 'error').mockImplementation(() => {});
-    mount(
+    render(
       <TreeSelect
         treeData={[
           { title: 'little', value: 'ttt' },
@@ -103,13 +105,14 @@ describe('TreeSelect.tree', () => {
 
   // https://github.com/ant-design/ant-design/issues/14597
   it('empty string is also a value', () => {
-    const wrapper = mount(
+    const { container } = render(
       <TreeSelect placeholder="Please select" value="">
         <SelectNode key="" value="" title="empty string" />
       </TreeSelect>,
     );
 
-    expect(wrapper.getSelection(0).text()).toEqual('empty string');
+    const selectionContent = container.querySelector('.rc-tree-select-content-value');
+    expect(selectionContent?.textContent).toEqual('empty string');
   });
 
   describe('treeNodeLabelProp', () => {
@@ -121,7 +124,7 @@ describe('TreeSelect.tree', () => {
       },
     ].forEach(({ name, ...restProps }) => {
       it(name, () => {
-        const wrapper = mount(
+        const { container } = render(
           <TreeSelect
             open
             treeDefaultExpandAll
@@ -131,31 +134,35 @@ describe('TreeSelect.tree', () => {
           />,
         );
 
-        expect(wrapper.find('.rc-tree-select-tree-title').text()).toEqual('a light');
-        expect(wrapper.find('.rc-tree-select-selection-item').text()).toEqual('Light');
+        expect(container.querySelector('.rc-tree-select-tree-title')?.textContent).toEqual(
+          'a light',
+        );
+        expect(container.querySelector('.rc-tree-select-content-value')?.textContent).toEqual(
+          'Light',
+        );
       });
     });
   });
 
   it('Node icon', () => {
-    const wrapper = mount(
+    const { container } = render(
       <TreeSelect open>
         <SelectNode value="little" title="Little" icon={<span className="bamboo-light" />} />
       </TreeSelect>,
     );
 
-    expect(wrapper.exists('.bamboo-light')).toBeTruthy();
+    expect(container.querySelector('.bamboo-light')).toBeTruthy();
   });
 
   it('dynamic with filter should not show expand icon', () => {
-    const wrapper = mount(
+    const { container } = render(
       <TreeSelect
         open
         treeData={[{ label: 'Bamboo', value: 'bamboo', isLeaf: false }]}
         searchValue="boo"
       />,
     );
 
-    expect(wrapper.exists('.rc-tree-select-tree-icon__open')).toBeFalsy();
+    expect(container.querySelector('.rc-tree-select-tree-icon__open')).toBeFalsy();
   });
 });

tests/setup.js

@@ -40,7 +40,7 @@ Object.assign(Enzyme.ReactWrapper.prototype, {
     return this.find('.rc-tree-select-clear').first().simulate('mouseDown');
   },
   search(text) {
-    this.find('input.rc-tree-select-selection-search-input').simulate('change', {
+    this.find('input.rc-tree-select-input').simulate('change', {
       target: { value: text },
     });
   },