Skip to content

Commit 1d24b0f

Browse files
crazyaircrazyair
committed
feat: test
1 parent 948a600 commit 1d24b0f

File tree

4 files changed

+151
-161
lines changed

4 files changed

+151
-161
lines changed

‎jest.config.js‎

Lines changed: 7 additions & 0 deletions
Original file line numberDiff line numberDiff line change
@@ -0,0 +1,7 @@
1+
module.exports = {
2+
// collectCoverage: true,
3+
// coverageReporters: ['clover', 'json', 'lcov', 'text', 'cobertura'],
4+
// setupFiles: ['./setupTests.js'],
5+
// coveragePathIgnorePatterns: ['/node_modules/', 'src/.umi', 'demo'],
6+
// modulePathIgnorePatterns: ['/docs/', '/__snapshots__/'],
7+
};

‎package.json‎

Lines changed: 8 additions & 8 deletions
Original file line numberDiff line numberDiff line change
@@ -51,20 +51,20 @@
5151
},
5252
"devDependencies": {
5353
"@ant-design/icons": "^4.7.0",
54+
"@testing-library/jest-dom": "^5.16.4",
55+
"@testing-library/react": "^13.2.0",
56+
"@testing-library/react-hooks": "^8.0.0",
57+
"@testing-library/user-event": "^14.1.1",
5458
"@types/classnames": "^2.2.9",
55-
"@types/enzyme": "^3.1.15",
5659
"@types/jest": "^27.0.2",
5760
"@types/raf": "^3.4.0",
58-
"@types/react": "^17.0.9",
59-
"@types/react-dom": "^17.0.6",
61+
"@types/react": "^18.0.9",
62+
"@types/react-dom": "^18.0.3",
6063
"@types/warning": "^3.0.0",
6164
"@umijs/fabric": "^2.0.0",
6265
"@umijs/test": "^3.5.23",
6366
"antd": "^4.20.2",
6467
"dumi": "^1.1.40",
65-
"enzyme": "^3.10.0",
66-
"enzyme-adapter-react-16": "^1.14.0",
67-
"enzyme-to-json": "^3.4.2",
6868
"eslint": "^7.0.0",
6969
"father-build": "^1.22.1",
7070
"glob": "^7.1.6",
@@ -74,8 +74,8 @@
7474
"prettier": "^2.6.2",
7575
"querystring": "^0.2.0",
7676
"rc-test": "^6.0.1",
77-
"react": "^16.10.2",
78-
"react-dom": "^16.10.2",
77+
"react": "^18.1.0",
78+
"react-dom": "^18.1.0",
7979
"react-test-renderer": "^16.10.2",
8080
"typescript": "^4.6.4"
8181
}

‎tests/__snapshots__/drawer.spec.tsx.snap‎

Lines changed: 101 additions & 77 deletions
Original file line numberDiff line numberDiff line change
@@ -1,120 +1,144 @@
11
// Jest Snapshot v1, https://goo.gl/fbAQLP
22

33
exports[`Drawer render boolean 1`] = `
4-
<div>
5-
<div
6-
class=""
7-
>
8-
<div
9-
class="drawer drawer-left drawer-open"
10-
tabindex="-1"
11-
>
4+
<body
5+
class=""
6+
style=""
7+
>
8+
<div>
9+
<div>
1210
<div
13-
class="drawer-mask"
11+
class="main"
1412
/>
1513
<div
16-
class="drawer-content-wrapper"
17-
style=""
14+
class=""
1815
>
1916
<div
20-
class="drawer-content"
17+
class="drawer drawer-left drawer-open"
18+
tabindex="-1"
2119
>
22-
<p
23-
class="text"
24-
>
25-
Here is content of Drawer
26-
</p>
27-
</div>
28-
<div
29-
class="drawer-handle"
30-
>
31-
<i
32-
class="drawer-handle-icon"
20+
<div
21+
class="drawer-mask"
3322
/>
23+
<div
24+
class="drawer-content-wrapper"
25+
style=""
26+
>
27+
<div
28+
class="drawer-content"
29+
>
30+
<p
31+
class="text"
32+
>
33+
Here is content of Drawer
34+
</p>
35+
</div>
36+
<div
37+
class="drawer-handle"
38+
>
39+
<i
40+
class="drawer-handle-icon"
41+
/>
42+
</div>
43+
</div>
3444
</div>
3545
</div>
3646
</div>
3747
</div>
38-
</div>
48+
</body>
3949
`;
4050

