diff --git a/packages/react-dom/src/__tests__/ReactLegacyContextDisabled-test.internal.js b/packages/react-dom/src/__tests__/ReactLegacyContextDisabled-test.internal.js index bd712074ceb0e..b73e25f2e168c 100644 --- a/packages/react-dom/src/__tests__/ReactLegacyContextDisabled-test.internal.js +++ b/packages/react-dom/src/__tests__/ReactLegacyContextDisabled-test.internal.js @@ -10,19 +10,21 @@ 'use strict'; let React; -let ReactDOM; +let ReactDOMClient; let ReactDOMServer; let ReactFeatureFlags; +let act; describe('ReactLegacyContextDisabled', () => { beforeEach(() => { jest.resetModules(); React = require('react'); - ReactDOM = require('react-dom'); + ReactDOMClient = require('react-dom/client'); ReactDOMServer = require('react-dom/server'); ReactFeatureFlags = require('shared/ReactFeatureFlags'); ReactFeatureFlags.disableLegacyContext = true; + act = require('internal-test-utils').act; }); function formatValue(val) { @@ -38,7 +40,7 @@ describe('ReactLegacyContextDisabled', () => { return JSON.stringify(val); } - it('warns for legacy context', () => { + it('warns for legacy context', async () => { class LegacyProvider extends React.Component { static childContextTypes = { foo() {}, @@ -81,17 +83,19 @@ describe('ReactLegacyContextDisabled', () => { } const container = document.createElement('div'); - expect(() => { - ReactDOM.render( - - - - - - - , - container, - ); + const root = ReactDOMClient.createRoot(container); + await expect(async () => { + await act(() => { + root.render( + + + + + + + , + ); + }); }).toErrorDev([ 'LegacyProvider uses the legacy childContextTypes API which is no longer supported. ' + 'Use React.createContext() instead.', @@ -104,19 +108,20 @@ describe('ReactLegacyContextDisabled', () => { expect(lifecycleContextLog).toEqual([]); // Test update path. - ReactDOM.render( - - - - - - - , - container, - ); + await act(() => { + root.render( + + + + + + + , + ); + }); expect(container.textContent).toBe('{}undefinedundefined'); expect(lifecycleContextLog).toEqual([{}, {}, {}]); - ReactDOM.unmountComponentAtNode(container); + root.unmount(); // test server path. let text; @@ -143,7 +148,7 @@ describe('ReactLegacyContextDisabled', () => { expect(lifecycleContextLog).toEqual([{}, {}, {}]); }); - it('renders a tree with modern context', () => { + it('renders a tree with modern context', async () => { const Ctx = React.createContext(); class Provider extends React.Component { @@ -185,44 +190,48 @@ describe('ReactLegacyContextDisabled', () => { } const container = document.createElement('div'); - ReactDOM.render( - - - - - - - , - container, - ); + const root = ReactDOMClient.createRoot(container); + await act(() => { + root.render( + + + + + + + , + ); + }); expect(container.textContent).toBe('aaa'); expect(lifecycleContextLog).toEqual([]); // Test update path - ReactDOM.render( - - - - - - - , - container, - ); + await act(() => { + root.render( + + + + + + + , + ); + }); expect(container.textContent).toBe('aaa'); expect(lifecycleContextLog).toEqual(['a', 'a', 'a']); lifecycleContextLog.length = 0; - ReactDOM.render( - - - - - - - , - container, - ); + await act(() => { + root.render( + + + + + + + , + ); + }); expect(container.textContent).toBe('bbb'); if (gate(flags => flags.enableLazyContextPropagation)) { // In the lazy propagation implementation, we don't check if context @@ -233,6 +242,6 @@ describe('ReactLegacyContextDisabled', () => { // changed, so we skipped sCU. expect(lifecycleContextLog).toEqual(['b', 'b']); } - ReactDOM.unmountComponentAtNode(container); + root.unmount(); }); });