test: replaced with testing lib (#1036)

* fix: update ref * test: update testcase * test: part of test * test: part of test * test: part of test * test: part of test * test: part of test * test: part of test * test: part of test * test: part of test * test: part of test * test: part of test * test: part of test * test: part of test * test: part of test * test: part of test * test: part of test * test: part of test * test: part of test * chore: rollback * chore: rollback * test: fix test case * test: update snapshot
react-component · Apr 11, 2024 · 1fdcb7a · 1fdcb7a
1 parent 61628c5
commit 1fdcb7a
Show file tree

Hide file tree

Showing 32 changed files with 1,303 additions and 1,240 deletions.
diff --git a/jest.config.js b/jest.config.js
diff --git a/package.json b/package.json
@@ -46,7 +46,7 @@
   },
   "dependencies": {
     "@babel/runtime": "^7.10.1",
-    "@rc-component/trigger": "^2.0.0",
+    "@rc-component/trigger": "^2.1.1",
     "classnames": "2.x",
     "rc-motion": "^2.0.1",
     "rc-overflow": "^1.3.1",
@@ -55,17 +55,13 @@
   },
   "devDependencies": {
     "@testing-library/jest-dom": "^5.16.5",
-    "@testing-library/react": "^12.1.5",
-    "@types/enzyme": "^3.10.9",
+    "@testing-library/react": "^13.0.0",
     "@types/jest": "^26.0.24",
     "@types/react": "^18.2.45",
     "@types/react-dom": "^18.2.18",
     "babel-jest": "^29.6.1",
     "cross-env": "^7.0.0",
     "dumi": "^2.2.13",
-    "enzyme": "^3.3.0",
-    "enzyme-adapter-react-16": "^1.15.7",
-    "enzyme-to-json": "^3.4.0",
     "eslint": "^8.55.0",
     "eslint-plugin-jest": "^27.6.0",
     "eslint-plugin-unicorn": "^50.0.1",
@@ -77,6 +73,8 @@
     "querystring": "^0.2.1",
     "rc-dialog": "^9.0.0",
     "rc-test": "^7.0.9",
+    "react": "^18.2.0",
+    "react-dom": "^18.2.0",
     "typescript": "^5.2.2"
   }
 }
diff --git a/tests/Accessibility.test.tsx b/tests/Accessibility.test.tsx
@@ -1,8 +1,8 @@
-import { mount } from 'enzyme';
 import * as React from 'react';
 import KeyCode from 'rc-util/lib/KeyCode';
 import Select from '../src';
-import { injectRunAllTimers, expectOpen } from './utils/common';
+import { injectRunAllTimers, expectOpen, keyDown } from './utils/common';
+import { fireEvent, render } from '@testing-library/react';
 
 describe('Select.Accessibility', () => {
   injectRunAllTimers(jest);
@@ -17,17 +17,13 @@ describe('Select.Accessibility', () => {
 
   it('pass aria info to internal input', () => {
     const MySelect = Select as any;
-    const wrapper = mount(<MySelect aria-label="light" data-attr="bamboo" useless="2333" />);
-    expect(wrapper.find('input').props()).toEqual(
-      expect.objectContaining({
-        'aria-label': 'light',
-      }),
-    );
+    const { container } = render(<MySelect aria-label="light" data-attr="bamboo" useless="2333" />);
+    expect(container.querySelector('input')!.getAttribute('aria-label')).toEqual('light');
   });
 
   // https://github.com/ant-design/ant-design/issues/31850
   it('active index should keep', () => {
-    const wrapper = mount(
+    const { container } = render(
       <Select
         showSearch
         options={[
@@ -48,25 +44,27 @@ describe('Select.Accessibility', () => {
     );
 
     // First Match
-    wrapper.find('input').simulate('change', { target: { value: 'b' } });
+    fireEvent.change(container.querySelector('input')!, { target: { value: 'b' } });
     jest.runAllTimers();
 
-    expectOpen(wrapper);
+    expectOpen(container);
     expect(
-      wrapper.find('.rc-select-item-option-active .rc-select-item-option-content').text(),
+      document.querySelector('.rc-select-item-option-active .rc-select-item-option-content')
+        .textContent,
     ).toEqual('Bamboo');
 
-    wrapper.find('input').simulate('keyDown', { which: KeyCode.ENTER });
-    expectOpen(wrapper, false);
+    keyDown(container.querySelector('input')!, KeyCode.ENTER);
+    expectOpen(container, false);
 
     // Next Match
-    wrapper.find('input').simulate('change', { target: { value: '' } });
-    wrapper.find('input').simulate('change', { target: { value: 'g' } });
+    fireEvent.change(container.querySelector('input')!, { target: { value: '' } });
+    fireEvent.change(container.querySelector('input')!, { target: { value: 'g' } });
     jest.runAllTimers();
 
-    expectOpen(wrapper);
+    expectOpen(container);
     expect(
-      wrapper.find('.rc-select-item-option-active .rc-select-item-option-content').text(),
+      document.querySelector('.rc-select-item-option-active .rc-select-item-option-content')!
+        .textContent,
     ).toEqual('Light');
   });
 });
diff --git a/tests/BaseSelect.test.tsx b/tests/BaseSelect.test.tsx
@@ -1,5 +1,5 @@
 import type { OptionListProps, RefOptionListProps } from '@/OptionList';
-import { fireEvent, render } from '@testing-library/react';
+import { act, fireEvent, render } from '@testing-library/react';
 import { forwardRef } from 'react';
 import BaseSelect from '../src/BaseSelect';
 
@@ -34,6 +34,7 @@ describe('BaseSelect', () => {
     fireEvent.click(container.querySelector('a.trigger'));
     expect(container.querySelector('div.rc-select-dropdown-hidden')).toBeTruthy();
   });
+
   it('customized inputElement style should includes position: absolute', () => {
     jest.useFakeTimers();
     const { container } = render(
@@ -50,7 +51,9 @@ describe('BaseSelect', () => {
     );
     expect(container.querySelector('div.rc-select')).toBeTruthy();
     fireEvent.focus(container.querySelector('div.rc-select'));
-    jest.runAllTimers();
+    act(() => {
+      jest.runAllTimers();
+    });
     expect(
       getComputedStyle(container.querySelector(`span[aria-live=polite]`)).getPropertyValue(
         'position',