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();
});
});