1313// of dynamic errors when using JSX with Flow.
1414let React ;
1515let ReactDOM ;
16+ let ReactDOMClient ;
1617let ReactTestUtils ;
1718let PropTypes ;
19+ let act ;
1820
1921describe ( 'ReactJSXElementValidator' , ( ) => {
2022 let Component ;
@@ -26,7 +28,9 @@ describe('ReactJSXElementValidator', () => {
2628 PropTypes = require ( 'prop-types' ) ;
2729 React = require ( 'react' ) ;
2830 ReactDOM = require ( 'react-dom' ) ;
31+ ReactDOMClient = require ( 'react-dom/client' ) ;
2932 ReactTestUtils = require ( 'react-dom/test-utils' ) ;
33+ act = require ( 'internal-test-utils' ) . act ;
3034
3135 Component = class extends React . Component {
3236 render ( ) {
@@ -172,7 +176,7 @@ describe('ReactJSXElementValidator', () => {
172176 ) ;
173177 } ) ;
174178
175- it ( 'should update component stack after receiving next element' , ( ) => {
179+ it ( 'should update component stack after receiving next element' , async ( ) => {
176180 function MyComp ( ) {
177181 return null ;
178182 }
@@ -192,9 +196,14 @@ describe('ReactJSXElementValidator', () => {
192196 }
193197
194198 const container = document . createElement ( 'div' ) ;
195- ReactDOM . render ( < ParentComp warn = { false } /> , container ) ;
199+ const root = ReactDOMClient . createRoot ( container ) ;
200+ await act ( ( ) => {
201+ root . render ( < ParentComp warn = { false } /> ) ;
202+ } ) ;
196203 expect ( ( ) =>
197- ReactDOM . render ( < ParentComp warn = { true } /> , container ) ,
204+ ReactDOM . flushSync ( ( ) => {
205+ root . render ( < ParentComp warn = { true } /> ) ;
206+ } ) ,
198207 ) . toErrorDev (
199208 'Warning: Failed prop type: ' +
200209 'Invalid prop `color` of type `number` supplied to `MyComp`, ' +
0 commit comments