convert ReactElementClone-test from renderIntoDocument (#28193)
## Summary migrates to createRoot – renderIntoDocument uses ReactDOM.render ## How did you test this change? yarn test ReactElementClone
Noah Lemen committed
Feb 1, 2024 at 14:45 UTC
94259cd57a72123af224d6786c96f5915de06d63
1 file changed
+76
-32
packages/react/src/__tests__/ReactElementClone-test.js
+76
-32
@@ -9,19 +9,20 @@
9
10
'use strict';
11
12
+let act;
13
let PropTypes;
14
let React;
14
-let ReactDOM;
15
-let ReactTestUtils;
15
+let ReactDOMClient;
16
17
describe('ReactElementClone', () => {
18
let ComponentClass;
19
20
beforeEach(() => {
21
+ act = require('internal-test-utils').act;
22
+
23
PropTypes = require('prop-types');
24
React = require('react');
23
- ReactDOM = require('react-dom');
24
- ReactTestUtils = require('react-dom/test-utils');
25
+ ReactDOMClient = require('react-dom/client');
26
27
// NOTE: We're explicitly not using JSX here. This is intended to test
28
// classic JS without JSX.
@@ -32,10 +33,15 @@ describe('ReactElementClone', () => {
33
};
34
});
35
35
- it('should clone a DOM component with new props', () => {
36
+ it('should clone a DOM component with new props', async () => {
37
+ let div;
38
class Grandparent extends React.Component {
39
render() {
38
- return <Parent child={<div className="child" />} />;
40
+ return (
41
+ <Parent
42
+ child={<div ref={node => (div = node)} className="child" />}
43
+ />
44
+ );
45
}
46
}
47
class Parent extends React.Component {
@@ -47,14 +53,21 @@ describe('ReactElementClone', () => {
53
);
54
}
55
}
50
- const component = ReactTestUtils.renderIntoDocument(<Grandparent />);
51
- expect(ReactDOM.findDOMNode(component).childNodes[0].className).toBe('xyz');
56
+
57
+ const root = ReactDOMClient.createRoot(document.createElement('div'));
58
+ await act(() => {
59
+ root.render(<Grandparent />);
60
+ });
61
+ expect(div.className).toBe('xyz');
62
});
63
54
- it('should clone a composite component with new props', () => {
64
+ it('should clone a composite component with new props', async () => {
65
+ let div;
66
class Child extends React.Component {
67
render() {
57
- return <div className={this.props.className} />;
68
+ return (
69
+ <div ref={node => (div = node)} className={this.props.className} />
70
+ );
71
}
72
}
73
class Grandparent extends React.Component {
@@ -71,8 +84,11 @@ describe('ReactElementClone', () => {
84
);
85
}
86
}
74
- const component = ReactTestUtils.renderIntoDocument(<Grandparent />);
75
- expect(ReactDOM.findDOMNode(component).childNodes[0].className).toBe('xyz');
87
+ const root = ReactDOMClient.createRoot(document.createElement('div'));
88
+ await act(() => {
89
+ root.render(<Grandparent />);
90
+ });
91
+ expect(div.className).toBe('xyz');
92
});
93
94
it('does not fail if config has no prototype', () => {
@@ -80,10 +96,15 @@ describe('ReactElementClone', () => {
96
React.cloneElement(<div />, config);
97
});
98
83
- it('should keep the original ref if it is not overridden', () => {
99
+ it('should keep the original ref if it is not overridden', async () => {
100
+ let component;
101
class Grandparent extends React.Component {
102
yoloRef = React.createRef();
103
104
+ componentDidMount() {
105
+ component = this;
106
+ }
107
+
108
render() {
109
return <Parent child={<div ref={this.yoloRef} />} />;
110
}
@@ -97,7 +118,11 @@ describe('ReactElementClone', () => {
118
}
119
}
120
100
- const component = ReactTestUtils.renderIntoDocument(<Grandparent />);
121
+ const root = ReactDOMClient.createRoot(document.createElement('div'));
122
+ await act(() => {
123
+ root.render(<Grandparent />);
124
+ });
125
+
126
expect(component.yoloRef.current.tagName).toBe('DIV');
127
});
128
@@ -111,7 +136,7 @@ describe('ReactElementClone', () => {
136
expect(clone.key).toBe('xyz');
137
});
138
114
- it('should transfer children', () => {
139
+ it('should transfer children', async () => {
140
class Component extends React.Component {
141
render() {
142
expect(this.props.children).toBe('xyz');
@@ -119,12 +144,13 @@ describe('ReactElementClone', () => {
144
}
145
}
146
122
- ReactTestUtils.renderIntoDocument(
123
- React.cloneElement(<Component />, {children: 'xyz'}),
124
- );
147
+ const root = ReactDOMClient.createRoot(document.createElement('div'));
148
+ await act(() => {
149
+ root.render(React.cloneElement(<Component />, {children: 'xyz'}));
150
+ });
151
});
152
127
- it('should shallow clone children', () => {
153
+ it('should shallow clone children', async () => {
154
class Component extends React.Component {
155
render() {
156
expect(this.props.children).toBe('xyz');
@@ -132,9 +158,10 @@ describe('ReactElementClone', () => {
158
}
159
}
160
135
- ReactTestUtils.renderIntoDocument(
136
- React.cloneElement(<Component>xyz</Component>, {}),
137
- );
161
+ const root = ReactDOMClient.createRoot(document.createElement('div'));
162
+ await act(() => {
163
+ root.render(React.cloneElement(<Component>xyz</Component>, {}));
164
+ });
165
});
166
167
it('should accept children as rest arguments', () => {
@@ -174,7 +201,8 @@ describe('ReactElementClone', () => {
201
expect(element2.props.children).toBe(undefined);
202
});
203
177
- it('should support keys and refs', () => {
204
+ it('should support keys and refs', async () => {
205
+ let component;
206
class Parent extends React.Component {
207
xyzRef = React.createRef();
208
@@ -192,6 +220,10 @@ describe('ReactElementClone', () => {
220
class Grandparent extends React.Component {
221
parentRef = React.createRef();
222
223
+ componentDidMount() {
224
+ component = this;
225
+ }
226
+
227
render() {
228
return (
229
<Parent ref={this.parentRef}>
@@ -201,11 +233,13 @@ describe('ReactElementClone', () => {
233
}
234
}
235
204
- const component = ReactTestUtils.renderIntoDocument(<Grandparent />);
236
+ const root = ReactDOMClient.createRoot(document.createElement('div'));
237
+ await act(() => root.render(<Grandparent />));
238
expect(component.parentRef.current.xyzRef.current.tagName).toBe('SPAN');
239
});
240
208
- it('should steal the ref if a new ref is specified', () => {
241
+ it('should steal the ref if a new ref is specified', async () => {
242
+ let component;
243
class Parent extends React.Component {
244
xyzRef = React.createRef();
245
@@ -221,6 +255,10 @@ describe('ReactElementClone', () => {
255
parentRef = React.createRef();
256
childRef = React.createRef();
257
258
+ componentDidMount() {
259
+ component = this;
260
+ }
261
+
262
render() {
263
return (
264
<Parent ref={this.parentRef}>
@@ -230,12 +268,13 @@ describe('ReactElementClone', () => {
268
}
269
}
270
233
- const component = ReactTestUtils.renderIntoDocument(<Grandparent />);
271
+ const root = ReactDOMClient.createRoot(document.createElement('div'));
272
+ await act(() => root.render(<Grandparent />));
273
expect(component.childRef).toEqual({current: null});
274
expect(component.parentRef.current.xyzRef.current.tagName).toBe('SPAN');
275
});
276
238
- it('should overwrite props', () => {
277
+ it('should overwrite props', async () => {
278
class Component extends React.Component {
279
render() {
280
expect(this.props.myprop).toBe('xyz');
@@ -243,8 +282,11 @@ describe('ReactElementClone', () => {
282
}
283
}
284
246
- ReactTestUtils.renderIntoDocument(
247
- React.cloneElement(<Component myprop="abc" />, {myprop: 'xyz'}),
285
+ const root = ReactDOMClient.createRoot(document.createElement('div'));
286
+ await act(() =>
287
+ root.render(
288
+ React.cloneElement(<Component myprop="abc" />, {myprop: 'xyz'}),
289
+ ),
290
);
291
});
292
@@ -287,7 +329,7 @@ describe('ReactElementClone', () => {
329
React.cloneElement(<div />, null, [{}, {}]);
330
});
331
290
- it('should check declared prop types after clone', () => {
332
+ it('should check declared prop types after clone', async () => {
333
class Component extends React.Component {
334
static propTypes = {
335
color: PropTypes.string.isRequired,
@@ -308,8 +350,10 @@ describe('ReactElementClone', () => {
350
});
351
}
352
}
311
- expect(() =>
312
- ReactTestUtils.renderIntoDocument(React.createElement(GrandParent)),
353
+ const root = ReactDOMClient.createRoot(document.createElement('div'));
354
+ await expect(
355
+ async () =>
356
+ await act(() => root.render(React.createElement(GrandParent))),
357
).toErrorDev(
358
'Warning: Failed prop type: ' +
359
'Invalid prop `color` of type `number` supplied to `Component`, ' +