diff --git a/packages/react/src/__tests__/ReactContextValidator-test.js b/packages/react/src/__tests__/ReactContextValidator-test.js
index f8edacb25a306..5e79635a68dec 100644
--- a/packages/react/src/__tests__/ReactContextValidator-test.js
+++ b/packages/react/src/__tests__/ReactContextValidator-test.js
@@ -18,7 +18,6 @@
let PropTypes;
let React;
let ReactDOMClient;
-let ReactTestUtils;
let act;
describe('ReactContextValidator', () => {
@@ -28,7 +27,6 @@ describe('ReactContextValidator', () => {
PropTypes = require('prop-types');
React = require('react');
ReactDOMClient = require('react-dom/client');
- ReactTestUtils = require('react-dom/test-utils');
act = require('internal-test-utils').act;
});
@@ -36,7 +34,7 @@ describe('ReactContextValidator', () => {
// ensure that this is not required for ES6 classes with Flow.
// @gate !disableLegacyContext
- it('should filter out context not in contextTypes', () => {
+ it('should filter out context not in contextTypes', async () => {
class Component extends React.Component {
render() {
return
;
@@ -65,9 +63,14 @@ describe('ReactContextValidator', () => {
bar: PropTypes.number,
};
- const instance = ReactTestUtils.renderIntoDocument(
- ,
- );
+ let instance;
+ const container = document.createElement('div');
+ const root = ReactDOMClient.createRoot(container);
+ await act(() => {
+ root.render(
+ (instance = current)} />,
+ );
+ });
expect(instance.childRef.current.context).toEqual({foo: 'abc'});
});
@@ -160,7 +163,7 @@ describe('ReactContextValidator', () => {
// TODO (bvaughn) Remove this test and the associated behavior in the future.
// It has only been added in Fiber to match the (unintentional) behavior in Stack.
// @gate !disableLegacyContext || !__DEV__
- it('should warn (but not error) if getChildContext method is missing', () => {
+ it('should warn (but not error) if getChildContext method is missing', async () => {
class ComponentA extends React.Component {
static childContextTypes = {
foo: PropTypes.string.isRequired,
@@ -178,16 +181,32 @@ describe('ReactContextValidator', () => {
}
}
- expect(() => ReactTestUtils.renderIntoDocument()).toErrorDev(
+ await expect(async () => {
+ const container = document.createElement('div');
+ const root = ReactDOMClient.createRoot(container);
+ await act(() => {
+ root.render();
+ });
+ }).toErrorDev(
'Warning: ComponentA.childContextTypes is specified but there is no ' +
'getChildContext() method on the instance. You can either define ' +
'getChildContext() on ComponentA or remove childContextTypes from it.',
);
// Warnings should be deduped by component type
- ReactTestUtils.renderIntoDocument();
+ let container = document.createElement('div');
+ let root = ReactDOMClient.createRoot(container);
+ await act(() => {
+ root.render();
+ });
- expect(() => ReactTestUtils.renderIntoDocument()).toErrorDev(
+ await expect(async () => {
+ container = document.createElement('div');
+ root = ReactDOMClient.createRoot(container);
+ await act(() => {
+ root.render();
+ });
+ }).toErrorDev(
'Warning: ComponentB.childContextTypes is specified but there is no ' +
'getChildContext() method on the instance. You can either define ' +
'getChildContext() on ComponentB or remove childContextTypes from it.',
@@ -197,7 +216,7 @@ describe('ReactContextValidator', () => {
// TODO (bvaughn) Remove this test and the associated behavior in the future.
// It has only been added in Fiber to match the (unintentional) behavior in Stack.
// @gate !disableLegacyContext
- it('should pass parent context if getChildContext method is missing', () => {
+ it('should pass parent context if getChildContext method is missing', async () => {
class ParentContextProvider extends React.Component {
static childContextTypes = {
foo: PropTypes.string,
@@ -233,9 +252,13 @@ describe('ReactContextValidator', () => {
foo: PropTypes.string.isRequired,
};
- expect(() =>
- ReactTestUtils.renderIntoDocument(),
- ).toErrorDev([
+ await expect(async () => {
+ const container = document.createElement('div');
+ const root = ReactDOMClient.createRoot(container);
+ await act(() => {
+ root.render();
+ });
+ }).toErrorDev([
'Warning: MiddleMissingContext.childContextTypes is specified but there is no ' +
'getChildContext() method on the instance. You can either define getChildContext() ' +
'on MiddleMissingContext or remove childContextTypes from it.',
@@ -366,7 +389,7 @@ describe('ReactContextValidator', () => {
});
// @gate !disableLegacyContext || !__DEV__
- it('should warn if both contextType and contextTypes are defined', () => {
+ it('should warn if both contextType and contextTypes are defined', async () => {
const Context = React.createContext();
class ParentContextProvider extends React.Component {
@@ -402,38 +425,50 @@ describe('ReactContextValidator', () => {
}
}
- expect(() =>
- ReactTestUtils.renderIntoDocument(
-
-
- ,
- ),
- ).toErrorDev(
+ await expect(async () => {
+ const container = document.createElement('div');
+ const root = ReactDOMClient.createRoot(container);
+ await act(() => {
+ root.render(
+
+
+ ,
+ );
+ });
+ }).toErrorDev(
'Warning: ComponentA declares both contextTypes and contextType static properties. ' +
'The legacy contextTypes property will be ignored.',
);
// Warnings should be deduped by component type
- ReactTestUtils.renderIntoDocument(
-
-
- ,
- );
-
- expect(() =>
- ReactTestUtils.renderIntoDocument(
+ let container = document.createElement('div');
+ let root = ReactDOMClient.createRoot(container);
+ await act(() => {
+ root.render(
-
+
,
- ),
- ).toErrorDev(
+ );
+ });
+
+ await expect(async () => {
+ container = document.createElement('div');
+ root = ReactDOMClient.createRoot(container);
+ await act(() => {
+ root.render(
+
+
+ ,
+ );
+ });
+ }).toErrorDev(
'Warning: ComponentB declares both contextTypes and contextType static properties. ' +
'The legacy contextTypes property will be ignored.',
);
});
// @gate enableRenderableContext || !__DEV__
- it('should warn if an invalid contextType is defined', () => {
+ it('should warn if an invalid contextType is defined', async () => {
const Context = React.createContext();
class ComponentA extends React.Component {
static contextType = Context.Consumer;
@@ -442,16 +477,23 @@ describe('ReactContextValidator', () => {
}
}
- expect(() => {
- ReactTestUtils.renderIntoDocument();
+ await expect(async () => {
+ const container = document.createElement('div');
+ const root = ReactDOMClient.createRoot(container);
+ await act(() => {
+ root.render();
+ });
}).toErrorDev(
'Warning: ComponentA defines an invalid contextType. ' +
'contextType should point to the Context object returned by React.createContext(). ' +
'Did you accidentally pass the Context.Consumer instead?',
);
- // Warnings should be deduped by component type
- ReactTestUtils.renderIntoDocument();
+ let container = document.createElement('div');
+ let root = ReactDOMClient.createRoot(container);
+ await act(() => {
+ root.render();
+ });
class ComponentB extends React.Component {
static contextType = Context.Provider;
@@ -459,23 +501,30 @@ describe('ReactContextValidator', () => {
return ;
}
}
- // This doesn't warn since Context.Provider === Context now.
- ReactTestUtils.renderIntoDocument();
+ container = document.createElement('div');
+ root = ReactDOMClient.createRoot(container);
+ await act(() => {
+ root.render();
+ });
});
- it('should not warn when class contextType is null', () => {
+ it('should not warn when class contextType is null', async () => {
class Foo extends React.Component {
static contextType = null; // Handy for conditional declaration
render() {
return this.context.hello.world;
}
}
- expect(() => {
- ReactTestUtils.renderIntoDocument();
- }).toThrow("Cannot read property 'world' of undefined");
+ await expect(async () => {
+ const container = document.createElement('div');
+ const root = ReactDOMClient.createRoot(container);
+ await act(() => {
+ root.render();
+ });
+ }).rejects.toThrow("Cannot read properties of undefined (reading 'world')");
});
- it('should warn when class contextType is undefined', () => {
+ it('should warn when class contextType is undefined', async () => {
class Foo extends React.Component {
// This commonly happens with circular deps
// https://github.com/facebook/react/issues/13969
@@ -485,10 +534,16 @@ describe('ReactContextValidator', () => {
}
}
- expect(() => {
- expect(() => {
- ReactTestUtils.renderIntoDocument();
- }).toThrow("Cannot read property 'world' of undefined");
+ await expect(async () => {
+ await expect(async () => {
+ const container = document.createElement('div');
+ const root = ReactDOMClient.createRoot(container);
+ await act(() => {
+ root.render();
+ });
+ }).rejects.toThrow(
+ "Cannot read properties of undefined (reading 'world')",
+ );
}).toErrorDev(
'Foo defines an invalid contextType. ' +
'contextType should point to the Context object returned by React.createContext(). ' +
@@ -499,7 +554,7 @@ describe('ReactContextValidator', () => {
);
});
- it('should warn when class contextType is an object', () => {
+ it('should warn when class contextType is an object', async () => {
class Foo extends React.Component {
// Can happen due to a typo
static contextType = {
@@ -511,10 +566,16 @@ describe('ReactContextValidator', () => {
}
}
- expect(() => {
- expect(() => {
- ReactTestUtils.renderIntoDocument();
- }).toThrow("Cannot read property 'hello' of undefined");
+ await expect(async () => {
+ await expect(async () => {
+ const container = document.createElement('div');
+ const root = ReactDOMClient.createRoot(container);
+ await act(() => {
+ root.render();
+ });
+ }).rejects.toThrow(
+ "Cannot read properties of undefined (reading 'hello')",
+ );
}).toErrorDev(
'Foo defines an invalid contextType. ' +
'contextType should point to the Context object returned by React.createContext(). ' +
@@ -522,7 +583,7 @@ describe('ReactContextValidator', () => {
);
});
- it('should warn when class contextType is a primitive', () => {
+ it('should warn when class contextType is a primitive', async () => {
class Foo extends React.Component {
static contextType = 'foo';
render() {
@@ -530,10 +591,16 @@ describe('ReactContextValidator', () => {
}
}
- expect(() => {
- expect(() => {
- ReactTestUtils.renderIntoDocument();
- }).toThrow("Cannot read property 'world' of undefined");
+ await expect(async () => {
+ await expect(async () => {
+ const container = document.createElement('div');
+ const root = ReactDOMClient.createRoot(container);
+ await act(() => {
+ root.render();
+ });
+ }).rejects.toThrow(
+ "Cannot read properties of undefined (reading 'world')",
+ );
}).toErrorDev(
'Foo defines an invalid contextType. ' +
'contextType should point to the Context object returned by React.createContext(). ' +
@@ -541,7 +608,7 @@ describe('ReactContextValidator', () => {
);
});
- it('should warn if you define contextType on a function component', () => {
+ it('should warn if you define contextType on a function component', async () => {
const Context = React.createContext();
function ComponentA() {
@@ -554,14 +621,30 @@ describe('ReactContextValidator', () => {
}
ComponentB.contextType = Context;
- expect(() => ReactTestUtils.renderIntoDocument()).toErrorDev(
+ await expect(async () => {
+ const container = document.createElement('div');
+ const root = ReactDOMClient.createRoot(container);
+ await act(() => {
+ root.render();
+ });
+ }).toErrorDev(
'Warning: ComponentA: Function components do not support contextType.',
);
// Warnings should be deduped by component type
- ReactTestUtils.renderIntoDocument();
+ let container = document.createElement('div');
+ let root = ReactDOMClient.createRoot(container);
+ await act(() => {
+ root.render();
+ });
- expect(() => ReactTestUtils.renderIntoDocument()).toErrorDev(
+ await expect(async () => {
+ container = document.createElement('div');
+ root = ReactDOMClient.createRoot(container);
+ await act(() => {
+ root.render();
+ });
+ }).toErrorDev(
'Warning: ComponentB: Function components do not support contextType.',
);
});