Skip to content

Commit 15658cc

Browse files
zombieJzombieJ
authored
test: Move enzyme to testing lib (#1241)
* test: mv Cell.spec.tsx * test: mv classComponent.spec.tsx * test: mv Colgroup.spec.jsx * test: mv Deprecated.spec.jsx * test: mv ExpandRow.spec.jsx * test: mv FixedColumn-IE.spec.jsx * test: mv FixedColumn.spec.tsx * test: mv FixedHeader.spec.jsx * test: mv GroupingColumns.spec.jsx * test: mv Internal.spec.jsx * test: mv Scroll.spec.jsx * test: mv Sticky.spec.jsx * test: mv Summary.spec.tsx * test: all test * chore: fix lint * chore: fix lint
1 parent 7c11736 commit 15658cc

22 files changed

+5660
-6659
lines changed

‎package.json‎

Lines changed: 0 additions & 4 deletions
Original file line numberDiff line numberDiff line change
@@ -64,7 +64,6 @@
6464
"@rc-component/np": "^1.0.3",
6565
"@testing-library/jest-dom": "^6.4.0",
6666
"@testing-library/react": "^12.1.5",
67-
"@types/enzyme": "^3.10.5",
6867
"@types/jest": "^29.5.0",
6968
"@types/react": "^18.0.28",
7069
"@types/react-dom": "^18.0.5",
@@ -75,9 +74,6 @@
7574
"cheerio": "1.0.0-rc.12",
7675
"cross-env": "^7.0.0",
7776
"dumi": "^2.1.3",
78-
"enzyme": "^3.1.0",
79-
"enzyme-adapter-react-16": "^1.0.1",
80-
"enzyme-to-json": "^3.1.2",
8177
"eslint": "^8.54.0",
8278
"eslint-plugin-jest": "^28.2.0",
8379
"eslint-plugin-unicorn": "^56.0.0",

‎tests/Cell.spec.tsx‎

Lines changed: 22 additions & 20 deletions
Original file line numberDiff line numberDiff line change
@@ -1,5 +1,5 @@
1-
import { mount } from 'enzyme';
21
import React from 'react';
2+
import { render, fireEvent } from '@testing-library/react';
33
import Table from '../src';
44

55
describe('Table.Cell', () => {
@@ -34,11 +34,11 @@ describe('Table.Cell', () => {
3434
);
3535
};
3636

37-
const wrapper = mount(<Demo />);
37+
const { getByRole } = render(<Demo />);
3838
reRenderTime = 0;
3939

4040
for (let i = 0; i < 100; i += 1) {
41-
wrapper.find('button').simulate('click');
41+
fireEvent.click(getByRole('button'));
4242
expect(reRenderTime).toEqual(0);
4343
}
4444
});
@@ -55,14 +55,15 @@ describe('Table.Cell', () => {
5555
},
5656
];
5757

58-
const wrapper = mount(<Table data={[{ key: 'light' }]} columns={getColumns()} />);
59-
expect(wrapper.find('.rc-table-tbody .rc-table-cell').hasClass('test')).toBeFalsy();
58+
const { container, rerender } = render(
59+
<Table data={[{ key: 'light' }]} columns={getColumns()} />,
60+
);
61+
const cellEl = container.querySelector('.rc-table-tbody .rc-table-cell');
62+
expect(cellEl).not.toHaveClass('test');
6063

6164
// Update className should re-render
62-
wrapper.setProps({
63-
columns: getColumns({ className: 'test' }),
64-
});
65-
expect(wrapper.find('.rc-table-tbody .rc-table-cell').hasClass('test')).toBeTruthy();
65+
rerender(<Table data={[{ key: 'light' }]} columns={getColumns({ className: 'test' })} />);
66+
expect(container.querySelector('.rc-table-tbody .rc-table-cell')).toHaveClass('test');
6667
});
6768

6869
it('closure should work on render', () => {
@@ -95,15 +96,16 @@ describe('Table.Cell', () => {
9596
}
9697
}
9798

98-
const wrapper = mount(<Demo />);
99-
expect(wrapper.find('.rc-table-tbody .rc-table-cell').text()).toEqual('1');
99+
const { container, getByRole } = render(<Demo />);
100+
const cellEl = container.querySelector('.rc-table-tbody .rc-table-cell');
101+
expect(cellEl?.textContent).toEqual('1');
100102

101-
wrapper.find('button').simulate('click');
102-
expect(wrapper.find('.rc-table-tbody .rc-table-cell').text()).toEqual('2');
103+
fireEvent.click(getByRole('button'));
104+
expect(container.querySelector('.rc-table-tbody .rc-table-cell')?.textContent).toEqual('2');
103105
});
104106

