@samitouri / QOS-React-2 / commits / 4217d324ae

Convert ReactDOMTestSelectors-test.js to createRoot (#27993)

Straightforward adding createRoot and act

Ricky committed Jan 23, 2024 at 23:01 UTC 4217d324ae5766b3201e682bb4d67b8855652694
6 files changed +301 -89
packages/react-dom/src/__tests__/ReactDOMTestSelectors-test.js
+191 -84
@@ -11,7 +11,7 @@
11
12 describe('ReactDOMTestSelectors', () => {
13 let React;
14 -
14 + let createRoot;
15 let act;
16 let createComponentSelector;
17 let createHasPseudoClassSelector;
@@ -23,7 +23,6 @@ describe('ReactDOMTestSelectors', () => {
23 let focusWithin;
24 let getFindAllNodesFailureDescription;
25 let observeVisibleRects;
26 - let render;
26
27 let container;
28
@@ -31,7 +30,8 @@ describe('ReactDOMTestSelectors', () => {
30 jest.resetModules();
31
32 React = require('react');
34 - act = React.unstable_act;
33 +
34 + act = require('internal-test-utils').act;
35
36 if (__EXPERIMENTAL__ || global.__WWW__) {
37 const ReactDOM = require('react-dom/unstable_testing');
@@ -46,7 +46,7 @@ describe('ReactDOMTestSelectors', () => {
46 getFindAllNodesFailureDescription =
47 ReactDOM.getFindAllNodesFailureDescription;
48 observeVisibleRects = ReactDOM.observeVisibleRects;
49 - render = ReactDOM.render;
49 + createRoot = ReactDOM.createRoot;
50 }
51
52 container = document.createElement('div');
@@ -59,7 +59,7 @@ describe('ReactDOMTestSelectors', () => {
59
60 describe('findAllNodes', () => {
61 // @gate www || experimental
62 - it('should support searching from the document root', () => {
62 + it('should support searching from the document root', async () => {
63 function Example() {
64 return (
65 <div>
@@ -68,7 +68,10 @@ describe('ReactDOMTestSelectors', () => {
68 );
69 }
70
71 - render(<Example />, container);
71 + const root = createRoot(container);
72 + await act(() => {
73 + root.render(<Example />);
74 + });
75
76 const matches = findAllNodes(document.body, [
77 createComponentSelector(Example),
@@ -79,7 +82,7 @@ describe('ReactDOMTestSelectors', () => {
82 });
83
84 // @gate www || experimental
82 - it('should support searching from the container', () => {
85 + it('should support searching from the container', async () => {
86 function Example() {
87 return (
88 <div>
@@ -88,7 +91,10 @@ describe('ReactDOMTestSelectors', () => {
91 );
92 }
93
91 - render(<Example />, container);
94 + const root = createRoot(container);
95 + await act(() => {
96 + root.render(<Example />);
97 + });
98
99 const matches = findAllNodes(container, [
100 createComponentSelector(Example),
@@ -99,7 +105,7 @@ describe('ReactDOMTestSelectors', () => {
105 });
106
107 // @gate www || experimental
102 - it('should support searching from a previous match if the match had a data-testname', () => {
108 + it('should support searching from a previous match if the match had a data-testname', async () => {
109 function Outer() {
110 return (
111 <div data-testname="outer" id="outer">
@@ -112,7 +118,10 @@ describe('ReactDOMTestSelectors', () => {
118 return <div data-testname="inner" id="inner" />;
119 }
120
115 - render(<Outer />, container);
121 + const root = createRoot(container);
122 + await act(() => {
123 + root.render(<Outer />);
124 + });
125
126 let matches = findAllNodes(container, [
127 createComponentSelector(Outer),
@@ -130,7 +139,7 @@ describe('ReactDOMTestSelectors', () => {
139 });
140
141 // @gate www || experimental
133 - it('should not support searching from a previous match if the match did not have a data-testname', () => {
142 + it('should not support searching from a previous match if the match did not have a data-testname', async () => {
143 function Outer() {
144 return (
145 <div id="outer">
@@ -143,7 +152,10 @@ describe('ReactDOMTestSelectors', () => {
152 return <div id="inner" />;
153 }
154
146 - render(<Outer />, container);
155 + const root = createRoot(container);
156 + await act(() => {
157 + root.render(<Outer />);
158 + });
159
160 const matches = findAllNodes(container, [createComponentSelector(Outer)]);
161 expect(matches).toHaveLength(1);
@@ -160,7 +172,7 @@ describe('ReactDOMTestSelectors', () => {
172 });
173
174 // @gate www || experimental
163 - it('should support an multiple component types in the selector array', () => {
175 + it('should support an multiple component types in the selector array', async () => {
176 function Outer() {
177 return (
178 <>
@@ -185,7 +197,10 @@ describe('ReactDOMTestSelectors', () => {
197 );
198 }
199
188 - render(<Outer />, container);
200 + const root = createRoot(container);
201 + await act(() => {
202 + root.render(<Outer />);
203 + });
204
205 let matches = findAllNodes(document.body, [
206 createComponentSelector(Outer),
@@ -214,7 +229,7 @@ describe('ReactDOMTestSelectors', () => {
229 });
230
231 // @gate www || experimental
217 - it('should find multiple matches', () => {
232 + it('should find multiple matches', async () => {
233 function Example1() {
234 return (
235 <div>
@@ -232,13 +247,15 @@ describe('ReactDOMTestSelectors', () => {
247 );
248 }
249
235 - render(
236 - <>
237 - <Example1 />
238 - <Example2 />
239 - </>,
240 - container,
241 - );
250 + const root = createRoot(container);
251 + await act(() => {
252 + root.render(
253 + <>
254 + <Example1 />
255 + <Example2 />
256 + </>,
257 + );
258 + });
259
260 const matches = findAllNodes(document.body, [
261 createTestNameSelector('match'),
@@ -252,7 +269,7 @@ describe('ReactDOMTestSelectors', () => {
269 });
270
271 // @gate www || experimental
255 - it('should ignore nested matches', () => {
272 + it('should ignore nested matches', async () => {
273 function Example() {
274 return (
275 <div data-testname="match" id="match1">
@@ -261,7 +278,10 @@ describe('ReactDOMTestSelectors', () => {
278 );
279 }
280
264 - render(<Example />, container);
281 + const root = createRoot(container);
282 + await act(() => {
283 + root.render(<Example />);
284 + });
285
286 const matches = findAllNodes(document.body, [
287 createComponentSelector(Example),
@@ -272,7 +292,7 @@ describe('ReactDOMTestSelectors', () => {
292 });
293
294 // @gate www || experimental
275 - it('should enforce the specific order of selectors', () => {
295 + it('should enforce the specific order of selectors', async () => {
296 function Outer() {
297 return (
298 <>
@@ -285,7 +305,10 @@ describe('ReactDOMTestSelectors', () => {
305 return <div data-testname="match" id="match1" />;
306 }
307
288 - render(<Outer />, container);
308 + const root = createRoot(container);
309 + await act(() => {
310 + root.render(<Outer />);
311 + });
312
313 expect(
314 findAllNodes(document.body, [
@@ -297,7 +320,7 @@ describe('ReactDOMTestSelectors', () => {
320 });
321
322 // @gate www || experimental
300 - it('should not search within hidden subtrees', () => {
323 + it('should not search within hidden subtrees', async () => {
324 const ref1 = React.createRef(null);
325 const ref2 = React.createRef(null);
326
@@ -315,7 +338,10 @@ describe('ReactDOMTestSelectors', () => {
338 return <div ref={ref2} data-testname="match" />;
339 }
340
318 - render(<Outer />, container);
341 + const root = createRoot(container);
342 + await act(() => {
343 + root.render(<Outer />);
344 + });
345
346 const matches = findAllNodes(document.body, [
347 createComponentSelector(Outer),
@@ -327,7 +353,7 @@ describe('ReactDOMTestSelectors', () => {
353 });
354
355 // @gate www || experimental
330 - it('should support filtering by display text', () => {
356 + it('should support filtering by display text', async () => {
357 function Example() {
358 return (
359 <div>
@@ -339,7 +365,10 @@ describe('ReactDOMTestSelectors', () => {
365 );
366 }
367
342 - render(<Example />, container);
368 + const root = createRoot(container);
369 + await act(() => {
370 + root.render(<Example />);
371 + });
372
373 const matches = findAllNodes(document.body, [
374 createComponentSelector(Example),
@@ -350,7 +379,7 @@ describe('ReactDOMTestSelectors', () => {
379 });
380
381 // @gate www || experimental
353 - it('should support filtering by explicit accessibiliy role', () => {
382 + it('should support filtering by explicit accessibiliy role', async () => {
383 function Example() {
384 return (
385 <div>
@@ -364,7 +393,10 @@ describe('ReactDOMTestSelectors', () => {
393 );
394 }
395
367 - render(<Example />, container);
396 + const root = createRoot(container);
397 + await act(() => {
398 + root.render(<Example />);
399 + });
400
401 const matches = findAllNodes(document.body, [
402 createComponentSelector(Example),
@@ -375,7 +407,7 @@ describe('ReactDOMTestSelectors', () => {
407 });
408
409 // @gate www || experimental
378 - it('should support filtering by explicit secondary accessibiliy role', () => {
410 + it('should support filtering by explicit secondary accessibiliy role', async () => {
411 const ref = React.createRef();
412
413 function Example() {
@@ -389,7 +421,10 @@ describe('ReactDOMTestSelectors', () => {
421 );
422 }
423
392 - render(<Example />, container);
424 + const root = createRoot(container);
425 + await act(() => {
426 + root.render(<Example />);
427 + });
428
429 const matches = findAllNodes(document.body, [
430 createComponentSelector(Example),
@@ -400,7 +435,7 @@ describe('ReactDOMTestSelectors', () => {
435 });
436
437 // @gate www || experimental
403 - it('should support filtering by implicit accessibiliy role', () => {
438 + it('should support filtering by implicit accessibiliy role', async () => {
439 function Example() {
440 return (
441 <div>
@@ -412,7 +447,10 @@ describe('ReactDOMTestSelectors', () => {
447 );
448 }
449
415 - render(<Example />, container);
450 + const root = createRoot(container);
451 + await act(() => {
452 + root.render(<Example />);
453 + });
454
455 const matches = findAllNodes(document.body, [
456 createComponentSelector(Example),
@@ -423,7 +461,7 @@ describe('ReactDOMTestSelectors', () => {
461 });
462
463 // @gate www || experimental
426 - it('should support filtering by implicit accessibiliy role with attributes qualifications', () => {
464 + it('should support filtering by implicit accessibiliy role with attributes qualifications', async () => {
465 function Example() {
466 return (
467 <div>
@@ -435,7 +473,10 @@ describe('ReactDOMTestSelectors', () => {
473 );
474 }
475
438 - render(<Example />, container);
476 + const root = createRoot(container);
477 + await act(() => {
478 + root.render(<Example />);
479 + });
480
481 const matches = findAllNodes(document.body, [
482 createComponentSelector(Example),
@@ -446,7 +487,7 @@ describe('ReactDOMTestSelectors', () => {
487 });
488
489 // @gate www || experimental
449 - it('should support searching ahead with the has() selector', () => {
490 + it('should support searching ahead with the has() selector', async () => {
491 function Example() {
492 return (
493 <div>
@@ -466,7 +507,10 @@ describe('ReactDOMTestSelectors', () => {
507 );
508 }
509
469 - render(<Example />, container);
510 + const root = createRoot(container);
511 + await act(() => {
512 + root.render(<Example />);
513 + });
514
515 const matches = findAllNodes(document.body, [
516 createComponentSelector(Example),
@@ -489,13 +533,16 @@ describe('ReactDOMTestSelectors', () => {
533 });
534
535 // @gate www || experimental
492 - it('should throw if an invalid host root is specified', () => {
536 + it('should throw if an invalid host root is specified', async () => {
537 const ref = React.createRef();
538 function Example() {
539 return <div ref={ref} />;
540 }
541
498 - render(<Example />, container);
542 + const root = createRoot(container);
543 + await act(() => {
544 + root.render(<Example />);
545 + });
546
547 expect(() => findAllNodes(ref.current, [])).toThrow(
548 'Invalid host root specified. Should be either a React container or a node with a testname attribute.',
@@ -505,7 +552,7 @@ describe('ReactDOMTestSelectors', () => {
552
553 describe('getFindAllNodesFailureDescription', () => {
554 // @gate www || experimental
508 - it('should describe findAllNodes failures caused by the component type selector', () => {
555 + it('should describe findAllNodes failures caused by the component type selector', async () => {
556 function Outer() {
557 return <Middle />;
558 }
@@ -516,7 +563,10 @@ describe('ReactDOMTestSelectors', () => {
563 return <div data-testname="match" />;
564 }
565
519 - render(<Outer />, container);
566 + const root = createRoot(container);
567 + await act(() => {
568 + root.render(<Outer />);
569 + });
570
571 const description = getFindAllNodesFailureDescription(document.body, [
572 createComponentSelector(Outer),
@@ -535,7 +585,7 @@ No matching component was found for:
585 });
586
587 // @gate www || experimental
538 - it('should return null if findAllNodes was able to find a match', () => {
588 + it('should return null if findAllNodes was able to find a match', async () => {
589 function Example() {
590 return (
591 <div>
@@ -544,7 +594,10 @@ No matching component was found for:
594 );
595 }
596
547 - render(<Example />, container);
597 + const root = createRoot(container);
598 + await act(() => {
599 + root.render(<Example />);
600 + });
601
602 const description = getFindAllNodesFailureDescription(document.body, [
603 createComponentSelector(Example),
@@ -571,7 +624,7 @@ No matching component was found for:
624 }
625
626 // @gate www || experimental
574 - it('should return a single rect for a component that returns a single root host element', () => {
627 + it('should return a single rect for a component that returns a single root host element', async () => {
628 const ref = React.createRef();
629
630 function Example() {
@@ -583,7 +636,10 @@ No matching component was found for:
636 );
637 }
638
586 - render(<Example />, container);
639 + const root = createRoot(container);
640 + await act(() => {
641 + root.render(<Example />);
642 + });
643
644 setBoundingClientRect(ref.current, {
645 x: 10,
@@ -605,7 +661,7 @@ No matching component was found for:
661 });
662
663 // @gate www || experimental
608 - it('should return a multiple rects for multiple matches', () => {
664 + it('should return a multiple rects for multiple matches', async () => {
665 const outerRef = React.createRef();
666 const innerRef = React.createRef();
667
@@ -621,7 +677,10 @@ No matching component was found for:
677 return <div ref={innerRef} />;
678 }
679
624 - render(<Outer />, container);
680 + const root = createRoot(container);
681 + await act(() => {
682 + root.render(<Outer />);
683 + });
684
685 setBoundingClientRect(outerRef.current, {
686 x: 10,
@@ -655,7 +714,7 @@ No matching component was found for:
714 });
715
716 // @gate www || experimental
658 - it('should return a multiple rects for single match that returns a fragment', () => {
717 + it('should return a multiple rects for single match that returns a fragment', async () => {
718 const refA = React.createRef();
719 const refB = React.createRef();
720
@@ -671,7 +730,10 @@ No matching component was found for:
730 );
731 }
732
674 - render(<Example />, container);
733 + const root = createRoot(container);
734 + await act(() => {
735 + root.render(<Example />);
736 + });
737
738 setBoundingClientRect(refA.current, {
739 x: 10,
@@ -705,7 +767,7 @@ No matching component was found for:
767 });
768
769 // @gate www || experimental
708 - it('should merge overlapping rects', () => {
770 + it('should merge overlapping rects', async () => {
771 const refA = React.createRef();
772 const refB = React.createRef();
773 const refC = React.createRef();
@@ -720,7 +782,10 @@ No matching component was found for:
782 );
783 }
784
723 - render(<Example />, container);
785 + const root = createRoot(container);
786 + await act(() => {
787 + root.render(<Example />);
788 + });
789
790 setBoundingClientRect(refA.current, {
791 x: 10,
@@ -760,7 +825,7 @@ No matching component was found for:
825 });
826
827 // @gate www || experimental
763 - it('should merge some types of adjacent rects (if they are the same in one dimension)', () => {
828 + it('should merge some types of adjacent rects (if they are the same in one dimension)', async () => {
829 const refA = React.createRef();
830 const refB = React.createRef();
831 const refC = React.createRef();
@@ -783,7 +848,10 @@ No matching component was found for:
848 );
849 }
850
786 - render(<Example />, container);
851 + const root = createRoot(container);
852 + await act(() => {
853 + root.render(<Example />);
854 + });
855
856 // A, B, and C are all adjacent and/or overlapping, with the same height.
857 setBoundingClientRect(refA.current, {
@@ -860,7 +928,7 @@ No matching component was found for:
928 });
929
930 // @gate www || experimental
863 - it('should not search within hidden subtrees', () => {
931 + it('should not search within hidden subtrees', async () => {
932 const refA = React.createRef();
933 const refB = React.createRef();
934 const refC = React.createRef();
@@ -875,7 +943,10 @@ No matching component was found for:
943 );
944 }
945
878 - render(<Example />, container);
946 + const root = createRoot(container);
947 + await act(() => {
948 + root.render(<Example />);
949 + });
950
951 setBoundingClientRect(refA.current, {
952 x: 10,
@@ -917,7 +988,7 @@ No matching component was found for:
988
989 describe('focusWithin', () => {
990 // @gate www || experimental
920 - it('should return false if the specified component path has no matches', () => {
991 + it('should return false if the specified component path has no matches', async () => {
992 function Example() {
993 return <Child />;
994 }
@@ -928,7 +999,10 @@ No matching component was found for:
999 return null;
1000 }
1001
931 - render(<Example />, container);
1002 + const root = createRoot(container);
1003 + await act(() => {
1004 + root.render(<Example />);
1005 + });
1006
1007 const didFocus = focusWithin(document.body, [
1008 createComponentSelector(Example),
@@ -938,7 +1012,7 @@ No matching component was found for:
1012 });
1013
1014 // @gate www || experimental
941 - it('should return false if there are no focusable elements within the matched subtree', () => {
1015 + it('should return false if there are no focusable elements within the matched subtree', async () => {
1016 function Example() {
1017 return <Child />;
1018 }
@@ -946,7 +1020,10 @@ No matching component was found for:
1020 return 'not focusable';
1021 }
1022
949 - render(<Example />, container);
1023 + const root = createRoot(container);
1024 + await act(() => {
1025 + root.render(<Example />);
1026 + });
1027
1028 const didFocus = focusWithin(document.body, [
1029 createComponentSelector(Example),
@@ -956,7 +1033,7 @@ No matching component was found for:
1033 });
1034
1035 // @gate www || experimental
959 - it('should return false if the only focusable elements are disabled', () => {
1036 + it('should return false if the only focusable elements are disabled', async () => {
1037 function Example() {
1038 return (
1039 <button disabled={true} style={{width: 10, height: 10}}>
@@ -965,7 +1042,10 @@ No matching component was found for:
1042 );
1043 }
1044
968 - render(<Example />, container);
1045 + const root = createRoot(container);
1046 + await act(() => {
1047 + root.render(<Example />);
1048 + });
1049
1050 const didFocus = focusWithin(document.body, [
1051 createComponentSelector(Example),
@@ -974,12 +1054,15 @@ No matching component was found for:
1054 });
1055
1056 // @gate www || experimental
977 - it('should return false if the only focusable elements are hidden', () => {
1057 + it('should return false if the only focusable elements are hidden', async () => {
1058 function Example() {
1059 return <button hidden={true}>not clickable</button>;
1060 }
1061
982 - render(<Example />, container);
1062 + const root = createRoot(container);
1063 + await act(() => {
1064 + root.render(<Example />);
1065 + });
1066
1067 const didFocus = focusWithin(document.body, [
1068 createComponentSelector(Example),
@@ -988,7 +1071,7 @@ No matching component was found for:
1071 });
1072
1073 // @gate www || experimental
991 - it('should successfully focus the first focusable element within the tree', () => {
1074 + it('should successfully focus the first focusable element within the tree', async () => {
1075 const secondRef = React.createRef(null);
1076
1077 const handleFirstFocus = jest.fn();
@@ -1029,7 +1112,10 @@ No matching component was found for:
1112 );
1113 }
1114
1032 - render(<Example />, container);
1115 + const root = createRoot(container);
1116 + await act(() => {
1117 + root.render(<Example />);
1118 + });
1119
1120 const didFocus = focusWithin(document.body, [
1121 createComponentSelector(Example),
@@ -1043,7 +1129,7 @@ No matching component was found for:
1129 });
1130
1131 // @gate www || experimental
1046 - it('should successfully focus the first focusable element even if application logic interferes', () => {
1132 + it('should successfully focus the first focusable element even if application logic interferes', async () => {
1133 const ref = React.createRef(null);
1134
1135 const handleFocus = jest.fn(event => {
@@ -1061,7 +1147,10 @@ No matching component was found for:
1147 );
1148 }
1149
1064 - render(<Example />, container);
1150 + const root = createRoot(container);
1151 + await act(() => {
1152 + root.render(<Example />);
1153 + });
1154
1155 const didFocus = focusWithin(document.body, [
1156 createComponentSelector(Example),
@@ -1073,7 +1162,7 @@ No matching component was found for:
1162 });
1163
1164 // @gate www || experimental
1076 - it('should not focus within hidden subtrees', () => {
1165 + it('should not focus within hidden subtrees', async () => {
1166 const secondRef = React.createRef(null);
1167
1168 const handleFirstFocus = jest.fn();
@@ -1116,7 +1205,10 @@ No matching component was found for:
1205 );
1206 }
1207
1119 - render(<Example />, container);
1208 + const root = createRoot(container);
1209 + await act(() => {
1210 + root.render(<Example />);
1211 + });
1212
1213 const didFocus = focusWithin(document.body, [
1214 createComponentSelector(Example),
@@ -1197,14 +1289,17 @@ No matching component was found for:
1289 });
1290
1291 // @gate www || experimental
1200 - it('should notify a listener when the underlying instance intersection changes', () => {
1292 + it('should notify a listener when the underlying instance intersection changes', async () => {
1293 const ref = React.createRef(null);
1294
1295 function Example() {
1296 return <div ref={ref} />;
1297 }
1298
1207 - render(<Example />, container);
1299 + const root = createRoot(container);
1300 + await act(() => {
1301 + root.render(<Example />);
1302 + });
1303
1304 // Stub out the size of the element this test will be observing.
1305 const rect = {
@@ -1234,7 +1329,7 @@ No matching component was found for:
1329 });
1330
1331 // @gate www || experimental
1237 - it('should notify a listener of multiple targets when the underlying instance intersection changes', () => {
1332 + it('should notify a listener of multiple targets when the underlying instance intersection changes', async () => {
1333 const ref1 = React.createRef(null);
1334 const ref2 = React.createRef(null);
1335
@@ -1247,7 +1342,10 @@ No matching component was found for:
1342 );
1343 }
1344
1250 - render(<Example />, container);
1345 + const root = createRoot(container);
1346 + await act(() => {
1347 + root.render(<Example />);
1348 + });
1349
1350 // Stub out the size of the element this test will be observing.
1351 const rect1 = {
@@ -1311,14 +1409,17 @@ No matching component was found for:
1409 });
1410
1411 // @gate www || experimental
1314 - it('should stop listening when its disconnected', () => {
1412 + it('should stop listening when its disconnected', async () => {
1413 const ref = React.createRef(null);
1414
1415 function Example() {
1416 return <div ref={ref} />;
1417 }
1418
1321 - render(<Example />, container);
1419 + const root = createRoot(container);
1420 + await act(() => {
1421 + root.render(<Example />);
1422 + });
1423
1424 // Stub out the size of the element this test will be observing.
1425 const rect = {
@@ -1346,7 +1447,7 @@ No matching component was found for:
1447
1448 // This test reuires gating because it relies on the __DEV__ only commit hook to work.
1449 // @gate www || experimental && __DEV__
1349 - it('should update which targets its listening to after a commit', () => {
1450 + it('should update which targets its listening to after a commit', async () => {
1451 const ref1 = React.createRef(null);
1452 const ref2 = React.createRef(null);
1453
@@ -1363,7 +1464,10 @@ No matching component was found for:
1464 );
1465 }
1466
1366 - render(<Example />, container);
1467 + const root = createRoot(container);
1468 + await act(() => {
1469 + root.render(<Example />);
1470 + });
1471
1472 // Stub out the size of the element this test will be observing.
1473 const rect1 = {
@@ -1389,7 +1493,7 @@ No matching component was found for:
1493 {rect: rect1, ratio: 1},
1494 ]);
1495
1392 - act(() => increment());
1496 + await act(() => increment());
1497
1498 const rect2 = {
1499 x: 110,
@@ -1412,7 +1516,7 @@ No matching component was found for:
1516 {rect: rect2, ratio: 0.25},
1517 ]);
1518
1415 - act(() => increment());
1519 + await act(() => increment());
1520
1521 handleVisibilityChange.mockClear();
1522
@@ -1425,7 +1529,7 @@ No matching component was found for:
1529 });
1530
1531 // @gate www || experimental
1428 - it('should not observe components within hidden subtrees', () => {
1532 + it('should not observe components within hidden subtrees', async () => {
1533 const ref1 = React.createRef(null);
1534 const ref2 = React.createRef(null);
1535
@@ -1438,7 +1542,10 @@ No matching component was found for:
1542 );
1543 }
1544
1441 - render(<Example />, container);
1545 + const root = createRoot(container);
1546 + await act(() => {
1547 + root.render(<Example />);
1548 + });
1549
1550 // Stub out the size of the element this test will be observing.
1551 const rect1 = {
packages/react-dom/unstable_testing.classic.fb.js
+25 -1
@@ -7,7 +7,31 @@
7 * @flow
8 */
9
10 -export * from './index.classic.fb.js';
10 +export {
11 + createPortal,
12 + findDOMNode,
13 + flushSync,
14 + hydrate,
15 + render,
16 + unmountComponentAtNode,
17 + unstable_batchedUpdates,
18 + unstable_createEventHandle,
19 + unstable_renderSubtreeIntoContainer,
20 + unstable_runWithPriority, // DO NOT USE: Temporarily exposed to migrate off of Scheduler.runWithPriority.
21 + useFormStatus,
22 + useFormState,
23 + prefetchDNS,
24 + preconnect,
25 + preload,
26 + preloadModule,
27 + preinit,
28 + preinitModule,
29 + version,
30 + __SECRET_INTERNALS_DO_NOT_USE_OR_YOU_WILL_BE_FIRED,
31 +} from './index.classic.fb.js';
32 +
33 +export {createRoot, hydrateRoot} from './client.js';
34 +
35 export {
36 createComponentSelector,
37 createHasPseudoClassSelector,
packages/react-dom/unstable_testing.experimental.js
+23 -1
@@ -7,7 +7,29 @@
7 * @flow
8 */
9
10 -export * from './index.experimental.js';
10 +export {
11 + createPortal,
12 + findDOMNode,
13 + flushSync,
14 + hydrate,
15 + render,
16 + unmountComponentAtNode,
17 + unstable_batchedUpdates,
18 + unstable_renderSubtreeIntoContainer,
19 + useFormStatus,
20 + useFormState,
21 + prefetchDNS,
22 + preconnect,
23 + preload,
24 + preloadModule,
25 + preinit,
26 + preinitModule,
27 + version,
28 + __SECRET_INTERNALS_DO_NOT_USE_OR_YOU_WILL_BE_FIRED,
29 +} from './index.experimental.js';
30 +
31 +export {createRoot, hydrateRoot} from './client.js';
32 +
33 export {
34 createComponentSelector,
35 createHasPseudoClassSelector,
packages/react-dom/unstable_testing.js
+24 -1
@@ -7,7 +7,30 @@
7 * @flow
8 */
9
10 -export * from './index.js';
10 +export {
11 + createPortal,
12 + findDOMNode,
13 + flushSync,
14 + hydrate,
15 + render,
16 + unmountComponentAtNode,
17 + unstable_batchedUpdates,
18 + unstable_createEventHandle,
19 + unstable_renderSubtreeIntoContainer,
20 + unstable_runWithPriority, // DO NOT USE: Temporarily exposed to migrate off of Scheduler.runWithPriority.
21 + useFormStatus,
22 + useFormState,
23 + prefetchDNS,
24 + preconnect,
25 + preload,
26 + preloadModule,
27 + preinit,
28 + preinitModule,
29 + version,
30 +} from './index.js';
31 +
32 +export {createRoot, hydrateRoot} from './client.js';
33 +
34 export {
35 createComponentSelector,
36 createHasPseudoClassSelector,
packages/react-dom/unstable_testing.modern.fb.js
+17 -1
@@ -7,7 +7,23 @@
7 * @flow
8 */
9
10 -export * from './index.modern.fb.js';
10 +export {
11 + createPortal,
12 + flushSync,
13 + unstable_batchedUpdates,
14 + unstable_createEventHandle,
15 + useFormStatus,
16 + useFormState,
17 + prefetchDNS,
18 + preconnect,
19 + preload,
20 + preloadModule,
21 + preinit,
22 + preinitModule,
23 + version,
24 + __SECRET_INTERNALS_DO_NOT_USE_OR_YOU_WILL_BE_FIRED,
25 +} from './index.modern.fb.js';
26 +export {createRoot, hydrateRoot} from './client.js';
27 export {
28 createComponentSelector,
29 createHasPseudoClassSelector,
packages/react-dom/unstable_testing.stable.js
+21 -1
@@ -7,4 +7,24 @@
7 * @flow
8 */
9
10 -export * from './index.stable.js';
10 +export {
11 + createPortal,
12 + findDOMNode,
13 + flushSync,
14 + hydrate,
15 + render,
16 + unmountComponentAtNode,
17 + unstable_batchedUpdates,
18 + unstable_renderSubtreeIntoContainer,
19 + useFormStatus,
20 + useFormState,
21 + prefetchDNS,
22 + preconnect,
23 + preload,
24 + preloadModule,
25 + preinit,
26 + preinitModule,
27 + version,
28 + __SECRET_INTERNALS_DO_NOT_USE_OR_YOU_WILL_BE_FIRED,
29 +} from './index.stable.js';
30 +export {createRoot, hydrateRoot} from './client.js';