test: Move enzyme to testing lib

package.json

@@ -64,7 +64,6 @@
     "@rc-component/np": "^1.0.3",
     "@testing-library/jest-dom": "^6.4.0",
     "@testing-library/react": "^12.1.5",
-    "@types/enzyme": "^3.10.5",
     "@types/jest": "^29.5.0",
     "@types/react": "^18.0.28",
     "@types/react-dom": "^18.0.5",
@@ -75,9 +74,6 @@
     "cheerio": "1.0.0-rc.12",
     "cross-env": "^7.0.0",
     "dumi": "^2.1.3",
-    "enzyme": "^3.1.0",
-    "enzyme-adapter-react-16": "^1.0.1",
-    "enzyme-to-json": "^3.1.2",
     "eslint": "^8.54.0",
     "eslint-plugin-jest": "^28.2.0",
     "eslint-plugin-unicorn": "^56.0.0",

tests/Cell.spec.tsx

@@ -1,5 +1,5 @@
-import { mount } from 'enzyme';
 import React from 'react';
+import { render, fireEvent } from '@testing-library/react';
 import Table from '../src';
 
 describe('Table.Cell', () => {
@@ -34,11 +34,11 @@ describe('Table.Cell', () => {
       );
     };
 
-    const wrapper = mount(<Demo />);
+    const { getByRole } = render(<Demo />);
     reRenderTime = 0;
 
     for (let i = 0; i < 100; i += 1) {
-      wrapper.find('button').simulate('click');
+      fireEvent.click(getByRole('button'));
       expect(reRenderTime).toEqual(0);
     }
   });
@@ -55,14 +55,15 @@ describe('Table.Cell', () => {
       },
     ];
 
-    const wrapper = mount(<Table data={[{ key: 'light' }]} columns={getColumns()} />);
-    expect(wrapper.find('.rc-table-tbody .rc-table-cell').hasClass('test')).toBeFalsy();
+    const { container, rerender } = render(
+      <Table data={[{ key: 'light' }]} columns={getColumns()} />,
+    );
+    const cellEl = container.querySelector('.rc-table-tbody .rc-table-cell');
+    expect(cellEl).not.toHaveClass('test');
 
     // Update className should re-render
