Remove usage of /test-utils in ReactLegacyCompositeComponent (#28201)
Sebastian Silbermann committed
Feb 2, 2024 at 09:14 UTC
11aa263844cc90b3677782c9b8bafa3fe22fd389
1 file changed
+79
-31
packages/react-dom/src/__tests__/ReactLegacyCompositeComponent-test.js
+79
-31
@@ -11,16 +11,18 @@
11
12
let React;
13
let ReactDOM;
14
-let ReactTestUtils;
14
+let ReactDOMClient;
15
let PropTypes;
16
+let act;
17
18
describe('ReactLegacyCompositeComponent', () => {
19
beforeEach(() => {
20
jest.resetModules();
21
React = require('react');
22
ReactDOM = require('react-dom');
22
- ReactTestUtils = require('react-dom/test-utils');
23
+ ReactDOMClient = require('react-dom/client');
24
PropTypes = require('prop-types');
25
+ act = require('internal-test-utils').act;
26
});
27
28
it('should warn about `setState` in render in legacy mode', () => {
@@ -70,7 +72,7 @@ describe('ReactLegacyCompositeComponent', () => {
72
});
73
74
// @gate !disableLegacyContext
73
- it('should pass context to children when not owner', () => {
75
+ it('should pass context to children when not owner', async () => {
76
class Parent extends React.Component {
77
render() {
78
return (
@@ -106,13 +108,17 @@ describe('ReactLegacyCompositeComponent', () => {
108
return <div>{this.context.foo}</div>;
109
}
110
}
109
-
110
- const component = ReactTestUtils.renderIntoDocument(<Parent />);
111
+ const container = document.createElement('div');
112
+ const root = ReactDOMClient.createRoot(container);
113
+ let component;
114
+ await act(() => {
115
+ root.render(<Parent ref={current => (component = current)} />);
116
+ });
117
expect(ReactDOM.findDOMNode(component).innerHTML).toBe('bar');
118
});
119
120
// @gate !disableLegacyContext
115
- it('should pass context when re-rendered for static child', () => {
121
+ it('should pass context when re-rendered for static child', async () => {
122
let parentInstance = null;
123
let childInstance = null;
124
@@ -156,24 +162,31 @@ describe('ReactLegacyCompositeComponent', () => {
162
}
163
}
164
159
- parentInstance = ReactTestUtils.renderIntoDocument(
160
- <Parent>
161
- <Middle>
162
- <Child />
163
- </Middle>
164
- </Parent>,
165
- );
165
+ const container = document.createElement('div');
166
+ const root = ReactDOMClient.createRoot(container);
167
+
168
+ await act(() => {
169
+ root.render(
170
+ <Parent ref={current => (parentInstance = current)}>
171
+ <Middle>
172
+ <Child />
173
+ </Middle>
174
+ </Parent>,
175
+ );
176
+ });
177
178
expect(parentInstance.state.flag).toBe(false);
179
expect(childInstance.context).toEqual({foo: 'bar', flag: false});
180
170
- parentInstance.setState({flag: true});
181
+ await act(() => {
182
+ parentInstance.setState({flag: true});
183
+ });
184
expect(parentInstance.state.flag).toBe(true);
185
expect(childInstance.context).toEqual({foo: 'bar', flag: true});
186
});
187
188
// @gate !disableLegacyContext
176
- it('should pass context when re-rendered for static child within a composite component', () => {
189
+ it('should pass context when re-rendered for static child within a composite component', async () => {
190
class Parent extends React.Component {
191
static childContextTypes = {
192
flag: PropTypes.bool,
@@ -217,20 +230,27 @@ describe('ReactLegacyCompositeComponent', () => {
230
}
231
}
232
220
- const wrapper = ReactTestUtils.renderIntoDocument(<Wrapper />);
233
+ const container = document.createElement('div');
234
+ const root = ReactDOMClient.createRoot(container);
235
+ let wrapper;
236
+ await act(() => {
237
+ root.render(<Wrapper ref={current => (wrapper = current)} />);
238
+ });
239
240
expect(wrapper.parentRef.current.state.flag).toEqual(true);
241
expect(wrapper.childRef.current.context).toEqual({flag: true});
242
243
// We update <Parent /> while <Child /> is still a static prop relative to this update
226
- wrapper.parentRef.current.setState({flag: false});
244
+ await act(() => {
245
+ wrapper.parentRef.current.setState({flag: false});
246
+ });
247
248
expect(wrapper.parentRef.current.state.flag).toEqual(false);
249
expect(wrapper.childRef.current.context).toEqual({flag: false});
250
});
251
252
// @gate !disableLegacyContext
233
- it('should pass context transitively', () => {
253
+ it('should pass context transitively', async () => {
254
let childInstance = null;
255
let grandchildInstance = null;
256
@@ -286,13 +306,18 @@ describe('ReactLegacyCompositeComponent', () => {
306
}
307
}
308
289
- ReactTestUtils.renderIntoDocument(<Parent />);
309
+ const container = document.createElement('div');
310
+ const root = ReactDOMClient.createRoot(container);
311
+ await act(() => {
312
+ root.render(<Parent />);
313
+ });
314
+
315
expect(childInstance.context).toEqual({foo: 'bar', depth: 0});
316
expect(grandchildInstance.context).toEqual({foo: 'bar', depth: 1});
317
});
318
319
// @gate !disableLegacyContext
295
- it('should pass context when re-rendered', () => {
320
+ it('should pass context when re-rendered', async () => {
321
let parentInstance = null;
322
let childInstance = null;
323
@@ -334,11 +359,16 @@ describe('ReactLegacyCompositeComponent', () => {
359
}
360
}
361
337
- parentInstance = ReactTestUtils.renderIntoDocument(<Parent />);
362
+ const container = document.createElement('div');
363
+ const root = ReactDOMClient.createRoot(container);
364
+ await act(() => {
365
+ root.render(<Parent ref={current => (parentInstance = current)} />);
366
+ });
367
+
368
expect(childInstance).toBeNull();
369
370
expect(parentInstance.state.flag).toBe(false);
341
- ReactDOM.unstable_batchedUpdates(function () {
371
+ await act(() => {
372
parentInstance.setState({flag: true});
373
});
374
expect(parentInstance.state.flag).toBe(true);
@@ -699,7 +729,7 @@ describe('ReactLegacyCompositeComponent', () => {
729
);
730
});
731
702
- it('should replace state in legacy mode', () => {
732
+ it('should replace state in legacy mode', async () => {
733
class Moo extends React.Component {
734
state = {x: 1};
735
render() {
@@ -707,15 +737,23 @@ describe('ReactLegacyCompositeComponent', () => {
737
}
738
}
739
710
- const moo = ReactTestUtils.renderIntoDocument(<Moo />);
740
+ const container = document.createElement('div');
741
+ const root = ReactDOMClient.createRoot(container);
742
+ let moo;
743
+ await act(() => {
744
+ root.render(<Moo ref={current => (moo = current)} />);
745
+ });
746
+
747
// No longer a public API, but we can test that it works internally by
748
// reaching into the updater.
713
- moo.updater.enqueueReplaceState(moo, {y: 2});
749
+ await act(() => {
750
+ moo.updater.enqueueReplaceState(moo, {y: 2});
751
+ });
752
expect('x' in moo.state).toBe(false);
753
expect(moo.state.y).toBe(2);
754
});
755
718
- it('should support objects with prototypes as state in legacy mode', () => {
756
+ it('should support objects with prototypes as state in legacy mode', async () => {
757
const NotActuallyImmutable = function (str) {
758
this.str = str;
759
};
@@ -732,24 +770,34 @@ describe('ReactLegacyCompositeComponent', () => {
770
}
771
}
772
735
- const moo = ReactTestUtils.renderIntoDocument(<Moo />);
773
+ const container = document.createElement('div');
774
+ const root = ReactDOMClient.createRoot(container);
775
+ let moo;
776
+ await act(() => {
777
+ root.render(<Moo ref={current => (moo = current)} />);
778
+ });
779
+
780
expect(moo.state.str).toBe('first');
781
expect(moo.state.amIImmutable()).toBe(true);
782
783
const secondState = new NotActuallyImmutable('second');
740
- moo._replaceState(secondState);
784
+ await act(() => {
785
+ moo._replaceState(secondState);
786
+ });
787
expect(moo.state.str).toBe('second');
788
expect(moo.state.amIImmutable()).toBe(true);
789
expect(moo.state).toBe(secondState);
790
745
- moo.setState({str: 'third'});
791
+ await act(() => {
792
+ moo.setState({str: 'third'});
793
+ });
794
expect(moo.state.str).toBe('third');
795
// Here we lose the prototype.
796
expect(moo.state.amIImmutable).toBe(undefined);
797
798
// When more than one state update is enqueued, we have the same behavior
799
const fifthState = new NotActuallyImmutable('fifth');
752
- ReactDOM.unstable_batchedUpdates(function () {
800
+ await act(() => {
801
moo.setState({str: 'fourth'});
802
moo._replaceState(fifthState);
803
});
@@ -757,7 +805,7 @@ describe('ReactLegacyCompositeComponent', () => {
805
806
// When more than one state update is enqueued, we have the same behavior
807
const sixthState = new NotActuallyImmutable('sixth');
760
- ReactDOM.unstable_batchedUpdates(function () {
808
+ await act(() => {
809
moo._replaceState(sixthState);
810
moo.setState({str: 'seventh'});
811
});