4151
exports[`Drawer render dom 1`] = `
42-
<div>
43-
<div
44-
class="main ant-scrolling-effect"
45-
style="overflow: hidden; overflow-x: hidden; overflow-y: hidden;"
46-
>
52+
<body
53+
class=""
54+
style=""
55+
>
56+
<div>
4757
<div>
4858
<div
49-
class="drawer drawer-left drawer-open"
50-
tabindex="-1"
59+
class="main ant-scrolling-effect"
60+
style="overflow: hidden; overflow-x: hidden; overflow-y: hidden;"
5161
>
52-
<div
53-
class="drawer-mask"
54-
/>
55-
<div
56-
class="drawer-content-wrapper"
57-
style=""
58-
>
62+
<div>
5963
<div
60-
class="drawer-content"
64+
class="drawer drawer-left drawer-open"
65+
tabindex="-1"
6166
>
62-
<p
63-
class="text"
64-
>
65-
Here is content of Drawer
66-
</p>
67-
</div>
68-
<div
69-
class="drawer-handle"
70-
>
71-
<i
72-
class="drawer-handle-icon"
67+
<div
68+
class="drawer-mask"
7369
/>
70+
<div
71+
class="drawer-content-wrapper"
72+
style=""
73+
>
74+
<div
75+
class="drawer-content"
76+
>
77+
<p
78+
class="text"
79+
>
80+
Here is content of Drawer
81+
</p>
82+
</div>
83+
<div
84+
class="drawer-handle"
85+
>
86+
<i
87+
class="drawer-handle-icon"
88+
/>
89+
</div>
90+
</div>
7491
</div>
7592
</div>
7693
</div>
7794
</div>
7895
</div>
79-
</div>
96+
</body>
8097
`;
8198

8299
exports[`Drawer render function 1`] = `
83-
<div>
84-
<div
85-
class="main"
86-
>
100+
<body
101+
class="ant-scrolling-effect"
102+
style="overflow: hidden; overflow-x: hidden; overflow-y: hidden;"
103+
>
104+
<div>
87105
<div>
88106
<div
89-
class="drawer drawer-left drawer-open"
90-
tabindex="-1"
107+
class="main"
91108
>
92-
<div
93-
class="drawer-mask"
94-
/>
95-
<div
96-
class="drawer-content-wrapper"
97-
style=""
98-
>
99-
<div
100-
class="drawer-content"
101-
>
102-
<p
103-
class="text"
104-
>
105-
Here is content of Drawer
106-
</p>
107-
</div>
109+
<div>
108110
<div
109-
class="drawer-handle"
111+
class="drawer drawer-left drawer-open"
112+
tabindex="-1"
110113
>
111-
<i
112-
class="drawer-handle-icon"
114+
<div
115+
class="drawer-mask"
113116
/>
117+
<div
118+
class="drawer-content-wrapper"
119+
style=""
120+
>
121+
<div
122+
class="drawer-content"
123+
>
124+
<p
125+
class="text"
126+
>
127+
Here is content of Drawer
128+
</p>
129+
</div>
130+
<div
131+
class="drawer-handle"
132+
>
133+
<i
134+
class="drawer-handle-icon"
135+
/>
136+
</div>
137+
</div>
114138
</div>
115139
</div>
116140
</div>
117141
</div>
118142
</div>
119-
</div>
143+
</body>
120144
`;

‎tests/drawer.spec.tsx‎

Lines changed: 35 additions & 76 deletions
Original file line numberDiff line numberDiff line change
@@ -1,92 +1,51 @@
1-
/* eslint-disable max-classes-per-file */
2-
// eslint-disable react/no-multi-comp
3-
import { mount } from 'enzyme';
4-
import * as React from 'react';
1+
import React, { useRef } from 'react';
52
import Drawer from '../src/';
63
import type { IDrawerProps } from '../src/IDrawerPropTypes';
7-
import toJson from 'enzyme-to-json';
4+
import { cleanup, render } from '@testing-library/react';
85