-    wrapper.setProps({
-      columns: getColumns({ className: 'test' }),
-    });
-    expect(wrapper.find('.rc-table-tbody .rc-table-cell').hasClass('test')).toBeTruthy();
+    rerender(<Table data={[{ key: 'light' }]} columns={getColumns({ className: 'test' })} />);
+    expect(container.querySelector('.rc-table-tbody .rc-table-cell')).toHaveClass('test');
   });
 
   it('closure should work on render', () => {
@@ -95,15 +96,16 @@ describe('Table.Cell', () => {
       }
     }
 
-    const wrapper = mount(<Demo />);
-    expect(wrapper.find('.rc-table-tbody .rc-table-cell').text()).toEqual('1');
+    const { container, getByRole } = render(<Demo />);
+    const cellEl = container.querySelector('.rc-table-tbody .rc-table-cell');
+    expect(cellEl?.textContent).toEqual('1');
 
-    wrapper.find('button').simulate('click');
-    expect(wrapper.find('.rc-table-tbody .rc-table-cell').text()).toEqual('2');
+    fireEvent.click(getByRole('button'));
+    expect(container.querySelector('.rc-table-tbody .rc-table-cell')?.textContent).toEqual('2');
   });
 
   it('onHeaderCell', () => {
-    const wrapper = mount(
+    const { container } = render(
       <Table
         columns={[
           {
@@ -120,12 +122,13 @@ describe('Table.Cell', () => {
       />,
     );
 
-    expect(wrapper.find('thead th').prop('title')).toEqual('Bamboo');
+    const thEl = container.querySelector('thead th');
+    expect(thEl).toHaveAttribute('title', 'Bamboo');
   });
 
   // https://github.com/ant-design/ant-design/issues/51763
   it('style merge order', () => {
-    const wrapper = mount(
+    const { container } = render(
       <Table
         columns={[
           {
@@ -141,9 +144,8 @@ describe('Table.Cell', () => {
       />,
     );
 
-    expect(wrapper.find('thead th').prop('style')).toEqual({
-      color: 'red',
-      textAlign: 'end',
-    });
+    const thEl = container.querySelector<HTMLTableCellElement>('thead th');
+    expect(thEl?.style.color).toEqual('red');
+    expect(thEl?.style.textAlign).toEqual('end');
   });
 });

tests/Colgroup.spec.jsx

@@ -1,6 +1,7 @@
-import { mount } from 'enzyme';
 import React from 'react';
+import { render } from '@testing-library/react';
 import Table, { INTERNAL_COL_DEFINE } from '../src';
+import Cell from '../src/Cell';
 
 describe('Table.ColGroup', () => {
   it('internal props should render', () => {
@@ -10,21 +11,62 @@ describe('Table.ColGroup', () => {
         [INTERNAL_COL_DEFINE]: { className: 'show-in-col' },
       },
     ];
-
-    const wrapper = mount(<Table columns={columns} />);
-    expect(wrapper.find('colgroup col').props().className).toEqual('show-in-col');
+    const { container } = render(<Table columns={columns} />);
+    const colEl = container.querySelector('colgroup col');
+    expect(colEl?.className).toEqual('show-in-col');
   });
 
   it('correct key', () => {
-    const columns = [
-      {
-        key: 0,
-        width: 1,
-      },
-    ];
+    const column1 = {
+      key: 'bamboo',
+      width: 1,
+    };
+
+    const column2 = {
+      key: 'little',
+      width: 1,
+    };
+
+    const column3 = {
+      key: 'light',
+      width: 1,
+    };
 
-    const wrapper = mount(<Table columns={columns} />);
-    expect(String(wrapper.find('colgroup col').key())).toEqual('0');
+    let unmount = 0;
+
+    const ProxyCell = props => {
+      React.useEffect(() => {
+        return () => {
+          unmount += 1;
+        };
+      }, []);
+
+      return <th {...props} />;
+    };
+
+    const { rerender } = render(
+      <Table
+        columns={[column1, column2]}
+        components={{
+          header: {
+            cell: ProxyCell,
+          },
+        }}
+      />,
+    );
+
+    rerender(
+      <Table
+        columns={[column2, column3]}
+        components={{
+          header: {
+            cell: ProxyCell,
+          },
+        }}
+      />,
+    );
+
+    expect(unmount).toEqual(1);
   });
 
   it('minWidth should be worked', () => {
@@ -34,9 +76,9 @@ describe('Table.ColGroup', () => {
         minWidth: 100,
       },
     ];
-
-    const wrapper = mount(<Table columns={columns} />);
-    expect(wrapper.find('colgroup col').at(0).props().style.minWidth).toEqual(100);
+    const { container } = render(<Table columns={columns} />);
+    const colEl = container.querySelector('colgroup col');
+    expect(colEl?.style.minWidth).toEqual('100px');
   });
 
   it('should not have minWidth when tableLayout is fixed', () => {
@@ -47,8 +89,8 @@ describe('Table.ColGroup', () => {
         minWidth: 100,
       },
     ];
-
-    const wrapper = mount(<Table columns={columns} tableLayout="fixed" />);
-    expect(wrapper.find('colgroup col').at(0).props().style.minWidth).toBeFalsy();
+    const { container } = render(<Table columns={columns} tableLayout="fixed" />);
+    const colEl = container.querySelector('colgroup col');
+    expect(colEl?.style.minWidth).toBeFalsy();
   });
 });

tests/Deprecated.spec.jsx

@@ -1,6 +1,6 @@
-import { mount } from 'enzyme';
-import { resetWarned } from '@rc-component/util/lib/warning';
 import React from 'react';
+import { render } from '@testing-library/react';
+import { resetWarned } from '@rc-component/util/lib/warning';
 import Table from '../src';
 
 describe('Table.Deprecated', () => {
@@ -24,7 +24,7 @@ describe('Table.Deprecated', () => {
       const getBodyWrapper = body => (
         <tbody className="custom-wrapper">{body.props.children}</tbody>
       );
-      mount(<Table getBodyWrapper={getBodyWrapper} />);
+      render(<Table getBodyWrapper={getBodyWrapper} />);
       expect(errorSpy).toHaveBeenCalledWith(
         'Warning: `getBodyWrapper` is deprecated, please use custom `components` instead.',
       );
@@ -36,8 +36,7 @@ describe('Table.Deprecated', () => {
           const props = {
             [removedProp]: vi.fn(),
           };
-          mount(<Table {...props} />);
-
+          render(<Table {...props} />);
           expect(errorSpy.mock.calls[0][0].includes(removedProp)).toBeTruthy();
         });
       },