Remove ReactTestUtils from ReactJSXElementValidator (#28335)
Sebastian Silbermann committed
Feb 28, 2024 at 00:12 UTC
e7849b50bcefc0742ca342d70284d82cfcf990e5
1 file changed
+123
-60
packages/react/src/__tests__/ReactJSXElementValidator-test.js
+123
-60
@@ -11,8 +11,9 @@
11
12
// TODO: All these warnings should become static errors using Flow instead
13
// of dynamic errors when using JSX with Flow.
14
+let act;
15
let React;
15
-let ReactTestUtils;
16
+let ReactDOMClient;
17
18
describe('ReactJSXElementValidator', () => {
19
let Component;
@@ -21,8 +22,9 @@ describe('ReactJSXElementValidator', () => {
22
beforeEach(() => {
23
jest.resetModules();
24
25
+ act = require('internal-test-utils').act;
26
React = require('react');
25
- ReactTestUtils = require('react-dom/test-utils');
27
+ ReactDOMClient = require('react-dom/client');
28
29
Component = class extends React.Component {
30
render() {
@@ -38,15 +40,18 @@ describe('ReactJSXElementValidator', () => {
40
RequiredPropComponent.displayName = 'RequiredPropComponent';
41
});
42
41
- it('warns for keys for arrays of elements in children position', () => {
42
- expect(() =>
43
- ReactTestUtils.renderIntoDocument(
44
- <Component>{[<Component />, <Component />]}</Component>,
45
- ),
46
- ).toErrorDev('Each child in a list should have a unique "key" prop.');
43
+ it('warns for keys for arrays of elements in children position', async () => {
44
+ await expect(async () => {
45
+ const container = document.createElement('div');
46
+ const root = ReactDOMClient.createRoot(container);
47
+
48
+ await act(() => {
49
+ root.render(<Component>{[<Component />, <Component />]}</Component>);
50
+ });
51
+ }).toErrorDev('Each child in a list should have a unique "key" prop.');
52
});
53
49
- it('warns for keys for arrays of elements with owner info', () => {
54
+ it('warns for keys for arrays of elements with owner info', async () => {
55
class InnerComponent extends React.Component {
56
render() {
57
return <Component>{this.props.childSet}</Component>;
@@ -59,16 +64,20 @@ describe('ReactJSXElementValidator', () => {
64
}
65
}
66
62
- expect(() =>
63
- ReactTestUtils.renderIntoDocument(<ComponentWrapper />),
64
- ).toErrorDev(
67
+ await expect(async () => {
68
+ const container = document.createElement('div');
69
+ const root = ReactDOMClient.createRoot(container);
70
+ await act(() => {
71
+ root.render(<ComponentWrapper />);
72
+ });
73
+ }).toErrorDev([
74
'Each child in a list should have a unique "key" prop.' +
75
'\n\nCheck the render method of `InnerComponent`. ' +
76
'It was passed a child from ComponentWrapper. ',
68
- );
77
+ ]);
78
});
79
71
- it('warns for keys for iterables of elements in rest args', () => {
80
+ it('warns for keys for iterables of elements in rest args', async () => {
81
const iterable = {
82
'@@iterator': function () {
83
let i = 0;
@@ -81,18 +90,30 @@ describe('ReactJSXElementValidator', () => {
90
},
91
};
92
84
- expect(() =>
85
- ReactTestUtils.renderIntoDocument(<Component>{iterable}</Component>),
86
- ).toErrorDev('Each child in a list should have a unique "key" prop.');
93
+ await expect(async () => {
94
+ const container = document.createElement('div');
95
+ const root = ReactDOMClient.createRoot(container);
96
+
97
+ await act(() => {
98
+ root.render(<Component>{iterable}</Component>);
99
+ });
100
+ }).toErrorDev('Each child in a list should have a unique "key" prop.');
101
});
102
89
- it('does not warn for arrays of elements with keys', () => {
90
- ReactTestUtils.renderIntoDocument(
91
- <Component>{[<Component key="#1" />, <Component key="#2" />]}</Component>,
92
- );
103
+ it('does not warn for arrays of elements with keys', async () => {
104
+ const container = document.createElement('div');
105
+ const root = ReactDOMClient.createRoot(container);
106
+
107
+ await act(() => {
108
+ root.render(
109
+ <Component>
110
+ {[<Component key="#1" />, <Component key="#2" />]}
111
+ </Component>,
112
+ );
113
+ });
114
});
115
95
- it('does not warn for iterable elements with keys', () => {
116
+ it('does not warn for iterable elements with keys', async () => {
117
const iterable = {
118
'@@iterator': function () {
119
let i = 0;
@@ -108,10 +129,15 @@ describe('ReactJSXElementValidator', () => {
129
},
130
};
131
111
- ReactTestUtils.renderIntoDocument(<Component>{iterable}</Component>);
132
+ const container = document.createElement('div');
133
+ const root = ReactDOMClient.createRoot(container);
134
+
135
+ await act(() => {
136
+ root.render(<Component>{iterable}</Component>);
137
+ });
138
});
139
114
- it('does not warn for numeric keys in entry iterable as a child', () => {
140
+ it('does not warn for numeric keys in entry iterable as a child', async () => {
141
const iterable = {
142
'@@iterator': function () {
143
let i = 0;
@@ -125,23 +151,31 @@ describe('ReactJSXElementValidator', () => {
151
};
152
iterable.entries = iterable['@@iterator'];
153
128
- ReactTestUtils.renderIntoDocument(<Component>{iterable}</Component>);
154
+ const container = document.createElement('div');
155
+ const root = ReactDOMClient.createRoot(container);
156
+ await act(() => {
157
+ root.render(<Component>{iterable}</Component>);
158
+ });
159
});
160
131
- it('does not warn when the element is directly as children', () => {
132
- ReactTestUtils.renderIntoDocument(
133
- <Component>
134
- <Component />
135
- <Component />
136
- </Component>,
137
- );
161
+ it('does not warn when the element is directly as children', async () => {
162
+ const container = document.createElement('div');
163
+ const root = ReactDOMClient.createRoot(container);
164
+ await act(() => {
165
+ root.render(
166
+ <Component>
167
+ <Component />
168
+ <Component />
169
+ </Component>,
170
+ );
171
+ });
172
});
173
174
it('does not warn when the child array contains non-elements', () => {
175
void (<Component>{[{}, {}]}</Component>);
176
});
177
144
- it('should give context for errors in nested components.', () => {
178
+ it('should give context for errors in nested components.', async () => {
179
class MyComp extends React.Component {
180
render() {
181
return [<div />];
@@ -152,7 +186,14 @@ describe('ReactJSXElementValidator', () => {
186
return <MyComp />;
187
}
188
}
155
- expect(() => ReactTestUtils.renderIntoDocument(<ParentComp />)).toErrorDev(
189
+ await expect(async () => {
190
+ const container = document.createElement('div');
191
+ const root = ReactDOMClient.createRoot(container);
192
+
193
+ await act(() => {
194
+ root.render(<ParentComp />);
195
+ });
196
+ }).toErrorDev(
197
'Each child in a list should have a unique "key" prop. ' +
198
'See https://reactjs.org/link/warning-keys for more information.\n' +
199
' in MyComp (at **)\n' +
@@ -189,20 +230,26 @@ describe('ReactJSXElementValidator', () => {
230
void (<Div />);
231
});
232
192
- it('warns for fragments with illegal attributes', () => {
233
+ it('warns for fragments with illegal attributes', async () => {
234
class Foo extends React.Component {
235
render() {
236
return <React.Fragment a={1}>hello</React.Fragment>;
237
}
238
}
239
199
- expect(() => ReactTestUtils.renderIntoDocument(<Foo />)).toErrorDev(
240
+ await expect(async () => {
241
+ const container = document.createElement('div');
242
+ const root = ReactDOMClient.createRoot(container);
243
+ await act(() => {
244
+ root.render(<Foo />);
245
+ });
246
+ }).toErrorDev(
247
'Invalid prop `a` supplied to `React.Fragment`. React.Fragment ' +
248
'can only have `key` and `children` props.',
249
);
250
});
251
205
- it('warns for fragments with refs', () => {
252
+ it('warns for fragments with refs', async () => {
253
class Foo extends React.Component {
254
render() {
255
return (
@@ -217,35 +264,51 @@ describe('ReactJSXElementValidator', () => {
264
}
265
266
if (gate(flags => flags.enableRefAsProp)) {
220
- expect(() => ReactTestUtils.renderIntoDocument(<Foo />)).toErrorDev(
221
- 'Invalid prop `ref` supplied to `React.Fragment`.',
222
- );
267
+ await expect(async () => {
268
+ const container = document.createElement('div');
269
+ const root = ReactDOMClient.createRoot(container);
270
+ await act(() => {
271
+ root.render(<Foo />);
272
+ });
273
+ }).toErrorDev('Invalid prop `ref` supplied to `React.Fragment`.');
274
} else {
224
- expect(() => ReactTestUtils.renderIntoDocument(<Foo />)).toErrorDev(
225
- 'Invalid attribute `ref` supplied to `React.Fragment`.',
226
- );
275
+ await expect(async () => {
276
+ const container = document.createElement('div');
277
+ const root = ReactDOMClient.createRoot(container);
278
+ await act(() => {
279
+ root.render(<Foo />);
280
+ });
281
+ }).toErrorDev('Invalid attribute `ref` supplied to `React.Fragment`.');
282
}
283
});
284
230
- it('does not warn for fragments of multiple elements without keys', () => {
231
- ReactTestUtils.renderIntoDocument(
232
- <>
233
- <span>1</span>
234
- <span>2</span>
235
- </>,
236
- );
237
- });
238
-
239
- it('warns for fragments of multiple elements with same key', () => {
240
- expect(() =>
241
- ReactTestUtils.renderIntoDocument(
285
+ it('does not warn for fragments of multiple elements without keys', async () => {
286
+ const container = document.createElement('div');
287
+ const root = ReactDOMClient.createRoot(container);
288
+ await act(() => {
289
+ root.render(
290
<>
243
- <span key="a">1</span>
244
- <span key="a">2</span>
245
- <span key="b">3</span>
291
+ <span>1</span>
292
+ <span>2</span>
293
</>,
247
- ),
248
- ).toErrorDev('Encountered two children with the same key, `a`.', {
294
+ );
295
+ });
296
+ });
297
+
298
+ it('warns for fragments of multiple elements with same key', async () => {
299
+ await expect(async () => {
300
+ const container = document.createElement('div');
301
+ const root = ReactDOMClient.createRoot(container);
302
+ await act(() => {
303
+ root.render(
304
+ <>
305
+ <span key="a">1</span>
306
+ <span key="a">2</span>
307
+ <span key="b">3</span>
308
+ </>,
309
+ );
310
+ });
311
+ }).toErrorDev('Encountered two children with the same key, `a`.', {
312
withoutStack: true,
313
});
314
});