@@ -14,7 +14,6 @@ let act;
14
14
let React ;
15
15
let ReactDOM ;
16
16
let ReactDOMClient ;
17
- let ReactTestUtils ;
18
17
let PropTypes ;
19
18
20
19
const clone = function ( o ) {
@@ -97,7 +96,6 @@ describe('ReactComponentLifeCycle', () => {
97
96
React = require ( 'react' ) ;
98
97
ReactDOM = require ( 'react-dom' ) ;
99
98
ReactDOMClient = require ( 'react-dom/client' ) ;
100
- ReactTestUtils = require ( 'react-dom/test-utils' ) ;
101
99
PropTypes = require ( 'prop-types' ) ;
102
100
} ) ;
103
101
@@ -189,7 +187,7 @@ describe('ReactComponentLifeCycle', () => {
189
187
190
188
// You could assign state here, but not access members of it, unless you
191
189
// had provided a getInitialState method.
192
- it ( 'throws when accessing state in componentWillMount' , ( ) => {
190
+ it ( 'throws when accessing state in componentWillMount' , async ( ) => {
193
191
class StatefulComponent extends React . Component {
194
192
UNSAFE_componentWillMount ( ) {
195
193
void this . state . yada ;
@@ -200,10 +198,13 @@ describe('ReactComponentLifeCycle', () => {
200
198
}
201
199
}
202
200
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 ( ) ;
207
208
} ) ;
208
209
209
210
it ( 'should allow update state inside of componentWillMount' , ( ) => {
@@ -217,9 +218,13 @@ describe('ReactComponentLifeCycle', () => {
217
218
}
218
219
}
219
220
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
+ } ) ;
223
228
} ) . not . toThrow ( ) ;
224
229
} ) ;
225
230
@@ -557,7 +562,7 @@ describe('ReactComponentLifeCycle', () => {
557
562
} ) ;
558
563
} ) ;
559
564
560
- it ( 'should allow state updates in componentDidMount' , ( ) => {
565
+ it ( 'should allow state updates in componentDidMount' , async ( ) => {
561
566
/**
562
567
* calls setState in an componentDidMount.
563
568
*/
@@ -575,13 +580,19 @@ describe('ReactComponentLifeCycle', () => {
575
580
}
576
581
}
577
582
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
+
585
596
expect ( instance . state . stateField ) . toBe ( 'goodbye' ) ;
586
597
} ) ;
587
598
0 commit comments