From af85573307b9d4e58d49c14e0441ace10093354b Mon Sep 17 00:00:00 2001 From: Sebastian Silbermann Date: Fri, 2 Feb 2024 00:51:10 +0100 Subject: [PATCH] Convert ReactScope to createRoot (#28172) --- .../src/__tests__/ReactScope-test.internal.js | 98 ++++++++++++++----- 1 file changed, 74 insertions(+), 24 deletions(-) diff --git a/packages/react-reconciler/src/__tests__/ReactScope-test.internal.js b/packages/react-reconciler/src/__tests__/ReactScope-test.internal.js index 66ae53a757d66..4ad7bab5614bb 100644 --- a/packages/react-reconciler/src/__tests__/ReactScope-test.internal.js +++ b/packages/react-reconciler/src/__tests__/ReactScope-test.internal.js @@ -26,12 +26,10 @@ describe('ReactScope', () => { }); describe('ReactDOM', () => { - let ReactDOM; let ReactDOMClient; let container; beforeEach(() => { - ReactDOM = require('react-dom'); ReactDOMClient = require('react-dom/client'); ReactDOMServer = require('react-dom/server'); container = document.createElement('div'); @@ -44,7 +42,7 @@ describe('ReactScope', () => { }); // @gate www - it('DO_NOT_USE_queryAllNodes() works as intended', () => { + it('DO_NOT_USE_queryAllNodes() works as intended', async () => { const testScopeQuery = (type, props) => true; const TestScope = React.unstable_Scope; const scopeRef = React.createRef(); @@ -68,18 +66,28 @@ describe('ReactScope', () => { ); } - ReactDOM.render(, container); + const root = ReactDOMClient.createRoot(container); + await act(() => { + root.render(); + }); + let nodes = scopeRef.current.DO_NOT_USE_queryAllNodes(testScopeQuery); expect(nodes).toEqual([divRef.current, spanRef.current, aRef.current]); - ReactDOM.render(, container); + await act(() => { + root.render(); + }); + nodes = scopeRef.current.DO_NOT_USE_queryAllNodes(testScopeQuery); expect(nodes).toEqual([aRef.current, divRef.current, spanRef.current]); - ReactDOM.render(null, container); + await act(() => { + root.render(null); + }); + expect(scopeRef.current).toBe(null); }); // @gate www - it('DO_NOT_USE_queryAllNodes() provides the correct host instance', () => { + it('DO_NOT_USE_queryAllNodes() provides the correct host instance', async () => { const testScopeQuery = (type, props) => type === 'div'; const TestScope = React.unstable_Scope; const scopeRef = React.createRef(); @@ -103,7 +111,11 @@ describe('ReactScope', () => { ); } - ReactDOM.render(, container); + const root = ReactDOMClient.createRoot(container); + await act(() => { + root.render(); + }); + let nodes = scopeRef.current.DO_NOT_USE_queryAllNodes(testScopeQuery); expect(nodes).toEqual([divRef.current]); let filterQuery = (type, props, instance) => @@ -115,18 +127,24 @@ describe('ReactScope', () => { testScopeQuery(type, props); nodes = scopeRef.current.DO_NOT_USE_queryAllNodes(filterQuery); expect(nodes).toEqual([divRef.current, spanRef.current, aRef.current]); - ReactDOM.render(, container); + await act(() => { + root.render(); + }); + filterQuery = (type, props, instance) => [spanRef.current, aRef.current].includes(instance) || testScopeQuery(type, props); nodes = scopeRef.current.DO_NOT_USE_queryAllNodes(filterQuery); expect(nodes).toEqual([aRef.current, divRef.current, spanRef.current]); - ReactDOM.render(null, container); + await act(() => { + root.render(null); + }); + expect(scopeRef.current).toBe(null); }); // @gate www - it('DO_NOT_USE_queryFirstNode() works as intended', () => { + it('DO_NOT_USE_queryFirstNode() works as intended', async () => { const testScopeQuery = (type, props) => true; const TestScope = React.unstable_Scope; const scopeRef = React.createRef(); @@ -150,18 +168,28 @@ describe('ReactScope', () => { ); } - ReactDOM.render(, container); + const root = ReactDOMClient.createRoot(container); + await act(() => { + root.render(); + }); + let node = scopeRef.current.DO_NOT_USE_queryFirstNode(testScopeQuery); expect(node).toEqual(divRef.current); - ReactDOM.render(, container); + await act(() => { + root.render(); + }); + node = scopeRef.current.DO_NOT_USE_queryFirstNode(testScopeQuery); expect(node).toEqual(aRef.current); - ReactDOM.render(null, container); + await act(() => { + root.render(null); + }); + expect(scopeRef.current).toBe(null); }); // @gate www - it('containsNode() works as intended', () => { + it('containsNode() works as intended', async () => { const TestScope = React.unstable_Scope; const scopeRef = React.createRef(); const divRef = React.createRef(); @@ -194,24 +222,34 @@ describe('ReactScope', () => { ); } - ReactDOM.render(, container); + const root = ReactDOMClient.createRoot(container); + await act(() => { + root.render(); + }); + expect(scopeRef.current.containsNode(divRef.current)).toBe(true); expect(scopeRef.current.containsNode(spanRef.current)).toBe(true); expect(scopeRef.current.containsNode(aRef.current)).toBe(true); expect(scopeRef.current.containsNode(outerSpan.current)).toBe(false); expect(scopeRef.current.containsNode(emRef.current)).toBe(false); - ReactDOM.render(, container); + await act(() => { + root.render(); + }); + expect(scopeRef.current.containsNode(divRef.current)).toBe(true); expect(scopeRef.current.containsNode(spanRef.current)).toBe(true); expect(scopeRef.current.containsNode(aRef.current)).toBe(true); expect(scopeRef.current.containsNode(outerSpan.current)).toBe(false); expect(scopeRef.current.containsNode(emRef.current)).toBe(true); - ReactDOM.render(, container); + await act(() => { + root.render(); + }); + expect(scopeRef.current.containsNode(emRef.current)).toBe(false); }); // @gate www - it('scopes support server-side rendering and hydration', () => { + it('scopes support server-side rendering and hydration', async () => { const TestScope = React.unstable_Scope; const scopeRef = React.createRef(); const divRef = React.createRef(); @@ -235,14 +273,16 @@ describe('ReactScope', () => { '
DIV
SPANA
Outside content!
', ); container.innerHTML = html; - ReactDOM.hydrate(, container); + await act(() => { + ReactDOMClient.hydrateRoot(container, ); + }); const testScopeQuery = (type, props) => true; const nodes = scopeRef.current.DO_NOT_USE_queryAllNodes(testScopeQuery); expect(nodes).toEqual([divRef.current, spanRef.current, aRef.current]); }); // @gate www - it('getChildContextValues() works as intended', () => { + it('getChildContextValues() works as intended', async () => { const TestContext = React.createContext(); const TestScope = React.unstable_Scope; const scopeRef = React.createRef(); @@ -260,13 +300,23 @@ describe('ReactScope', () => { ); } - ReactDOM.render(, container); + const root = ReactDOMClient.createRoot(container); + await act(() => { + root.render(); + }); + let nodes = scopeRef.current.getChildContextValues(TestContext); expect(nodes).toEqual([1]); - ReactDOM.render(, container); + await act(() => { + root.render(); + }); + nodes = scopeRef.current.getChildContextValues(TestContext); expect(nodes).toEqual([1, 2]); - ReactDOM.render(null, container); + await act(() => { + root.render(null); + }); + expect(scopeRef.current).toBe(null); });