diff --git a/packages/react/src/__tests__/ReactJSXElementValidator-test.js b/packages/react/src/__tests__/ReactJSXElementValidator-test.js
index 71753ed0ace20..62d29ee68fefb 100644
--- a/packages/react/src/__tests__/ReactJSXElementValidator-test.js
+++ b/packages/react/src/__tests__/ReactJSXElementValidator-test.js
@@ -13,8 +13,10 @@
// of dynamic errors when using JSX with Flow.
let React;
let ReactDOM;
+let ReactDOMClient;
let ReactTestUtils;
let PropTypes;
+let act;
describe('ReactJSXElementValidator', () => {
let Component;
@@ -26,7 +28,9 @@ describe('ReactJSXElementValidator', () => {
PropTypes = require('prop-types');
React = require('react');
ReactDOM = require('react-dom');
+ ReactDOMClient = require('react-dom/client');
ReactTestUtils = require('react-dom/test-utils');
+ act = require('internal-test-utils').act;
Component = class extends React.Component {
render() {
@@ -172,7 +176,7 @@ describe('ReactJSXElementValidator', () => {
);
});
- it('should update component stack after receiving next element', () => {
+ it('should update component stack after receiving next element', async () => {
function MyComp() {
return null;
}
@@ -192,9 +196,14 @@ describe('ReactJSXElementValidator', () => {
}
const container = document.createElement('div');
- ReactDOM.render(, container);
+ const root = ReactDOMClient.createRoot(container);
+ await act(() => {
+ root.render();
+ });
expect(() =>
- ReactDOM.render(, container),
+ ReactDOM.flushSync(() => {
+ root.render();
+ }),
).toErrorDev(
'Warning: Failed prop type: ' +
'Invalid prop `color` of type `number` supplied to `MyComp`, ' +