Remove ReactTestUtils from ReactComponentLifeCycle (#28376)
Sebastian Silbermann committed
Feb 20, 2024 at 16:51 UTC
3c9560b29e77f11b2dc39ccb05a92361e9af2a1d
1 file changed
+29
-18
packages/react-dom/src/__tests__/ReactComponentLifeCycle-test.js
+29
-18
@@ -14,7 +14,6 @@ let act;
14
let React;
15
let ReactDOM;
16
let ReactDOMClient;
17
-let ReactTestUtils;
17
let PropTypes;
18
19
const clone = function (o) {
@@ -97,7 +96,6 @@ describe('ReactComponentLifeCycle', () => {
96
React = require('react');
97
ReactDOM = require('react-dom');
98
ReactDOMClient = require('react-dom/client');
100
- ReactTestUtils = require('react-dom/test-utils');
99
PropTypes = require('prop-types');
100
});
101
@@ -189,7 +187,7 @@ describe('ReactComponentLifeCycle', () => {
187
188
// You could assign state here, but not access members of it, unless you
189
// had provided a getInitialState method.
192
- it('throws when accessing state in componentWillMount', () => {
190
+ it('throws when accessing state in componentWillMount', async () => {
191
class StatefulComponent extends React.Component {
192
UNSAFE_componentWillMount() {
193
void this.state.yada;
@@ -200,10 +198,13 @@ describe('ReactComponentLifeCycle', () => {
198
}
199
}
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();
208
});
209
210
it('should allow update state inside of componentWillMount', () => {
@@ -217,9 +218,13 @@ describe('ReactComponentLifeCycle', () => {
218
}
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
+ });
228
}).not.toThrow();
229
});
230
@@ -557,7 +562,7 @@ describe('ReactComponentLifeCycle', () => {
562
});
563
});
564
560
- it('should allow state updates in componentDidMount', () => {
565
+ it('should allow state updates in componentDidMount', async () => {
566
/**
567
* calls setState in an componentDidMount.
568
*/
@@ -575,13 +580,19 @@ describe('ReactComponentLifeCycle', () => {
580
}
581
}
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
+
596
expect(instance.state.stateField).toBe('goodbye');
597
});
598