diff --git a/packages/react-dom/src/__tests__/renderSubtreeIntoContainer-test.js b/packages/react-dom/src/__tests__/renderSubtreeIntoContainer-test.js
index 49993b556ea22..4848fdebfd735 100644
--- a/packages/react-dom/src/__tests__/renderSubtreeIntoContainer-test.js
+++ b/packages/react-dom/src/__tests__/renderSubtreeIntoContainer-test.js
@@ -12,7 +12,9 @@
const React = require('react');
const PropTypes = require('prop-types');
const ReactDOM = require('react-dom');
+const ReactDOMClient = require('react-dom/client');
const ReactTestUtils = require('react-dom/test-utils');
+const act = require('internal-test-utils').act;
const renderSubtreeIntoContainer =
require('react-dom').unstable_renderSubtreeIntoContainer;
@@ -101,7 +103,7 @@ describe('renderSubtreeIntoContainer', () => {
});
// @gate !disableLegacyContext
- it('should update context if it changes due to setState', () => {
+ it('should update context if it changes due to setState', async () => {
const container = document.createElement('div');
document.body.appendChild(container);
const portal = document.createElement('div');
@@ -154,15 +156,22 @@ describe('renderSubtreeIntoContainer', () => {
);
}
}
+ const root = ReactDOMClient.createRoot(container);
+ const parentRef = React.createRef();
+ await act(async () => {
+ root.render();
+ });
+ const instance = parentRef.current;
- const instance = ReactDOM.render(, container);
expect(portal.firstChild.innerHTML).toBe('initial-initial');
- instance.setState({bar: 'changed'});
+ await act(async () => {
+ instance.setState({bar: 'changed'});
+ });
expect(portal.firstChild.innerHTML).toBe('changed-changed');
});
// @gate !disableLegacyContext
- it('should update context if it changes due to re-render', () => {
+ it('should update context if it changes due to re-render', async () => {
const container = document.createElement('div');
document.body.appendChild(container);
const portal = document.createElement('div');
@@ -212,13 +221,18 @@ describe('renderSubtreeIntoContainer', () => {
}
}
- ReactDOM.render(, container);
+ const root = ReactDOMClient.createRoot(container);
+ await act(async () => {
+ root.render();
+ });
expect(portal.firstChild.innerHTML).toBe('initial-initial');
- ReactDOM.render(, container);
+ await act(async () => {
+ root.render();
+ });
expect(portal.firstChild.innerHTML).toBe('changed-changed');
});
- it('should render portal with non-context-provider parent', () => {
+ it('should render portal with non-context-provider parent', async () => {
const container = document.createElement('div');
document.body.appendChild(container);
const portal = document.createElement('div');
@@ -237,12 +251,15 @@ describe('renderSubtreeIntoContainer', () => {
}
}
- ReactDOM.render(, container);
+ const root = ReactDOMClient.createRoot(container);
+ await act(async () => {
+ root.render();
+ });
expect(portal.firstChild.innerHTML).toBe('hello');
});
// @gate !disableLegacyContext
- it('should get context through non-context-provider parent', () => {
+ it('should get context through non-context-provider parent', async () => {
const container = document.createElement('div');
document.body.appendChild(container);
const portal = document.createElement('div');
@@ -281,12 +298,15 @@ describe('renderSubtreeIntoContainer', () => {
}
}
- ReactDOM.render(, container);
+ const root = ReactDOMClient.createRoot(container);
+ await act(async () => {
+ root.render();
+ });
expect(portal.textContent).toBe('foo');
});
// @gate !disableLegacyContext
- it('should get context through middle non-context-provider layer', () => {
+ it('should get context through middle non-context-provider layer', async () => {
const container = document.createElement('div');
document.body.appendChild(container);
const portal1 = document.createElement('div');
@@ -333,11 +353,14 @@ describe('renderSubtreeIntoContainer', () => {
}
}
- ReactDOM.render(, container);
+ const root = ReactDOMClient.createRoot(container);
+ await act(async () => {
+ root.render();
+ });
expect(portal2.textContent).toBe('foo');
});
- it('fails gracefully when mixing React 15 and 16', () => {
+ it('legacy test: fails gracefully when mixing React 15 and 16', () => {
class C extends React.Component {
render() {
return
;