From 25e2ceb7d6dcaa685693cab2c51dc0ae0dc7b4c8 Mon Sep 17 00:00:00 2001 From: Matt Carroll Date: Fri, 26 Jan 2024 10:47:55 -0800 Subject: [PATCH 1/3] 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 ' + From 13639f5d498d5a010e76fbf8271a79e4d1408833 Mon Sep 17 00:00:00 2001 From: Matt Carroll Date: Fri, 26 Jan 2024 13:42:01 -0800 Subject: [PATCH 2/3] rollback changes to legacy test --- .../renderSubtreeIntoContainer-test.js | 20 +++++++------------ 1 file changed, 7 insertions(+), 13 deletions(-) diff --git a/packages/react-dom/src/__tests__/renderSubtreeIntoContainer-test.js b/packages/react-dom/src/__tests__/renderSubtreeIntoContainer-test.js index 5e17ecc8ddd3a..fb0dccd0459e4 100644 --- a/packages/react-dom/src/__tests__/renderSubtreeIntoContainer-test.js +++ b/packages/react-dom/src/__tests__/renderSubtreeIntoContainer-test.js @@ -11,6 +11,7 @@ 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; @@ -359,26 +360,19 @@ describe('renderSubtreeIntoContainer', () => { expect(portal2.textContent).toBe('foo'); }); - it('fails gracefully when mixing React 15 and 16', async () => { + it('legacy test: fails gracefully when mixing React 15 and 16', () => { class C extends React.Component { render() { return
; } } - - const container = document.createElement('div'); - const root = ReactDOMClient.createRoot(container); - const componentRef = React.createRef(); - await act(async () => { - root.render(); - }); + // ReactDOM.render shouldn't be converted to `createRoot` because + // `reacteRoot` didn't exist in React 15. + const c = ReactDOM.render(, document.createElement('div')); // React 15 calls this: // https://github.com/facebook/react/blob/77b71fc3c4/src/renderers/dom/client/ReactMount.js#L478-L479 - const component = componentRef.current; - await expect(async () => { - act(async () => { - component._reactInternalInstance._processChildContext({}); - }); + expect(() => { + c._reactInternalInstance._processChildContext({}); }).toThrow( __DEV__ ? '_processChildContext is not available in React 16+. This likely ' + From 89a97f5e52f6dc59ca71aa45217c22e9db7800ae Mon Sep 17 00:00:00 2001 From: Ricky Date: Fri, 26 Jan 2024 18:02:25 -0500 Subject: [PATCH 3/3] Update packages/react-dom/src/__tests__/renderSubtreeIntoContainer-test.js --- .../react-dom/src/__tests__/renderSubtreeIntoContainer-test.js | 2 -- 1 file changed, 2 deletions(-) diff --git a/packages/react-dom/src/__tests__/renderSubtreeIntoContainer-test.js b/packages/react-dom/src/__tests__/renderSubtreeIntoContainer-test.js index fb0dccd0459e4..4848fdebfd735 100644 --- a/packages/react-dom/src/__tests__/renderSubtreeIntoContainer-test.js +++ b/packages/react-dom/src/__tests__/renderSubtreeIntoContainer-test.js @@ -366,8 +366,6 @@ describe('renderSubtreeIntoContainer', () => { return
; } } - // ReactDOM.render shouldn't be converted to `createRoot` because - // `reacteRoot` didn't exist in React 15. const c = ReactDOM.render(, document.createElement('div')); // React 15 calls this: // https://github.com/facebook/react/blob/77b71fc3c4/src/renderers/dom/client/ReactMount.js#L478-L479