Convert renderSubtreeIntoContainer-test.js to createRoot (#28114)
Co-authored-by: Ricky <rickhanlonii@gmail.com>
Matt Carroll committed
Jan 26, 2024 at 16:30 UTC
e2b93afc604f857f7b59788920533ff7d1c72563
1 file changed
+36
-13
packages/react-dom/src/__tests__/renderSubtreeIntoContainer-test.js
+36
-13
@@ -12,7 +12,9 @@
12
const React = require('react');
13
const PropTypes = require('prop-types');
14
const ReactDOM = require('react-dom');
15
+const ReactDOMClient = require('react-dom/client');
16
const ReactTestUtils = require('react-dom/test-utils');
17
+const act = require('internal-test-utils').act;
18
const renderSubtreeIntoContainer =
19
require('react-dom').unstable_renderSubtreeIntoContainer;
20
@@ -101,7 +103,7 @@ describe('renderSubtreeIntoContainer', () => {
103
});
104
105
// @gate !disableLegacyContext
104
- it('should update context if it changes due to setState', () => {
106
+ it('should update context if it changes due to setState', async () => {
107
const container = document.createElement('div');
108
document.body.appendChild(container);
109
const portal = document.createElement('div');
@@ -154,15 +156,22 @@ describe('renderSubtreeIntoContainer', () => {
156
);
157
}
158
}
159
+ const root = ReactDOMClient.createRoot(container);
160
+ const parentRef = React.createRef();
161
+ await act(async () => {
162
+ root.render(<Parent ref={parentRef} />);
163
+ });
164
+ const instance = parentRef.current;
165
158
- const instance = ReactDOM.render(<Parent />, container);
166
expect(portal.firstChild.innerHTML).toBe('initial-initial');
160
- instance.setState({bar: 'changed'});
167
+ await act(async () => {
168
+ instance.setState({bar: 'changed'});
169
+ });
170
expect(portal.firstChild.innerHTML).toBe('changed-changed');
171
});
172
173
// @gate !disableLegacyContext
165
- it('should update context if it changes due to re-render', () => {
174
+ it('should update context if it changes due to re-render', async () => {
175
const container = document.createElement('div');
176
document.body.appendChild(container);
177
const portal = document.createElement('div');
@@ -212,13 +221,18 @@ describe('renderSubtreeIntoContainer', () => {
221
}
222
}
223
215
- ReactDOM.render(<Parent bar="initial" />, container);
224
+ const root = ReactDOMClient.createRoot(container);
225
+ await act(async () => {
226
+ root.render(<Parent bar="initial" />);
227
+ });
228
expect(portal.firstChild.innerHTML).toBe('initial-initial');
217
- ReactDOM.render(<Parent bar="changed" />, container);
229
+ await act(async () => {
230
+ root.render(<Parent bar="changed" />);
231
+ });
232
expect(portal.firstChild.innerHTML).toBe('changed-changed');
233
});
234
221
- it('should render portal with non-context-provider parent', () => {
235
+ it('should render portal with non-context-provider parent', async () => {
236
const container = document.createElement('div');
237
document.body.appendChild(container);
238
const portal = document.createElement('div');
@@ -237,12 +251,15 @@ describe('renderSubtreeIntoContainer', () => {
251
}
252
}
253
240
- ReactDOM.render(<Parent bar="initial" />, container);
254
+ const root = ReactDOMClient.createRoot(container);
255
+ await act(async () => {
256
+ root.render(<Parent bar="initial" />);
257
+ });
258
expect(portal.firstChild.innerHTML).toBe('hello');
259
});
260
261
// @gate !disableLegacyContext
245
- it('should get context through non-context-provider parent', () => {
262
+ it('should get context through non-context-provider parent', async () => {
263
const container = document.createElement('div');
264
document.body.appendChild(container);
265
const portal = document.createElement('div');
@@ -281,12 +298,15 @@ describe('renderSubtreeIntoContainer', () => {
298
}
299
}
300
284
- ReactDOM.render(<Parent value="foo" />, container);
301
+ const root = ReactDOMClient.createRoot(container);
302
+ await act(async () => {
303
+ root.render(<Parent value="foo" />);
304
+ });
305
expect(portal.textContent).toBe('foo');
306
});
307
308
// @gate !disableLegacyContext
289
- it('should get context through middle non-context-provider layer', () => {
309
+ it('should get context through middle non-context-provider layer', async () => {
310
const container = document.createElement('div');
311
document.body.appendChild(container);
312
const portal1 = document.createElement('div');
@@ -333,11 +353,14 @@ describe('renderSubtreeIntoContainer', () => {
353
}
354
}
355
336
- ReactDOM.render(<Parent value="foo" />, container);
356
+ const root = ReactDOMClient.createRoot(container);
357
+ await act(async () => {
358
+ root.render(<Parent value="foo" />);
359
+ });
360
expect(portal2.textContent).toBe('foo');
361
});
362
340
- it('fails gracefully when mixing React 15 and 16', () => {
363
+ it('legacy test: fails gracefully when mixing React 15 and 16', () => {
364
class C extends React.Component {
365
render() {
366
return <div />;