Skip to content

Commit 94259cd

Browse files
noahlemennoahlemen
authored
convert ReactElementClone-test from renderIntoDocument (#28193)
## Summary migrates to createRoot – renderIntoDocument uses ReactDOM.render ## How did you test this change? yarn test ReactElementClone
1 parent 6f8f000 commit 94259cd

File tree

1 file changed

+76
-32
lines changed

1 file changed

+76
-32
lines changed

‎packages/react/src/__tests__/ReactElementClone-test.js‎

Lines changed: 76 additions & 32 deletions
Original file line numberDiff line numberDiff line change
@@ -9,19 +9,20 @@
99

1010
'use strict';
1111

12+
let act;
1213
let PropTypes;
1314
let React;
14-
let ReactDOM;
15-
let ReactTestUtils;
15+
let ReactDOMClient;
1616

1717
describe('ReactElementClone', () => {
1818
let ComponentClass;
1919

2020
beforeEach(() => {
21+
act = require('internal-test-utils').act;
22+
2123
PropTypes = require('prop-types');
2224
React = require('react');
23-
ReactDOM = require('react-dom');
24-
ReactTestUtils = require('react-dom/test-utils');
25+
ReactDOMClient = require('react-dom/client');
2526

2627
// NOTE: We're explicitly not using JSX here. This is intended to test
2728
// classic JS without JSX.
@@ -32,10 +33,15 @@ describe('ReactElementClone', () => {
3233
};
3334
});
3435

35-
it('should clone a DOM component with new props', () => {
36+
it('should clone a DOM component with new props', async () => {
37+
let div;
3638
class Grandparent extends React.Component {
3739
render() {
38-
return <Parent child={<div className="child" />} />;
40+
return (
41+
<Parent
42+
child={<div ref={node => (div = node)} className="child" />}
43+
/>
44+
);
3945
}
4046
}
4147
class Parent extends React.Component {
@@ -47,14 +53,21 @@ describe('ReactElementClone', () => {
4753
);
4854
}
4955
}
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');
5262
});
5363

54-
it('should clone a composite component with new props', () => {
64+
it('should clone a composite component with new props', async () => {
65+
let div;
5566
class Child extends React.Component {
5667
render() {
57-
return <div className={this.props.className} />;
68+
return (
69+
<div ref={node => (div = node)} className={this.props.className} />
70+
);
5871
}
5972
}
6073
class Grandparent extends React.Component {
@@ -71,19 +84,27 @@ describe('ReactElementClone', () => {
7184
);
7285
}
7386
}
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');
7692
});
7793

7894
it('does not fail if config has no prototype', () => {
7995
const config = Object.create(null, {foo: {value: 1, enumerable: true}});
8096
React.cloneElement(<div />, config);
8197
});
8298

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;
84101
class Grandparent extends React.Component {
85102
yoloRef = React.createRef();
86103

104+
componentDidMount() {
105+
component = this;
106+
}
107+
87108
render() {
88109
return <Parent child={<div ref={this.yoloRef} />} />;
89110
}
@@ -97,7 +118,11 @@ describe('ReactElementClone', () => {
97118
}
98119
}
99120

100-
const component = ReactTestUtils.renderIntoDocument(<Grandparent />);
121+
const root = ReactDOMClient.createRoot(document.createElement('div'));
122+
await act(() => {
123+
root.render(<Grandparent />);
124+
});
125+
101126
expect(component.yoloRef.current.tagName).toBe('DIV');
102127
});
103128

@@ -111,30 +136,32 @@ describe('ReactElementClone', () => {
111136
expect(clone.key).toBe('xyz');
112137
});
113138

114-
it('should transfer children', () => {
139+
it('should transfer children', async () => {
115140
class Component extends React.Component {
116141
render() {
117142
expect(this.props.children).toBe('xyz');
118143
return <div />;
119144
}
120145
}
121146

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+
});
125151
});
126152

127-
it('should shallow clone children', () => {
153+
it('should shallow clone children', async () => {
128154
class Component extends React.Component {
129155
render() {
130156
expect(this.props.children).toBe('xyz');
131157
return <div />;
132158
}
133159
}
134160

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+
});
138165
});
139166

140167
it('should accept children as rest arguments', () => {
@@ -174,7 +201,8 @@ describe('ReactElementClone', () => {
174201
expect(element2.props.children).toBe(undefined);
175202
});
176203

177-
it('should support keys and refs', () => {
204+
it('should support keys and refs', async () => {
205+
let component;
178206
class Parent extends React.Component {
179207
xyzRef = React.createRef();
180208

@@ -192,6 +220,10 @@ describe('ReactElementClone', () => {
192220
class Grandparent extends React.Component {
193221
parentRef = React.createRef();
194222

223+
componentDidMount() {
224+
component = this;
225+
}
226+
195227
render() {
196228
return (
197229
<Parent ref={this.parentRef}>
@@ -201,11 +233,13 @@ describe('ReactElementClone', () => {
201233
}
202234
}
203235

204-
const component = ReactTestUtils.renderIntoDocument(<Grandparent />);
236+
const root = ReactDOMClient.createRoot(document.createElement('div'));
237+
await act(() => root.render(<Grandparent />));
205238
expect(component.parentRef.current.xyzRef.current.tagName).toBe('SPAN');
206239
});
207240

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;
209243
class Parent extends React.Component {
210244
xyzRef = React.createRef();
211245

@@ -221,6 +255,10 @@ describe('ReactElementClone', () => {
221255
parentRef = React.createRef();
222256
childRef = React.createRef();
223257

258+
componentDidMount() {
259+
component = this;
260+
}
261+
224262
render() {
225263
return (
226264
<Parent ref={this.parentRef}>
@@ -230,21 +268,25 @@ describe('ReactElementClone', () => {
230268
}
231269
}
232270

233-
const component = ReactTestUtils.renderIntoDocument(<Grandparent />);
271+
const root = ReactDOMClient.createRoot(document.createElement('div'));
272+
await act(() => root.render(<Grandparent />));
234273
expect(component.childRef).toEqual({current: null});
235274
expect(component.parentRef.current.xyzRef.current.tagName).toBe('SPAN');
236275
});
237276

238-
it('should overwrite props', () => {
277+
it('should overwrite props', async () => {
239278
class Component extends React.Component {
240279
render() {
241280
expect(this.props.myprop).toBe('xyz');
242281
return <div />;
243282
}
244283
}
245284

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+
),
248290
);
249291
});
250292

@@ -287,7 +329,7 @@ describe('ReactElementClone', () => {
287329
React.cloneElement(<div />, null, [{}, {}]);
288330
});
289331

290-
it('should check declared prop types after clone', () => {
332+
it('should check declared prop types after clone', async () => {
291333
class Component extends React.Component {
292334
static propTypes = {
293335
color: PropTypes.string.isRequired,
@@ -308,8 +350,10 @@ describe('ReactElementClone', () => {
308350
});
309351
}
310352
}
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))),
313357
).toErrorDev(
314358
'Warning: Failed prop type: ' +
315359
'Invalid prop `color` of type `number` supplied to `Component`, ' +

0 commit comments

Comments
 (0)