From 25e2ceb7d6dcaa685693cab2c51dc0ae0dc7b4c8 Mon Sep 17 00:00:00 2001 From: Matt Carroll Date: Fri, 26 Jan 2024 10:47:55 -0800 Subject: [PATCH] Convert renderSubtreeIntoContainer-test.js to createRoot --- .../renderSubtreeIntoContainer-test.js | 65 ++++++++++++++----- 1 file changed, 48 insertions(+), 17 deletions(-) diff --git a/packages/react-dom/src/__tests__/renderSubtreeIntoContainer-test.js b/packages/react-dom/src/__tests__/renderSubtreeIntoContainer-test.js index 49993b556ea22..5e17ecc8ddd3a 100644 --- a/packages/react-dom/src/__tests__/renderSubtreeIntoContainer-test.js +++ b/packages/react-dom/src/__tests__/renderSubtreeIntoContainer-test.js @@ -11,8 +11,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 +102,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 +155,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 +220,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 +250,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 +297,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,21 +352,33 @@ 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('fails gracefully when mixing React 15 and 16', async () => { class C extends React.Component { render() { return
; } } - const c = ReactDOM.render(, document.createElement('div')); + + const container = document.createElement('div'); + const root = ReactDOMClient.createRoot(container); + const componentRef = React.createRef(); + await act(async () => { + root.render(); + }); // React 15 calls this: // https://github.com/facebook/react/blob/77b71fc3c4/src/renderers/dom/client/ReactMount.js#L478-L479 - expect(() => { - c._reactInternalInstance._processChildContext({}); + const component = componentRef.current; + await expect(async () => { + act(async () => { + component._reactInternalInstance._processChildContext({}); + }); }).toThrow( __DEV__ ? '_processChildContext is not available in React 16+. This likely ' +