@@ -14,7 +14,6 @@ let act;
1414let React ;
1515let ReactDOM ;
1616let ReactDOMClient ;
17- let ReactTestUtils ;
1817let PropTypes ;
1918
2019const clone = function ( o ) {
@@ -97,7 +96,6 @@ describe('ReactComponentLifeCycle', () => {
9796 React = require ( 'react' ) ;
9897 ReactDOM = require ( 'react-dom' ) ;
9998 ReactDOMClient = require ( 'react-dom/client' ) ;
100- ReactTestUtils = require ( 'react-dom/test-utils' ) ;
10199 PropTypes = require ( 'prop-types' ) ;
102100 } ) ;
103101
@@ -189,7 +187,7 @@ describe('ReactComponentLifeCycle', () => {
189187
190188 // You could assign state here, but not access members of it, unless you
191189 // had provided a getInitialState method.
192- it ( 'throws when accessing state in componentWillMount' , ( ) => {
190+ it ( 'throws when accessing state in componentWillMount' , async ( ) => {
193191 class StatefulComponent extends React . Component {
194192 UNSAFE_componentWillMount ( ) {
195193 void this . state . yada ;
@@ -200,10 +198,13 @@ describe('ReactComponentLifeCycle', () => {
200198 }
201199 }
202200
203- let instance = < StatefulComponent /> ;
204- expect ( function ( ) {
205- instance = ReactTestUtils . renderIntoDocument ( instance ) ;
206- } ) . toThrow ( ) ;
201+ const container = document . createElement ( 'div' ) ;
202+ const root = ReactDOMClient . createRoot ( container ) ;
203+ await expect (
204+ act ( ( ) => {
205+ root . render ( < StatefulComponent /> ) ;
206+ } ) ,
207+ ) . rejects . toThrow ( ) ;
207208 } ) ;
208209
209210 it ( 'should allow update state inside of componentWillMount' , ( ) => {
@@ -217,9 +218,13 @@ describe('ReactComponentLifeCycle', () => {
217218 }
218219 }
219220
220- let instance = < StatefulComponent /> ;
221- expect ( function ( ) {
222- instance = ReactTestUtils . renderIntoDocument ( instance ) ;
221+ expect ( async function ( ) {
222+ const container = document . createElement ( 'div' ) ;
223+ const root = ReactDOMClient . createRoot ( container ) ;
224+
225+ await act ( ( ) => {
226+ root . render ( < StatefulComponent /> ) ;
227+ } ) ;
223228 } ) . not . toThrow ( ) ;
224229 } ) ;
225230
@@ -557,7 +562,7 @@ describe('ReactComponentLifeCycle', () => {
557562 } ) ;
558563 } ) ;
559564
560- it ( 'should allow state updates in componentDidMount' , ( ) => {
565+ it ( 'should allow state updates in componentDidMount' , async ( ) => {
561566 /**
562567 * calls setState in an componentDidMount.
563568 */
@@ -575,13 +580,19 @@ describe('ReactComponentLifeCycle', () => {
575580 }
576581 }
577582
578- let instance = (
579- < SetStateInComponentDidMount
580- valueToUseInitially = "hello"
581- valueToUseInOnDOMReady = "goodbye"
582- />
583- ) ;
584- instance = ReactTestUtils . renderIntoDocument ( instance ) ;
583+ let instance ;
584+ const container = document . createElement ( 'div' ) ;
585+ const root = ReactDOMClient . createRoot ( container ) ;
586+ await act ( ( ) => {
587+ root . render (
588+ < SetStateInComponentDidMount
589+ ref = { current => ( instance = current ) }
590+ valueToUseInitially = "hello"
591+ valueToUseInOnDOMReady = "goodbye"
592+ /> ,
593+ ) ;
594+ } ) ;
595+
585596 expect ( instance . state . stateField ) . toBe ( 'goodbye' ) ;
586597 } ) ;
587598
0 commit comments