9-
class DrawerTesterRef extends React.Component {
10-
public container: HTMLDivElement;
11-
public getContainer = () => {
12-
return this.container;
13-
};
14-
public saveContainer = (container: HTMLDivElement) => {
15-
this.container = container;
16-
};
17-
public render() {
18-
return (
19-
<div>
20-
<div ref={this.saveContainer} className="main" />
21-
<Drawer {...this.props} open={true} getContainer={this.getContainer}>
6+
const DrawerTesterRef = (props: IDrawerProps) => {
7+
const containerRef = useRef<HTMLDivElement>(null);
8+
return (
9+
<div>
10+
<div ref={containerRef} className="main" />
11+
<Drawer getContainer={() => containerRef.current} {...props}>
12+
<p className="text">Here is content of Drawer</p>
13+
</Drawer>
14+
</div>
15+
);
16+
};
17+
18+
const DrawerTesterDom = (props: IDrawerProps) => {
19+
const containerRef = useRef<HTMLDivElement>(null);
20+
return (
21+
<div>
22+
<div ref={containerRef} className="main" />
23+
{open && (
24+
<Drawer getContainer={() => containerRef.current} {...props}>
2225
<p className="text">Here is content of Drawer</p>
2326
</Drawer>
24-
</div>
25-
);
26-
}
27-
}
28-
/* eslint react/no-multi-comp: 0 */
29-
30-
interface IState {
31-
visible: boolean;
32-
}
33-
// tslint:disable-next-line:max-classes-per-file
34-
class DrawerTesterDom extends React.Component<IDrawerProps, IState> {
35-
public container: HTMLDivElement;
36-
constructor(props: IDrawerProps) {
37-
super(props);
38-
this.state = { visible: false };
39-
}
40-
public componentDidMount() {
41-
this.setState({ visible: true }); // eslint-disable-line react/no-did-mount-set-state
42-
}
43-
public getContainer = () => {
44-
return this.container;
45-
};
46-
public saveContainer = (container: HTMLDivElement) => {
47-
this.container = container;
48-
};
49-
public render() {
50-
return (
51-
<div>
52-
<div ref={this.saveContainer} className="main" />
53-
{this.state.visible ? (
54-
<Drawer
55-
{...this.props}
56-
open={true}
57-
getContainer={this.getContainer()}
58-
>
59-
<p className="text">Here is content of Drawer</p>
60-
</Drawer>
61-
) : null}
62-
</div>
63-
);
64-
}
65-
}
66-
67-
/* eslint react/no-multi-comp: 0 */
68-
// tslint:disable-next-line:max-classes-per-file
69-
const DrawerTesterBoolean = props => (
70-
<div>
71-
<Drawer {...props} open={true} getContainer={false}>
72-
<p className="text">Here is content of Drawer</p>
73-
</Drawer>
74-
</div>
75-
);
27+
)}
28+
</div>
29+
);
30+
};
7631

7732
describe('Drawer', () => {
33+
afterEach(() => {
34+
cleanup();
35+
});
7836
it('render function', () => {
79-
const wrapper = mount(<DrawerTesterRef />);
80-
expect(toJson(wrapper.render())).toMatchSnapshot();
37+
render(<DrawerTesterRef open />);
38+
expect(document.body).toMatchSnapshot();
8139
});
8240

8341
it('render dom', () => {
84-
const wrapper = mount(<DrawerTesterDom />);
85-
expect(toJson(wrapper.render())).toMatchSnapshot();
42+
const { rerender } = render(<DrawerTesterDom />);
43+
rerender(<DrawerTesterDom open />);
44+
expect(document.body).toMatchSnapshot();
8645
});
8746

8847
it('render boolean', () => {
89-
const wrapper = mount(<DrawerTesterBoolean />);
90-
expect(toJson(wrapper.render())).toMatchSnapshot();
48+
render(<DrawerTesterRef open getContainer={false} />);
49+
expect(document.body).toMatchSnapshot();
9150
});
9251
});

0 commit comments

Comments
 (0)