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
;