Remove usage of ReactTestUtils from ReactContextValidator (#28329)
Sebastian Silbermann committed
Feb 15, 2024 at 19:14 UTC
0745e6bee9edb9842dfa7efa6f9835e5be6d8b98
1 file changed
+146
-63
packages/react/src/__tests__/ReactContextValidator-test.js
+146
-63
@@ -18,7 +18,6 @@
18
let PropTypes;
19
let React;
20
let ReactDOMClient;
21
-let ReactTestUtils;
21
let act;
22
23
describe('ReactContextValidator', () => {
@@ -28,7 +27,6 @@ describe('ReactContextValidator', () => {
27
PropTypes = require('prop-types');
28
React = require('react');
29
ReactDOMClient = require('react-dom/client');
31
- ReactTestUtils = require('react-dom/test-utils');
30
act = require('internal-test-utils').act;
31
});
32
@@ -36,7 +34,7 @@ describe('ReactContextValidator', () => {
34
// ensure that this is not required for ES6 classes with Flow.
35
36
// @gate !disableLegacyContext
39
- it('should filter out context not in contextTypes', () => {
37
+ it('should filter out context not in contextTypes', async () => {
38
class Component extends React.Component {
39
render() {
40
return <div />;
@@ -65,9 +63,14 @@ describe('ReactContextValidator', () => {
63
bar: PropTypes.number,
64
};
65
68
- const instance = ReactTestUtils.renderIntoDocument(
69
- <ComponentInFooBarContext />,
70
- );
66
+ let instance;
67
+ const container = document.createElement('div');
68
+ const root = ReactDOMClient.createRoot(container);
69
+ await act(() => {
70
+ root.render(
71
+ <ComponentInFooBarContext ref={current => (instance = current)} />,
72
+ );
73
+ });
74
expect(instance.childRef.current.context).toEqual({foo: 'abc'});
75
});
76
@@ -160,7 +163,7 @@ describe('ReactContextValidator', () => {
163
// TODO (bvaughn) Remove this test and the associated behavior in the future.
164
// It has only been added in Fiber to match the (unintentional) behavior in Stack.
165
// @gate !disableLegacyContext || !__DEV__
163
- it('should warn (but not error) if getChildContext method is missing', () => {
166
+ it('should warn (but not error) if getChildContext method is missing', async () => {
167
class ComponentA extends React.Component {
168
static childContextTypes = {
169
foo: PropTypes.string.isRequired,
@@ -178,16 +181,32 @@ describe('ReactContextValidator', () => {
181
}
182
}
183
181
- expect(() => ReactTestUtils.renderIntoDocument(<ComponentA />)).toErrorDev(
184
+ await expect(async () => {
185
+ const container = document.createElement('div');
186
+ const root = ReactDOMClient.createRoot(container);
187
+ await act(() => {
188
+ root.render(<ComponentA />);
189
+ });
190
+ }).toErrorDev(
191
'Warning: ComponentA.childContextTypes is specified but there is no ' +
192
'getChildContext() method on the instance. You can either define ' +
193
'getChildContext() on ComponentA or remove childContextTypes from it.',
194
);
195
196
// Warnings should be deduped by component type
188
- ReactTestUtils.renderIntoDocument(<ComponentA />);
197
+ let container = document.createElement('div');
198
+ let root = ReactDOMClient.createRoot(container);
199
+ await act(() => {
200
+ root.render(<ComponentA />);
201
+ });
202
190
- expect(() => ReactTestUtils.renderIntoDocument(<ComponentB />)).toErrorDev(
203
+ await expect(async () => {
204
+ container = document.createElement('div');
205
+ root = ReactDOMClient.createRoot(container);
206
+ await act(() => {
207
+ root.render(<ComponentB />);
208
+ });
209
+ }).toErrorDev(
210
'Warning: ComponentB.childContextTypes is specified but there is no ' +
211
'getChildContext() method on the instance. You can either define ' +
212
'getChildContext() on ComponentB or remove childContextTypes from it.',
@@ -197,7 +216,7 @@ describe('ReactContextValidator', () => {
216
// TODO (bvaughn) Remove this test and the associated behavior in the future.
217
// It has only been added in Fiber to match the (unintentional) behavior in Stack.
218
// @gate !disableLegacyContext
200
- it('should pass parent context if getChildContext method is missing', () => {
219
+ it('should pass parent context if getChildContext method is missing', async () => {
220
class ParentContextProvider extends React.Component {
221
static childContextTypes = {
222
foo: PropTypes.string,
@@ -233,9 +252,13 @@ describe('ReactContextValidator', () => {
252
foo: PropTypes.string.isRequired,
253
};
254
236
- expect(() =>
237
- ReactTestUtils.renderIntoDocument(<ParentContextProvider />),
238
- ).toErrorDev([
255
+ await expect(async () => {
256
+ const container = document.createElement('div');
257
+ const root = ReactDOMClient.createRoot(container);
258
+ await act(() => {
259
+ root.render(<ParentContextProvider />);
260
+ });
261
+ }).toErrorDev([
262
'Warning: MiddleMissingContext.childContextTypes is specified but there is no ' +
263
'getChildContext() method on the instance. You can either define getChildContext() ' +
264
'on MiddleMissingContext or remove childContextTypes from it.',
@@ -366,7 +389,7 @@ describe('ReactContextValidator', () => {
389
});
390
391
// @gate !disableLegacyContext || !__DEV__
369
- it('should warn if both contextType and contextTypes are defined', () => {
392
+ it('should warn if both contextType and contextTypes are defined', async () => {
393
const Context = React.createContext();
394
395
class ParentContextProvider extends React.Component {
@@ -402,38 +425,50 @@ describe('ReactContextValidator', () => {
425
}
426
}
427
405
- expect(() =>
406
- ReactTestUtils.renderIntoDocument(
407
- <ParentContextProvider>
408
- <ComponentA />
409
- </ParentContextProvider>,
410
- ),
411
- ).toErrorDev(
428
+ await expect(async () => {
429
+ const container = document.createElement('div');
430
+ const root = ReactDOMClient.createRoot(container);
431
+ await act(() => {
432
+ root.render(
433
+ <ParentContextProvider>
434
+ <ComponentA />
435
+ </ParentContextProvider>,
436
+ );
437
+ });
438
+ }).toErrorDev(
439
'Warning: ComponentA declares both contextTypes and contextType static properties. ' +
440
'The legacy contextTypes property will be ignored.',
441
);
442
443
// Warnings should be deduped by component type
417
- ReactTestUtils.renderIntoDocument(
418
- <ParentContextProvider>
419
- <ComponentA />
420
- </ParentContextProvider>,
421
- );
422
-
423
- expect(() =>
424
- ReactTestUtils.renderIntoDocument(
444
+ let container = document.createElement('div');
445
+ let root = ReactDOMClient.createRoot(container);
446
+ await act(() => {
447
+ root.render(
448
<ParentContextProvider>
426
- <ComponentB />
449
+ <ComponentA />
450
</ParentContextProvider>,
428
- ),
429
- ).toErrorDev(
451
+ );
452
+ });
453
+
454
+ await expect(async () => {
455
+ container = document.createElement('div');
456
+ root = ReactDOMClient.createRoot(container);
457
+ await act(() => {
458
+ root.render(
459
+ <ParentContextProvider>
460
+ <ComponentB />
461
+ </ParentContextProvider>,
462
+ );
463
+ });
464
+ }).toErrorDev(
465
'Warning: ComponentB declares both contextTypes and contextType static properties. ' +
466
'The legacy contextTypes property will be ignored.',
467
);
468
});
469
470
// @gate enableRenderableContext || !__DEV__
436
- it('should warn if an invalid contextType is defined', () => {
471
+ it('should warn if an invalid contextType is defined', async () => {
472
const Context = React.createContext();
473
class ComponentA extends React.Component {
474
static contextType = Context.Consumer;
@@ -442,16 +477,23 @@ describe('ReactContextValidator', () => {
477
}
478
}
479
445
- expect(() => {
446
- ReactTestUtils.renderIntoDocument(<ComponentA />);
480
+ await expect(async () => {
481
+ const container = document.createElement('div');
482
+ const root = ReactDOMClient.createRoot(container);
483
+ await act(() => {
484
+ root.render(<ComponentA />);
485
+ });
486
}).toErrorDev(
487
'Warning: ComponentA defines an invalid contextType. ' +
488
'contextType should point to the Context object returned by React.createContext(). ' +
489
'Did you accidentally pass the Context.Consumer instead?',
490
);
491
453
- // Warnings should be deduped by component type
454
- ReactTestUtils.renderIntoDocument(<ComponentA />);
492
+ let container = document.createElement('div');
493
+ let root = ReactDOMClient.createRoot(container);
494
+ await act(() => {
495
+ root.render(<ComponentA />);
496
+ });
497
498
class ComponentB extends React.Component {
499
static contextType = Context.Provider;
@@ -459,23 +501,30 @@ describe('ReactContextValidator', () => {
501
return <div />;
502
}
503
}
462
- // This doesn't warn since Context.Provider === Context now.
463
- ReactTestUtils.renderIntoDocument(<ComponentB />);
504
+ container = document.createElement('div');
505
+ root = ReactDOMClient.createRoot(container);
506
+ await act(() => {
507
+ root.render(<ComponentB />);
508
+ });
509
});
510
466
- it('should not warn when class contextType is null', () => {
511
+ it('should not warn when class contextType is null', async () => {
512
class Foo extends React.Component {
513
static contextType = null; // Handy for conditional declaration
514
render() {
515
return this.context.hello.world;
516
}
517
}
473
- expect(() => {
474
- ReactTestUtils.renderIntoDocument(<Foo />);
475
- }).toThrow("Cannot read property 'world' of undefined");
518
+ await expect(async () => {
519
+ const container = document.createElement('div');
520
+ const root = ReactDOMClient.createRoot(container);
521
+ await act(() => {
522
+ root.render(<Foo />);
523
+ });
524
+ }).rejects.toThrow("Cannot read properties of undefined (reading 'world')");
525
});
526
478
- it('should warn when class contextType is undefined', () => {
527
+ it('should warn when class contextType is undefined', async () => {
528
class Foo extends React.Component {
529
// This commonly happens with circular deps
530
// https://github.com/facebook/react/issues/13969
@@ -485,10 +534,16 @@ describe('ReactContextValidator', () => {
534
}
535
}
536
488
- expect(() => {
489
- expect(() => {
490
- ReactTestUtils.renderIntoDocument(<Foo />);
491
- }).toThrow("Cannot read property 'world' of undefined");
537
+ await expect(async () => {
538
+ await expect(async () => {
539
+ const container = document.createElement('div');
540
+ const root = ReactDOMClient.createRoot(container);
541
+ await act(() => {
542
+ root.render(<Foo />);
543
+ });
544
+ }).rejects.toThrow(
545
+ "Cannot read properties of undefined (reading 'world')",
546
+ );
547
}).toErrorDev(
548
'Foo defines an invalid contextType. ' +
549
'contextType should point to the Context object returned by React.createContext(). ' +
@@ -499,7 +554,7 @@ describe('ReactContextValidator', () => {
554
);
555
});
556
502
- it('should warn when class contextType is an object', () => {
557
+ it('should warn when class contextType is an object', async () => {
558
class Foo extends React.Component {
559
// Can happen due to a typo
560
static contextType = {
@@ -511,10 +566,16 @@ describe('ReactContextValidator', () => {
566
}
567
}
568
514
- expect(() => {
515
- expect(() => {
516
- ReactTestUtils.renderIntoDocument(<Foo />);
517
- }).toThrow("Cannot read property 'hello' of undefined");
569
+ await expect(async () => {
570
+ await expect(async () => {
571
+ const container = document.createElement('div');
572
+ const root = ReactDOMClient.createRoot(container);
573
+ await act(() => {
574
+ root.render(<Foo />);
575
+ });
576
+ }).rejects.toThrow(
577
+ "Cannot read properties of undefined (reading 'hello')",
578
+ );
579
}).toErrorDev(
580
'Foo defines an invalid contextType. ' +
581
'contextType should point to the Context object returned by React.createContext(). ' +
@@ -522,7 +583,7 @@ describe('ReactContextValidator', () => {
583
);
584
});
585
525
- it('should warn when class contextType is a primitive', () => {
586
+ it('should warn when class contextType is a primitive', async () => {
587
class Foo extends React.Component {
588
static contextType = 'foo';
589
render() {
@@ -530,10 +591,16 @@ describe('ReactContextValidator', () => {
591
}
592
}
593
533
- expect(() => {
534
- expect(() => {
535
- ReactTestUtils.renderIntoDocument(<Foo />);
536
- }).toThrow("Cannot read property 'world' of undefined");
594
+ await expect(async () => {
595
+ await expect(async () => {
596
+ const container = document.createElement('div');
597
+ const root = ReactDOMClient.createRoot(container);
598
+ await act(() => {
599
+ root.render(<Foo />);
600
+ });
601
+ }).rejects.toThrow(
602
+ "Cannot read properties of undefined (reading 'world')",
603
+ );
604
}).toErrorDev(
605
'Foo defines an invalid contextType. ' +
606
'contextType should point to the Context object returned by React.createContext(). ' +
@@ -541,7 +608,7 @@ describe('ReactContextValidator', () => {
608
);
609
});
610
544
- it('should warn if you define contextType on a function component', () => {
611
+ it('should warn if you define contextType on a function component', async () => {
612
const Context = React.createContext();
613
614
function ComponentA() {
@@ -554,14 +621,30 @@ describe('ReactContextValidator', () => {
621
}
622
ComponentB.contextType = Context;
623
557
- expect(() => ReactTestUtils.renderIntoDocument(<ComponentA />)).toErrorDev(
624
+ await expect(async () => {
625
+ const container = document.createElement('div');
626
+ const root = ReactDOMClient.createRoot(container);
627
+ await act(() => {
628
+ root.render(<ComponentA />);
629
+ });
630
+ }).toErrorDev(
631
'Warning: ComponentA: Function components do not support contextType.',
632
);
633
634
// Warnings should be deduped by component type
562
- ReactTestUtils.renderIntoDocument(<ComponentA />);
635
+ let container = document.createElement('div');
636
+ let root = ReactDOMClient.createRoot(container);
637
+ await act(() => {
638
+ root.render(<ComponentA />);
639
+ });
640
564
- expect(() => ReactTestUtils.renderIntoDocument(<ComponentB />)).toErrorDev(
641
+ await expect(async () => {
642
+ container = document.createElement('div');
643
+ root = ReactDOMClient.createRoot(container);
644
+ await act(() => {
645
+ root.render(<ComponentB />);
646
+ });
647
+ }).toErrorDev(
648
'Warning: ComponentB: Function components do not support contextType.',
649
);
650
});