105107
it('onHeaderCell', () => {
106-
const wrapper = mount(
108+
const { container } = render(
107109
<Table
108110
columns={[
109111
{
@@ -120,12 +122,13 @@ describe('Table.Cell', () => {
120122
/>,
121123
);
122124

123-
expect(wrapper.find('thead th').prop('title')).toEqual('Bamboo');
125+
const thEl = container.querySelector('thead th');
126+
expect(thEl).toHaveAttribute('title', 'Bamboo');
124127
});
125128

126129
// https://github.com/ant-design/ant-design/issues/51763
127130
it('style merge order', () => {
128-
const wrapper = mount(
131+
const { container } = render(
129132
<Table
130133
columns={[
131134
{
@@ -141,9 +144,8 @@ describe('Table.Cell', () => {
141144
/>,
142145
);
143146

144-
expect(wrapper.find('thead th').prop('style')).toEqual({
145-
color: 'red',
146-
textAlign: 'end',
147-
});
147+
const thEl = container.querySelector<HTMLTableCellElement>('thead th');
148+
expect(thEl?.style.color).toEqual('red');
149+
expect(thEl?.style.textAlign).toEqual('end');
148150
});
149151
});

‎tests/Colgroup.spec.jsx‎

Lines changed: 60 additions & 18 deletions
Original file line numberDiff line numberDiff line change
@@ -1,6 +1,7 @@
1-
import { mount } from 'enzyme';
21
import React from 'react';
2+
import { render } from '@testing-library/react';
33
import Table, { INTERNAL_COL_DEFINE } from '../src';
4+
import Cell from '../src/Cell';
45

56
describe('Table.ColGroup', () => {
67
it('internal props should render', () => {
@@ -10,21 +11,62 @@ describe('Table.ColGroup', () => {
1011
[INTERNAL_COL_DEFINE]: { className: 'show-in-col' },
1112
},
1213
];
13-
14-
const wrapper = mount(<Table columns={columns} />);
15-
expect(wrapper.find('colgroup col').props().className).toEqual('show-in-col');
14+
const { container } = render(<Table columns={columns} />);
15+
const colEl = container.querySelector('colgroup col');
16+
expect(colEl?.className).toEqual('show-in-col');
1617
});
1718

1819
it('correct key', () => {
19-
const columns = [
20-
{
21-
key: 0,
22-
width: 1,
23-
},
24-
];
20+
const column1 = {
21+
key: 'bamboo',
22+
width: 1,
23+
};
24+
25+
const column2 = {
26+
key: 'little',
27+
width: 1,
28+
};
29+
30+
const column3 = {
31+
key: 'light',
32+
width: 1,
33+
};
2534

26-
const wrapper = mount(<Table columns={columns} />);
27-
expect(String(wrapper.find('colgroup col').key())).toEqual('0');
35+
let unmount = 0;
36+
37+
const ProxyCell = props => {
38+
React.useEffect(() => {
39+
return () => {
40+
unmount += 1;
41+
};
42+
}, []);
43+
44+
return <th {...props} />;
45+
};
46+
47+
const { rerender } = render(
48+
<Table
49+
columns={[column1, column2]}
50+
components={{
51+
header: {
52+
cell: ProxyCell,
53+
},
54+
}}
55+
/>,
56+
);
57+
58+
rerender(
59+
<Table
60+
columns={[column2, column3]}
61+
components={{
62+
header: {
63+
cell: ProxyCell,
64+
},
65+
}}
66+
/>,
67+
);
68+
69+
expect(unmount).toEqual(1);
2870
});
2971

3072
it('minWidth should be worked', () => {
@@ -34,9 +76,9 @@ describe('Table.ColGroup', () => {
3476
minWidth: 100,
3577
},
3678
];
37-
38-
const wrapper = mount(<Table columns={columns} />);
39-
expect(wrapper.find('colgroup col').at(0).props().style.minWidth).toEqual(100);
79+
const { container } = render(<Table columns={columns} />);
80+
const colEl = container.querySelector('colgroup col');
81+
expect(colEl?.style.minWidth).toEqual('100px');
4082
});
4183

4284
it('should not have minWidth when tableLayout is fixed', () => {
@@ -47,8 +89,8 @@ describe('Table.ColGroup', () => {
4789
minWidth: 100,
4890
},
4991
];
50-
51-
const wrapper = mount(<Table columns={columns} tableLayout="fixed" />);
52-
expect(wrapper.find('colgroup col').at(0).props().style.minWidth).toBeFalsy();
92+
const { container } = render(<Table columns={columns} tableLayout="fixed" />);
93+
const colEl = container.querySelector('colgroup col');
94+
expect(colEl?.style.minWidth).toBeFalsy();
5395
});
5496
});

‎tests/Deprecated.spec.jsx‎

Lines changed: 4 additions & 5 deletions
Original file line numberDiff line numberDiff line change
@@ -1,6 +1,6 @@
1-
import { mount } from 'enzyme';
2-
import { resetWarned } from '@rc-component/util/lib/warning';
31
import React from 'react';
2+
import { render } from '@testing-library/react';
3+
import { resetWarned } from '@rc-component/util/lib/warning';
44
import Table from '../src';
55

66
describe('Table.Deprecated', () => {
@@ -24,7 +24,7 @@ describe('Table.Deprecated', () => {
2424
const getBodyWrapper = body => (
2525
<tbody className="custom-wrapper">{body.props.children}</tbody>
2626
);
27-
mount(<Table getBodyWrapper={getBodyWrapper} />);
27+
render(<Table getBodyWrapper={getBodyWrapper} />);
2828
expect(errorSpy).toHaveBeenCalledWith(
2929
'Warning: `getBodyWrapper` is deprecated, please use custom `components` instead.',
3030
);
@@ -36,8 +36,7 @@ describe('Table.Deprecated', () => {
3636
const props = {
3737
[removedProp]: vi.fn(),
3838
};
39-
mount(<Table {...props} />);
40-
39+
render(<Table {...props} />);
4140
expect(errorSpy.mock.calls[0][0].includes(removedProp)).toBeTruthy();
4241
});
4342
},

0 commit comments

Comments
 (0)