@samitouri / QOS-React-1 / commits / 93a5f40cbf

Convert ReactFresh to createRoot (#28170)

Sebastian Silbermann committed Feb 4, 2024 at 11:09 UTC 93a5f40cbf05a6efb63a78748d238605dfe35e0c
1 file changed +372 -326
packages/react-refresh/src/__tests__/ReactFresh-test.js
+372 -326
@@ -17,13 +17,13 @@ let ReactDOMClient;
17 let ReactFreshRuntime;
18 let Scheduler;
19 let act;
20 -let internalAct;
20 let createReactClass;
21 let waitFor;
22 let assertLog;
23
24 describe('ReactFresh', () => {
25 let container;
26 + let root;
27
28 beforeEach(() => {
29 if (__DEV__) {
@@ -34,8 +34,7 @@ describe('ReactFresh', () => {
34 ReactDOM = require('react-dom');
35 ReactDOMClient = require('react-dom/client');
36 Scheduler = require('scheduler');
37 - act = React.act;
38 - internalAct = require('internal-test-utils').act;
37 + act = require('internal-test-utils').act;
38
39 const InternalTestUtils = require('internal-test-utils');
40 waitFor = InternalTestUtils.waitFor;
@@ -47,6 +46,7 @@ describe('ReactFresh', () => {
46 new React.Component().updater,
47 );
48 container = document.createElement('div');
49 + root = ReactDOMClient.createRoot(container);
50 document.body.appendChild(container);
51 }
52 });
@@ -63,10 +63,10 @@ describe('ReactFresh', () => {
63 return Component;
64 }
65
66 - function render(version, props) {
66 + async function render(version, props) {
67 const Component = version();
68 - act(() => {
69 - ReactDOM.render(<Component {...props} />, container);
68 + await act(() => {
69 + root.render(<Component {...props} />);
70 });
71 return Component;
72 }
@@ -99,9 +99,9 @@ describe('ReactFresh', () => {
99 );
100 }
101
102 - it('can preserve state for compatible types', () => {
102 + it('can preserve state for compatible types', async () => {
103 if (__DEV__) {
104 - const HelloV1 = render(() => {
104 + const HelloV1 = await render(() => {
105 function Hello() {
106 const [val, setVal] = React.useState(0);
107 return (
@@ -118,7 +118,7 @@ describe('ReactFresh', () => {
118 const el = container.firstChild;
119 expect(el.textContent).toBe('0');
120 expect(el.style.color).toBe('blue');
121 - act(() => {
121 + await act(() => {
122 el.dispatchEvent(new MouseEvent('click', {bubbles: true}));
123 });
124 expect(el.textContent).toBe('1');
@@ -143,7 +143,7 @@ describe('ReactFresh', () => {
143 expect(el.style.color).toBe('red');
144
145 // Bump the state again.
146 - act(() => {
146 + await act(() => {
147 el.dispatchEvent(new MouseEvent('click', {bubbles: true}));
148 });
149 expect(container.firstChild).toBe(el);
@@ -153,15 +153,15 @@ describe('ReactFresh', () => {
153 // Perform top-down renders with both fresh and stale types.
154 // Neither should change the state or color.
155 // They should always resolve to the latest version.
156 - render(() => HelloV1);
157 - render(() => HelloV2);
158 - render(() => HelloV1);
156 + await render(() => HelloV1);
157 + await render(() => HelloV2);
158 + await render(() => HelloV1);
159 expect(container.firstChild).toBe(el);
160 expect(el.textContent).toBe('2');
161 expect(el.style.color).toBe('red');
162
163 // Bump the state again.
164 - act(() => {
164 + await act(() => {
165 el.dispatchEvent(new MouseEvent('click', {bubbles: true}));
166 });
167 expect(container.firstChild).toBe(el);
@@ -169,7 +169,7 @@ describe('ReactFresh', () => {
169 expect(el.style.color).toBe('red');
170
171 // Finally, a render with incompatible type should reset it.
172 - render(() => {
172 + await render(() => {
173 function Hello() {
174 const [val, setVal] = React.useState(0);
175 return (
@@ -189,9 +189,9 @@ describe('ReactFresh', () => {
189 }
190 });
191
192 - it('can preserve state for forwardRef', () => {
192 + it('can preserve state for forwardRef', async () => {
193 if (__DEV__) {
194 - const OuterV1 = render(() => {
194 + const OuterV1 = await render(() => {
195 function Hello() {
196 const [val, setVal] = React.useState(0);
197 return (
@@ -211,7 +211,7 @@ describe('ReactFresh', () => {
211 const el = container.firstChild;
212 expect(el.textContent).toBe('0');
213 expect(el.style.color).toBe('blue');
214 - act(() => {
214 + await act(() => {
215 el.dispatchEvent(new MouseEvent('click', {bubbles: true}));
216 });
217 expect(el.textContent).toBe('1');
@@ -239,7 +239,7 @@ describe('ReactFresh', () => {
239 expect(el.style.color).toBe('red');
240
241 // Bump the state again.
242 - act(() => {
242 + await act(() => {
243 el.dispatchEvent(new MouseEvent('click', {bubbles: true}));
244 });
245 expect(container.firstChild).toBe(el);
@@ -249,15 +249,15 @@ describe('ReactFresh', () => {
249 // Perform top-down renders with both fresh and stale types.
250 // Neither should change the state or color.
251 // They should always resolve to the latest version.
252 - render(() => OuterV1);
253 - render(() => OuterV2);
254 - render(() => OuterV1);
252 + await render(() => OuterV1);
253 + await render(() => OuterV2);
254 + await render(() => OuterV1);
255 expect(container.firstChild).toBe(el);
256 expect(el.textContent).toBe('2');
257 expect(el.style.color).toBe('red');
258
259 // Finally, a render with incompatible type should reset it.
260 - render(() => {
260 + await render(() => {
261 function Hello() {
262 const [val, setVal] = React.useState(0);
263 return (
@@ -279,9 +279,9 @@ describe('ReactFresh', () => {
279 }
280 });
281
282 - it('should not consider two forwardRefs around the same type to be equivalent', () => {
282 + it('should not consider two forwardRefs around the same type to be equivalent', async () => {
283 if (__DEV__) {
284 - const ParentV1 = render(
284 + const ParentV1 = await render(
285 () => {
286 function Hello() {
287 const [val, setVal] = React.useState(0);
@@ -317,32 +317,32 @@ describe('ReactFresh', () => {
317 let el = container.firstChild;
318 expect(el.textContent).toBe('0');
319 expect(el.style.color).toBe('blue');
320 - act(() => {
320 + await act(() => {
321 el.dispatchEvent(new MouseEvent('click', {bubbles: true}));
322 });
323 expect(el.textContent).toBe('1');
324
325 // Switching up the inner types should reset the state.
326 - render(() => ParentV1, {cond: false});
326 + await render(() => ParentV1, {cond: false});
327 expect(el).not.toBe(container.firstChild);
328 el = container.firstChild;
329 expect(el.textContent).toBe('0');
330 expect(el.style.color).toBe('blue');
331
332 - act(() => {
332 + await act(() => {
333 el.dispatchEvent(new MouseEvent('click', {bubbles: true}));
334 });
335 expect(el.textContent).toBe('1');
336
337 // Switch them up back again.
338 - render(() => ParentV1, {cond: true});
338 + await render(() => ParentV1, {cond: true});
339 expect(el).not.toBe(container.firstChild);
340 el = container.firstChild;
341 expect(el.textContent).toBe('0');
342 expect(el.style.color).toBe('blue');
343
344 // Now bump up the state to prepare for patching.
345 - act(() => {
345 + await act(() => {
346 el.dispatchEvent(new MouseEvent('click', {bubbles: true}));
347 });
348 expect(el.textContent).toBe('1');
@@ -383,14 +383,14 @@ describe('ReactFresh', () => {
383 expect(el.style.color).toBe('red');
384
385 // Switching up the condition should still reset the state.
386 - render(() => ParentV2, {cond: false});
386 + await render(() => ParentV2, {cond: false});
387 expect(el).not.toBe(container.firstChild);
388 el = container.firstChild;
389 expect(el.textContent).toBe('0');
390 expect(el.style.color).toBe('red');
391
392 // Now bump up the state to prepare for top-level renders.
393 - act(() => {
393 + await act(() => {
394 el.dispatchEvent(new MouseEvent('click', {bubbles: true}));
395 });
396 expect(el).toBe(container.firstChild);
@@ -398,18 +398,18 @@ describe('ReactFresh', () => {
398 expect(el.style.color).toBe('red');
399
400 // Finally, verify using top-level render with stale type keeps state.
401 - render(() => ParentV1);
402 - render(() => ParentV2);
403 - render(() => ParentV1);
401 + await render(() => ParentV1);
402 + await render(() => ParentV2);
403 + await render(() => ParentV1);
404 expect(container.firstChild).toBe(el);
405 expect(el.textContent).toBe('1');
406 expect(el.style.color).toBe('red');
407 }
408 });
409
410 - it('can update forwardRef render function with its wrapper', () => {
410 + it('can update forwardRef render function with its wrapper', async () => {
411 if (__DEV__) {
412 - render(() => {
412 + await render(() => {
413 function Hello({color}) {
414 const [val, setVal] = React.useState(0);
415 return (
@@ -429,7 +429,7 @@ describe('ReactFresh', () => {
429 const el = container.firstChild;
430 expect(el.textContent).toBe('0');
431 expect(el.style.color).toBe('blue');
432 - act(() => {
432 + await act(() => {
433 el.dispatchEvent(new MouseEvent('click', {bubbles: true}));
434 });
435 expect(el.textContent).toBe('1');
@@ -458,9 +458,9 @@ describe('ReactFresh', () => {
458 }
459 });
460
461 - it('can update forwardRef render function in isolation', () => {
461 + it('can update forwardRef render function in isolation', async () => {
462 if (__DEV__) {
463 - render(() => {
463 + await render(() => {
464 function Hello({color}) {
465 const [val, setVal] = React.useState(0);
466 return (
@@ -483,7 +483,7 @@ describe('ReactFresh', () => {
483 const el = container.firstChild;
484 expect(el.textContent).toBe('0');
485 expect(el.style.color).toBe('blue');
486 - act(() => {
486 + await act(() => {
487 el.dispatchEvent(new MouseEvent('click', {bubbles: true}));
488 });
489 expect(el.textContent).toBe('1');
@@ -515,9 +515,9 @@ describe('ReactFresh', () => {
515 }
516 });
517
518 - it('can preserve state for simple memo', () => {
518 + it('can preserve state for simple memo', async () => {
519 if (__DEV__) {
520 - const OuterV1 = render(() => {
520 + const OuterV1 = await render(() => {
521 function Hello() {
522 const [val, setVal] = React.useState(0);
523 return (
@@ -537,7 +537,7 @@ describe('ReactFresh', () => {
537 const el = container.firstChild;
538 expect(el.textContent).toBe('0');
539 expect(el.style.color).toBe('blue');
540 - act(() => {
540 + await act(() => {
541 el.dispatchEvent(new MouseEvent('click', {bubbles: true}));
542 });
543 expect(el.textContent).toBe('1');
@@ -565,7 +565,7 @@ describe('ReactFresh', () => {
565 expect(el.style.color).toBe('red');
566
567 // Bump the state again.
568 - act(() => {
568 + await act(() => {
569 el.dispatchEvent(new MouseEvent('click', {bubbles: true}));
570 });
571 expect(container.firstChild).toBe(el);
@@ -575,15 +575,15 @@ describe('ReactFresh', () => {
575 // Perform top-down renders with both fresh and stale types.
576 // Neither should change the state or color.
577 // They should always resolve to the latest version.
578 - render(() => OuterV1);
579 - render(() => OuterV2);
580 - render(() => OuterV1);
578 + await render(() => OuterV1);
579 + await render(() => OuterV2);
580 + await render(() => OuterV1);
581 expect(container.firstChild).toBe(el);
582 expect(el.textContent).toBe('2');
583 expect(el.style.color).toBe('red');
584
585 // Finally, a render with incompatible type should reset it.
586 - render(() => {
586 + await render(() => {
587 function Hello() {
588 const [val, setVal] = React.useState(0);
589 return (
@@ -605,9 +605,9 @@ describe('ReactFresh', () => {
605 }
606 });
607
608 - it('can preserve state for memo with custom comparison', () => {
608 + it('can preserve state for memo with custom comparison', async () => {
609 if (__DEV__) {
610 - const OuterV1 = render(() => {
610 + const OuterV1 = await render(() => {
611 function Hello() {
612 const [val, setVal] = React.useState(0);
613 return (
@@ -626,7 +626,7 @@ describe('ReactFresh', () => {
626 const el = container.firstChild;
627 expect(el.textContent).toBe('0');
628 expect(el.style.color).toBe('blue');
629 - act(() => {
629 + await act(() => {
630 el.dispatchEvent(new MouseEvent('click', {bubbles: true}));
631 });
632 expect(el.textContent).toBe('1');
@@ -653,7 +653,7 @@ describe('ReactFresh', () => {
653 expect(el.style.color).toBe('red');
654
655 // Bump the state again.
656 - act(() => {
656 + await act(() => {
657 el.dispatchEvent(new MouseEvent('click', {bubbles: true}));
658 });
659 expect(container.firstChild).toBe(el);
@@ -663,15 +663,15 @@ describe('ReactFresh', () => {
663 // Perform top-down renders with both fresh and stale types.
664 // Neither should change the state or color.
665 // They should always resolve to the latest version.
666 - render(() => OuterV1);
667 - render(() => OuterV2);
668 - render(() => OuterV1);
666 + await render(() => OuterV1);
667 + await render(() => OuterV2);
668 + await render(() => OuterV1);
669 expect(container.firstChild).toBe(el);
670 expect(el.textContent).toBe('2');
671 expect(el.style.color).toBe('red');
672
673 // Finally, a render with incompatible type should reset it.
674 - render(() => {
674 + await render(() => {
675 function Hello() {
676 const [val, setVal] = React.useState(0);
677 return (
@@ -693,9 +693,9 @@ describe('ReactFresh', () => {
693 }
694 });
695
696 - it('can update simple memo function in isolation', () => {
696 + it('can update simple memo function in isolation', async () => {
697 if (__DEV__) {
698 - render(() => {
698 + await render(() => {
699 function Hello() {
700 const [val, setVal] = React.useState(0);
701 return (
@@ -713,7 +713,7 @@ describe('ReactFresh', () => {
713 const el = container.firstChild;
714 expect(el.textContent).toBe('0');
715 expect(el.style.color).toBe('blue');
716 - act(() => {
716 + await act(() => {
717 el.dispatchEvent(new MouseEvent('click', {bubbles: true}));
718 });
719 expect(el.textContent).toBe('1');
@@ -740,9 +740,9 @@ describe('ReactFresh', () => {
740 }
741 });
742
743 - it('can preserve state for memo(forwardRef)', () => {
743 + it('can preserve state for memo(forwardRef)', async () => {
744 if (__DEV__) {
745 - const OuterV1 = render(() => {
745 + const OuterV1 = await render(() => {
746 function Hello() {
747 const [val, setVal] = React.useState(0);
748 return (
@@ -762,7 +762,7 @@ describe('ReactFresh', () => {
762 const el = container.firstChild;
763 expect(el.textContent).toBe('0');
764 expect(el.style.color).toBe('blue');
765 - act(() => {
765 + await act(() => {
766 el.dispatchEvent(new MouseEvent('click', {bubbles: true}));
767 });
768 expect(el.textContent).toBe('1');
@@ -790,7 +790,7 @@ describe('ReactFresh', () => {
790 expect(el.style.color).toBe('red');
791
792 // Bump the state again.
793 - act(() => {
793 + await act(() => {
794 el.dispatchEvent(new MouseEvent('click', {bubbles: true}));
795 });
796 expect(container.firstChild).toBe(el);
@@ -800,15 +800,15 @@ describe('ReactFresh', () => {
800 // Perform top-down renders with both fresh and stale types.
801 // Neither should change the state or color.
802 // They should always resolve to the latest version.
803 - render(() => OuterV1);
804 - render(() => OuterV2);
805 - render(() => OuterV1);
803 + await render(() => OuterV1);
804 + await render(() => OuterV2);
805 + await render(() => OuterV1);
806 expect(container.firstChild).toBe(el);
807 expect(el.textContent).toBe('2');
808 expect(el.style.color).toBe('red');
809
810 // Finally, a render with incompatible type should reset it.
811 - render(() => {
811 + await render(() => {
812 function Hello() {
813 const [val, setVal] = React.useState(0);
814 return (
@@ -832,7 +832,8 @@ describe('ReactFresh', () => {
832
833 it('can preserve state for lazy after resolution', async () => {
834 if (__DEV__) {
835 - const AppV1 = render(() => {
835 + let resolve;
836 + const AppV1 = await render(() => {
837 function Hello() {
838 const [val, setVal] = React.useState(0);
839 return (
@@ -845,8 +846,8 @@ describe('ReactFresh', () => {
846
847 const Outer = React.lazy(
848 () =>
848 - new Promise(resolve => {
849 - setTimeout(() => resolve({default: Hello}), 100);
849 + new Promise(_resolve => {
850 + resolve = () => _resolve({default: Hello});
851 }),
852 );
853 $RefreshReg$(Outer, 'Outer');
@@ -865,7 +866,7 @@ describe('ReactFresh', () => {
866
867 expect(container.textContent).toBe('Loading');
868 await act(() => {
868 - jest.runAllTimers();
869 + resolve();
870 });
871 expect(container.textContent).toBe('0');
872
@@ -873,7 +874,7 @@ describe('ReactFresh', () => {
874 const el = container.firstChild;
875 expect(el.textContent).toBe('0');
876 expect(el.style.color).toBe('blue');
876 - act(() => {
877 + await act(() => {
878 el.dispatchEvent(new MouseEvent('click', {bubbles: true}));
879 });
880 expect(el.textContent).toBe('1');
@@ -892,8 +893,8 @@ describe('ReactFresh', () => {
893
894 const Outer = React.lazy(
895 () =>
895 - new Promise(resolve => {
896 - setTimeout(() => resolve({default: Hello}), 100);
896 + new Promise(_resolve => {
897 + resolve = () => _resolve({default: Hello});
898 }),
899 );
900 $RefreshReg$(Outer, 'Outer');
@@ -916,7 +917,7 @@ describe('ReactFresh', () => {
917 expect(el.style.color).toBe('red');
918
919 // Bump the state again.
919 - act(() => {
920 + await act(() => {
921 el.dispatchEvent(new MouseEvent('click', {bubbles: true}));
922 });
923 expect(container.firstChild).toBe(el);
@@ -926,15 +927,15 @@ describe('ReactFresh', () => {
927 // Perform top-down renders with both fresh and stale types.
928 // Neither should change the state or color.
929 // They should always resolve to the latest version.
929 - render(() => AppV1);
930 - render(() => AppV2);
931 - render(() => AppV1);
930 + await render(() => AppV1);
931 + await render(() => AppV2);
932 + await render(() => AppV1);
933 expect(container.firstChild).toBe(el);
934 expect(el.textContent).toBe('2');
935 expect(el.style.color).toBe('red');
936
937 // Finally, a render with incompatible type should reset it.
937 - render(() => {
938 + await render(() => {
939 function Hello() {
940 const [val, setVal] = React.useState(0);
941 return (
@@ -968,7 +969,8 @@ describe('ReactFresh', () => {
969
970 it('can patch lazy before resolution', async () => {
971 if (__DEV__) {
971 - render(() => {
972 + let resolve;
973 + await render(() => {
974 function Hello() {
975 const [val, setVal] = React.useState(0);
976 return (
@@ -981,8 +983,8 @@ describe('ReactFresh', () => {
983
984 const Outer = React.lazy(
985 () =>
984 - new Promise(resolve => {
985 - setTimeout(() => resolve({default: Hello}), 100);
986 + new Promise(_resolve => {
987 + resolve = () => _resolve({default: Hello});
988 }),
989 );
990 $RefreshReg$(Outer, 'Outer');
@@ -1014,7 +1016,7 @@ describe('ReactFresh', () => {
1016 });
1017
1018 await act(() => {
1017 - jest.runAllTimers();
1019 + resolve();
1020 });
1021
1022 // Expect different color on initial mount.
@@ -1023,7 +1025,7 @@ describe('ReactFresh', () => {
1025 expect(el.style.color).toBe('red');
1026
1027 // Bump state.
1026 - act(() => {
1028 + await act(() => {
1029 el.dispatchEvent(new MouseEvent('click', {bubbles: true}));
1030 });
1031 expect(container.firstChild).toBe(el);
@@ -1050,7 +1052,8 @@ describe('ReactFresh', () => {
1052
1053 it('can patch lazy(forwardRef) before resolution', async () => {
1054 if (__DEV__) {
1053 - render(() => {
1055 + let resolve;
1056 + await render(() => {
1057 function renderHello() {
1058 const [val, setVal] = React.useState(0);
1059 return (
@@ -1064,8 +1067,8 @@ describe('ReactFresh', () => {
1067
1068 const Outer = React.lazy(
1069 () =>
1067 - new Promise(resolve => {
1068 - setTimeout(() => resolve({default: Hello}), 100);
1070 + new Promise(_resolve => {
1071 + resolve = () => _resolve({default: Hello});
1072 }),
1073 );
1074 $RefreshReg$(Outer, 'Outer');
@@ -1098,7 +1101,7 @@ describe('ReactFresh', () => {
1101 });
1102
1103 await act(() => {
1101 - jest.runAllTimers();
1104 + resolve();
1105 });
1106
1107 // Expect different color on initial mount.
@@ -1107,7 +1110,7 @@ describe('ReactFresh', () => {
1110 expect(el.style.color).toBe('red');
1111
1112 // Bump state.
1110 - act(() => {
1113 + await act(() => {
1114 el.dispatchEvent(new MouseEvent('click', {bubbles: true}));
1115 });
1116 expect(container.firstChild).toBe(el);
@@ -1135,7 +1138,8 @@ describe('ReactFresh', () => {
1138
1139 it('can patch lazy(memo) before resolution', async () => {
1140 if (__DEV__) {
1138 - render(() => {
1141 + let resolve;
1142 + await render(() => {
1143 function renderHello() {
1144 const [val, setVal] = React.useState(0);
1145 return (
@@ -1149,8 +1153,8 @@ describe('ReactFresh', () => {
1153
1154 const Outer = React.lazy(
1155 () =>
1152 - new Promise(resolve => {
1153 - setTimeout(() => resolve({default: Hello}), 100);
1156 + new Promise(_resolve => {
1157 + resolve = () => _resolve({default: Hello});
1158 }),
1159 );
1160 $RefreshReg$(Outer, 'Outer');
@@ -1183,7 +1187,7 @@ describe('ReactFresh', () => {
1187 });
1188
1189 await act(() => {
1186 - jest.runAllTimers();
1190 + resolve();
1191 });
1192
1193 // Expect different color on initial mount.
@@ -1192,7 +1196,7 @@ describe('ReactFresh', () => {
1196 expect(el.style.color).toBe('red');
1197
1198 // Bump state.
1195 - act(() => {
1199 + await act(() => {
1200 el.dispatchEvent(new MouseEvent('click', {bubbles: true}));
1201 });
1202 expect(container.firstChild).toBe(el);
@@ -1220,7 +1224,8 @@ describe('ReactFresh', () => {
1224
1225 it('can patch lazy(memo(forwardRef)) before resolution', async () => {
1226 if (__DEV__) {
1223 - render(() => {
1227 + let resolve;
1228 + await render(() => {
1229 function renderHello() {
1230 const [val, setVal] = React.useState(0);
1231 return (
@@ -1234,8 +1239,8 @@ describe('ReactFresh', () => {
1239
1240 const Outer = React.lazy(
1241 () =>
1237 - new Promise(resolve => {
1238 - setTimeout(() => resolve({default: Hello}), 100);
1242 + new Promise(_resolve => {
1243 + resolve = () => _resolve({default: Hello});
1244 }),
1245 );
1246 $RefreshReg$(Outer, 'Outer');
@@ -1268,7 +1273,7 @@ describe('ReactFresh', () => {
1273 });
1274
1275 await act(() => {
1271 - jest.runAllTimers();
1276 + resolve();
1277 });
1278
1279 // Expect different color on initial mount.
@@ -1277,7 +1282,7 @@ describe('ReactFresh', () => {
1282 expect(el.style.color).toBe('red');
1283
1284 // Bump state.
1280 - act(() => {
1285 + await act(() => {
1286 el.dispatchEvent(new MouseEvent('click', {bubbles: true}));
1287 });
1288 expect(container.firstChild).toBe(el);
@@ -1303,9 +1308,9 @@ describe('ReactFresh', () => {
1308 }
1309 });
1310
1306 - it('can patch both trees while suspense is displaying the fallback', async () => {
1311 + it('only patches the fallback tree while suspended', async () => {
1312 if (__DEV__) {
1308 - const AppV1 = render(
1313 + const AppV1 = await render(
1314 () => {
1315 function Hello({children}) {
1316 const [val, setVal] = React.useState(0);
@@ -1343,7 +1348,7 @@ describe('ReactFresh', () => {
1348 expect(primaryChild.style.display).toBe('');
1349
1350 // Bump primary content state.
1346 - act(() => {
1351 + await act(() => {
1352 primaryChild.dispatchEvent(new MouseEvent('click', {bubbles: true}));
1353 });
1354 expect(container.childNodes.length).toBe(1);
@@ -1371,7 +1376,7 @@ describe('ReactFresh', () => {
1376 expect(primaryChild.style.display).toBe('');
1377
1378 // Now force the tree to suspend.
1374 - render(() => AppV1, {shouldSuspend: true});
1379 + await render(() => AppV1, {shouldSuspend: true});
1380
1381 // Expect to see two trees, one of them is hidden.
1382 expect(container.childNodes.length).toBe(2);
@@ -1385,7 +1390,7 @@ describe('ReactFresh', () => {
1390 expect(fallbackChild.style.display).toBe('');
1391
1392 // Bump fallback state.
1388 - act(() => {
1393 + await act(() => {
1394 fallbackChild.dispatchEvent(new MouseEvent('click', {bubbles: true}));
1395 });
1396 expect(container.childNodes.length).toBe(2);
@@ -1411,19 +1416,19 @@ describe('ReactFresh', () => {
1416 $RefreshReg$(Hello, 'Hello');
1417 });
1418
1414 - // Colors inside both trees should change:
1419 + // Only update color in the visible child
1420 expect(container.childNodes.length).toBe(2);
1421 expect(container.childNodes[0]).toBe(primaryChild);
1422 expect(container.childNodes[1]).toBe(fallbackChild);
1423 expect(primaryChild.textContent).toBe('Content 1');
1419 - expect(primaryChild.style.color).toBe('red');
1424 + expect(primaryChild.style.color).toBe('green');
1425 expect(primaryChild.style.display).toBe('none');
1426 expect(fallbackChild.textContent).toBe('Fallback 1');
1427 expect(fallbackChild.style.color).toBe('red');
1428 expect(fallbackChild.style.display).toBe('');
1429
1430 // Only primary tree should exist now:
1426 - render(() => AppV1, {shouldSuspend: false});
1431 + await render(() => AppV1, {shouldSuspend: false});
1432 expect(container.childNodes.length).toBe(1);
1433 expect(container.childNodes[0]).toBe(primaryChild);
1434 expect(primaryChild.textContent).toBe('Content 1');
@@ -1450,11 +1455,11 @@ describe('ReactFresh', () => {
1455 }
1456 });
1457
1453 - it('does not re-render ancestor components unnecessarily during a hot update', () => {
1458 + it('does not re-render ancestor components unnecessarily during a hot update', async () => {
1459 if (__DEV__) {
1460 let appRenders = 0;
1461
1457 - render(() => {
1462 + await render(() => {
1463 function Hello() {
1464 const [val, setVal] = React.useState(0);
1465 return (
@@ -1478,7 +1483,7 @@ describe('ReactFresh', () => {
1483 const el = container.firstChild;
1484 expect(el.textContent).toBe('0');
1485 expect(el.style.color).toBe('blue');
1481 - act(() => {
1486 + await act(() => {
1487 el.dispatchEvent(new MouseEvent('click', {bubbles: true}));
1488 });
1489 expect(el.textContent).toBe('1');
@@ -1508,7 +1513,7 @@ describe('ReactFresh', () => {
1513 expect(appRenders).toBe(1);
1514
1515 // Bump the state.
1511 - act(() => {
1516 + await act(() => {
1517 el.dispatchEvent(new MouseEvent('click', {bubbles: true}));
1518 });
1519 expect(el.textContent).toBe('2');
@@ -1518,11 +1523,11 @@ describe('ReactFresh', () => {
1523 }
1524 });
1525
1521 - it('batches re-renders during a hot update', () => {
1526 + it('batches re-renders during a hot update', async () => {
1527 if (__DEV__) {
1528 let helloRenders = 0;
1529
1525 - render(() => {
1530 + await render(() => {
1531 function Hello({children}) {
1532 helloRenders++;
1533 return <div>X{children}X</div>;
@@ -1559,9 +1564,9 @@ describe('ReactFresh', () => {
1564 }
1565 });
1566
1562 - it('does not leak state between components', () => {
1567 + it('does not leak state between components', async () => {
1568 if (__DEV__) {
1564 - const AppV1 = render(
1569 + const AppV1 = await render(
1570 () => {
1571 function Hello1() {
1572 const [val, setVal] = React.useState(0);
@@ -1594,21 +1599,21 @@ describe('ReactFresh', () => {
1599 const el = container.firstChild;
1600 expect(el.textContent).toBe('0');
1601 expect(el.style.color).toBe('blue');
1597 - act(() => {
1602 + await act(() => {
1603 el.dispatchEvent(new MouseEvent('click', {bubbles: true}));
1604 });
1605 expect(el.textContent).toBe('1');
1606
1607 // Switch the condition, flipping inner content.
1608 // This should reset the state.
1604 - render(() => AppV1, {cond: true});
1609 + await render(() => AppV1, {cond: true});
1610 const el2 = container.firstChild;
1611 expect(el2).not.toBe(el);
1612 expect(el2.textContent).toBe('0');
1613 expect(el2.style.color).toBe('blue');
1614
1615 // Bump it again.
1611 - act(() => {
1616 + await act(() => {
1617 el2.dispatchEvent(new MouseEvent('click', {bubbles: true}));
1618 });
1619 expect(el2.textContent).toBe('1');
@@ -1641,7 +1646,7 @@ describe('ReactFresh', () => {
1646 expect(el2.style.color).toBe('red');
1647
1648 // Flip the condition again.
1644 - render(() => AppV1, {cond: false});
1649 + await render(() => AppV1, {cond: false});
1650 const el3 = container.firstChild;
1651 expect(el3).not.toBe(el2);
1652 expect(el3.textContent).toBe('0');
@@ -1649,9 +1654,9 @@ describe('ReactFresh', () => {
1654 }
1655 });
1656
1652 - it('can force remount by changing signature', () => {
1657 + it('can force remount by changing signature', async () => {
1658 if (__DEV__) {
1654 - const HelloV1 = render(() => {
1659 + const HelloV1 = await render(() => {
1660 function Hello() {
1661 const [val, setVal] = React.useState(0);
1662 return (
@@ -1670,7 +1675,7 @@ describe('ReactFresh', () => {
1675 const el = container.firstChild;
1676 expect(el.textContent).toBe('0');
1677 expect(el.style.color).toBe('blue');
1673 - act(() => {
1678 + await act(() => {
1679 el.dispatchEvent(new MouseEvent('click', {bubbles: true}));
1680 });
1681 expect(el.textContent).toBe('1');
@@ -1719,7 +1724,7 @@ describe('ReactFresh', () => {
1724 expect(newEl.style.color).toBe('yellow');
1725
1726 // Bump state again.
1722 - act(() => {
1727 + await act(() => {
1728 newEl.dispatchEvent(new MouseEvent('click', {bubbles: true}));
1729 });
1730 expect(newEl.textContent).toBe('1');
@@ -1728,11 +1733,11 @@ describe('ReactFresh', () => {
1733 // Perform top-down renders with both fresh and stale types.
1734 // Neither should change the state or color.
1735 // They should always resolve to the latest version.
1731 - render(() => HelloV1);
1732 - render(() => HelloV2);
1733 - render(() => HelloV3);
1734 - render(() => HelloV2);
1735 - render(() => HelloV1);
1736 + await render(() => HelloV1);
1737 + await render(() => HelloV2);
1738 + await render(() => HelloV3);
1739 + await render(() => HelloV2);
1740 + await render(() => HelloV1);
1741 expect(container.firstChild).toBe(newEl);
1742 expect(newEl.textContent).toBe('1');
1743 expect(newEl.style.color).toBe('yellow');
@@ -1780,7 +1785,7 @@ describe('ReactFresh', () => {
1785 }
1786 });
1787
1783 - it('keeps a valid tree when forcing remount', () => {
1788 + it('keeps a valid tree when forcing remount', async () => {
1789 if (__DEV__) {
1790 const HelloV1 = prepare(() => {
1791 function Hello() {
@@ -1910,26 +1915,31 @@ describe('ReactFresh', () => {
1915 </HelloV1>,
1916 ];
1917
1913 - // First, check that each tree handles remounts in isolation.
1914 - ReactDOM.render(null, container);
1918 + await act(() => {
1919 + root.render(null);
1920 + });
1921 +
1922 for (let i = 0; i < trees.length; i++) {
1916 - runRemountingStressTest(trees[i]);
1923 + await runRemountingStressTest(trees[i]);
1924 }
1925
1926 // Then check that each tree is resilient to updates from another tree.
1927 for (let i = 0; i < trees.length; i++) {
1928 for (let j = 0; j < trees.length; j++) {
1922 - ReactDOM.render(null, container);
1929 + await act(() => {
1930 + root.render(null);
1931 + });
1932 +
1933 // Intentionally don't clean up between the tests:
1924 - runRemountingStressTest(trees[i]);
1925 - runRemountingStressTest(trees[j]);
1926 - runRemountingStressTest(trees[i]);
1934 + await runRemountingStressTest(trees[i]);
1935 + await runRemountingStressTest(trees[j]);
1936 + await runRemountingStressTest(trees[i]);
1937 }
1938 }
1939 }
1930 - });
1940 + }, 10000);
1941
1932 - function runRemountingStressTest(tree) {
1942 + async function runRemountingStressTest(tree) {
1943 patch(() => {
1944 function Hello({children}) {
1945 return <section data-color="blue">{children}</section>;
@@ -1939,7 +1949,10 @@ describe('ReactFresh', () => {
1949 return Hello;
1950 });
1951
1942 - ReactDOM.render(tree, container);
1952 + await act(() => {
1953 + root.render(tree);
1954 + });
1955 +
1956 const elements = container.querySelectorAll('section');
1957 // Each tree above produces exactly three <section> elements:
1958 expect(elements.length).toBe(3);
@@ -2003,8 +2016,10 @@ describe('ReactFresh', () => {
2016 expect(el.dataset.color).toBe('black');
2017 });
2018
2006 - // Do another render just in case.
2007 - ReactDOM.render(tree, container);
2019 + await act(() => {
2020 + root.render(tree);
2021 + });
2022 +
2023 expect(container.querySelectorAll('section').length).toBe(3);
2024 container.querySelectorAll('section').forEach((el, index) => {
2025 expect(el).toBe(elementsAfterRemount[index]);
@@ -2012,21 +2027,21 @@ describe('ReactFresh', () => {
2027 });
2028 }
2029
2015 - it('can remount on signature change within a <root> wrapper', () => {
2030 + it('can remount on signature change within a <root> wrapper', async () => {
2031 if (__DEV__) {
2017 - testRemountingWithWrapper(Hello => Hello);
2032 + await testRemountingWithWrapper(Hello => Hello);
2033 }
2034 });
2035
2021 - it('can remount on signature change within a simple memo wrapper', () => {
2036 + it('can remount on signature change within a simple memo wrapper', async () => {
2037 if (__DEV__) {
2023 - testRemountingWithWrapper(Hello => React.memo(Hello));
2038 + await testRemountingWithWrapper(Hello => React.memo(Hello));
2039 }
2040 });
2041
2027 - it('can remount on signature change within a lazy simple memo wrapper', () => {
2042 + it('can remount on signature change within a lazy simple memo wrapper', async () => {
2043 if (__DEV__) {
2029 - testRemountingWithWrapper(Hello =>
2044 + await testRemountingWithWrapper(Hello =>
2045 React.lazy(() => ({
2046 then(cb) {
2047 cb({default: React.memo(Hello)});
@@ -2036,35 +2051,37 @@ describe('ReactFresh', () => {
2051 }
2052 });
2053
2039 - it('can remount on signature change within forwardRef', () => {
2054 + it('can remount on signature change within forwardRef', async () => {
2055 if (__DEV__) {
2041 - testRemountingWithWrapper(Hello => React.forwardRef(Hello));
2056 + await testRemountingWithWrapper(Hello => React.forwardRef(Hello));
2057 }
2058 });
2059
2045 - it('can remount on signature change within forwardRef render function', () => {
2060 + it('can remount on signature change within forwardRef render function', async () => {
2061 if (__DEV__) {
2047 - testRemountingWithWrapper(Hello => React.forwardRef(() => <Hello />));
2062 + await testRemountingWithWrapper(Hello =>
2063 + React.forwardRef(() => <Hello />),
2064 + );
2065 }
2066 });
2067
2051 - it('can remount on signature change within nested memo', () => {
2068 + it('can remount on signature change within nested memo', async () => {
2069 if (__DEV__) {
2053 - testRemountingWithWrapper(Hello =>
2070 + await testRemountingWithWrapper(Hello =>
2071 React.memo(React.memo(React.memo(Hello))),
2072 );
2073 }
2074 });
2075
2059 - it('can remount on signature change within a memo wrapper and custom comparison', () => {
2076 + it('can remount on signature change within a memo wrapper and custom comparison', async () => {
2077 if (__DEV__) {
2061 - testRemountingWithWrapper(Hello => React.memo(Hello, () => true));
2078 + await testRemountingWithWrapper(Hello => React.memo(Hello, () => true));
2079 }
2080 });
2081
2065 - it('can remount on signature change within a class', () => {
2082 + it('can remount on signature change within a class', async () => {
2083 if (__DEV__) {
2067 - testRemountingWithWrapper(Hello => {
2084 + await testRemountingWithWrapper(Hello => {
2085 const child = <Hello />;
2086 return class Wrapper extends React.PureComponent {
2087 render() {
@@ -2075,9 +2092,9 @@ describe('ReactFresh', () => {
2092 }
2093 });
2094
2078 - it('can remount on signature change within a context provider', () => {
2095 + it('can remount on signature change within a context provider', async () => {
2096 if (__DEV__) {
2080 - testRemountingWithWrapper(Hello => {
2097 + await testRemountingWithWrapper(Hello => {
2098 const Context = React.createContext();
2099 const child = (
2100 <Context.Provider value="constant">
@@ -2091,9 +2108,9 @@ describe('ReactFresh', () => {
2108 }
2109 });
2110
2094 - it('can remount on signature change within a context consumer', () => {
2111 + it('can remount on signature change within a context consumer', async () => {
2112 if (__DEV__) {
2096 - testRemountingWithWrapper(Hello => {
2113 + await testRemountingWithWrapper(Hello => {
2114 const Context = React.createContext();
2115 const child = <Context.Consumer>{() => <Hello />}</Context.Consumer>;
2116 return function Wrapper() {
@@ -2103,9 +2120,9 @@ describe('ReactFresh', () => {
2120 }
2121 });
2122
2106 - it('can remount on signature change within a suspense node', () => {
2123 + it('can remount on signature change within a suspense node', async () => {
2124 if (__DEV__) {
2108 - testRemountingWithWrapper(Hello => {
2125 + await testRemountingWithWrapper(Hello => {
2126 // TODO: we'll probably want to test fallback trees too.
2127 const child = (
2128 <React.Suspense>
@@ -2119,9 +2136,9 @@ describe('ReactFresh', () => {
2136 }
2137 });
2138
2122 - it('can remount on signature change within a mode node', () => {
2139 + it('can remount on signature change within a mode node', async () => {
2140 if (__DEV__) {
2124 - testRemountingWithWrapper(Hello => {
2141 + await testRemountingWithWrapper(Hello => {
2142 const child = (
2143 <React.StrictMode>
2144 <Hello />
@@ -2134,9 +2151,9 @@ describe('ReactFresh', () => {
2151 }
2152 });
2153
2137 - it('can remount on signature change within a fragment node', () => {
2154 + it('can remount on signature change within a fragment node', async () => {
2155 if (__DEV__) {
2139 - testRemountingWithWrapper(Hello => {
2156 + await testRemountingWithWrapper(Hello => {
2157 const child = (
2158 <>
2159 <Hello />
@@ -2149,9 +2166,9 @@ describe('ReactFresh', () => {
2166 }
2167 });
2168
2152 - it('can remount on signature change within multiple siblings', () => {
2169 + it('can remount on signature change within multiple siblings', async () => {
2170 if (__DEV__) {
2154 - testRemountingWithWrapper(Hello => {
2171 + await testRemountingWithWrapper(Hello => {
2172 const child = (
2173 <>
2174 <>
@@ -2168,9 +2185,9 @@ describe('ReactFresh', () => {
2185 }
2186 });
2187
2171 - it('can remount on signature change within a profiler node', () => {
2188 + it('can remount on signature change within a profiler node', async () => {
2189 if (__DEV__) {
2173 - testRemountingWithWrapper(Hello => {
2190 + await testRemountingWithWrapper(Hello => {
2191 const child = <Hello />;
2192 return function Wrapper() {
2193 return (
@@ -2183,8 +2200,8 @@ describe('ReactFresh', () => {
2200 }
2201 });
2202
2186 - function testRemountingWithWrapper(wrap) {
2187 - render(() => {
2203 + async function testRemountingWithWrapper(wrap) {
2204 + await render(() => {
2205 function Hello() {
2206 const [val, setVal] = React.useState(0);
2207 return (
@@ -2206,7 +2223,7 @@ describe('ReactFresh', () => {
2223 const el = container.firstChild;
2224 expect(el.textContent).toBe('0');
2225 expect(el.style.color).toBe('blue');
2209 - act(() => {
2226 + await act(() => {
2227 el.dispatchEvent(new MouseEvent('click', {bubbles: true}));
2228 });
2229 expect(el.textContent).toBe('1');
@@ -2255,7 +2272,7 @@ describe('ReactFresh', () => {
2272 expect(newEl.style.color).toBe('yellow');
2273
2274 // Bump state again.
2258 - act(() => {
2275 + await act(() => {
2276 newEl.dispatchEvent(new MouseEvent('click', {bubbles: true}));
2277 });
2278 expect(newEl.textContent).toBe('1');
@@ -2303,11 +2320,11 @@ describe('ReactFresh', () => {
2320 expect(finalEl.style.color).toBe('orange');
2321 }
2322
2306 - it('resets hooks with dependencies on hot reload', () => {
2323 + it('resets hooks with dependencies on hot reload', async () => {
2324 if (__DEV__) {
2325 let useEffectWithEmptyArrayCalls = 0;
2326
2310 - render(() => {
2327 + await render(() => {
2328 function Hello() {
2329 const [val, setVal] = React.useState(0);
2330 const tranformed = React.useMemo(() => val * 2, [val]);
@@ -2332,33 +2349,31 @@ describe('ReactFresh', () => {
2349 expect(el.textContent).toBe('0');
2350 expect(el.style.color).toBe('blue');
2351 expect(useEffectWithEmptyArrayCalls).toBe(1); // useEffect ran
2335 - act(() => {
2352 + await act(() => {
2353 el.dispatchEvent(new MouseEvent('click', {bubbles: true}));
2354 });
2355 expect(el.textContent).toBe('2'); // val * 2
2356 expect(useEffectWithEmptyArrayCalls).toBe(1); // useEffect didn't re-run
2357
2358 // Perform a hot update.
2342 - act(() => {
2343 - patch(() => {
2344 - function Hello() {
2345 - const [val, setVal] = React.useState(0);
2346 - const tranformed = React.useMemo(() => val * 10, [val]);
2347 - const handleClick = React.useCallback(() => setVal(v => v - 1), []);
2359 + patch(() => {
2360 + function Hello() {
2361 + const [val, setVal] = React.useState(0);
2362 + const tranformed = React.useMemo(() => val * 10, [val]);
2363 + const handleClick = React.useCallback(() => setVal(v => v - 1), []);
2364
2349 - React.useEffect(() => {
2350 - useEffectWithEmptyArrayCalls++;
2351 - }, []);
2365 + React.useEffect(() => {
2366 + useEffectWithEmptyArrayCalls++;
2367 + }, []);
2368
2353 - return (
2354 - <p style={{color: 'red'}} onClick={handleClick}>
2355 - {tranformed}
2356 - </p>
2357 - );
2358 - }
2359 - $RefreshReg$(Hello, 'Hello');
2360 - return Hello;
2361 - });
2369 + return (
2370 + <p style={{color: 'red'}} onClick={handleClick}>
2371 + {tranformed}
2372 + </p>
2373 + );
2374 + }
2375 + $RefreshReg$(Hello, 'Hello');
2376 + return Hello;
2377 });
2378
2379 // Assert the state was preserved but memo was evicted.
@@ -2368,7 +2383,7 @@ describe('ReactFresh', () => {
2383 expect(useEffectWithEmptyArrayCalls).toBe(2); // useEffect re-ran
2384
2385 // This should fire the new callback which decreases the counter.
2371 - act(() => {
2386 + await act(() => {
2387 el.dispatchEvent(new MouseEvent('click', {bubbles: true}));
2388 });
2389 expect(el.textContent).toBe('0');
@@ -2378,9 +2393,9 @@ describe('ReactFresh', () => {
2393 });
2394
2395 // This pattern is inspired by useSubscription and similar mechanisms.
2381 - it('does not get into infinite loops during render phase updates', () => {
2396 + it('does not get into infinite loops during render phase updates', async () => {
2397 if (__DEV__) {
2383 - render(() => {
2398 + await render(() => {
2399 function Hello() {
2400 const source = React.useMemo(() => ({value: 10}), []);
2401 const [state, setState] = React.useState({value: null});
@@ -2398,20 +2413,18 @@ describe('ReactFresh', () => {
2413 expect(el.style.color).toBe('blue');
2414
2415 // Perform a hot update.
2401 - act(() => {
2402 - patch(() => {
2403 - function Hello() {
2404 - const source = React.useMemo(() => ({value: 20}), []);
2405 - const [state, setState] = React.useState({value: null});
2406 - if (state !== source) {
2407 - // This should perform a single render-phase update.
2408 - setState(source);
2409 - }
2410 - return <p style={{color: 'red'}}>{state.value}</p>;
2416 + patch(() => {
2417 + function Hello() {
2418 + const source = React.useMemo(() => ({value: 20}), []);
2419 + const [state, setState] = React.useState({value: null});
2420 + if (state !== source) {
2421 + // This should perform a single render-phase update.
2422 + setState(source);
2423 }
2412 - $RefreshReg$(Hello, 'Hello');
2413 - return Hello;
2414 - });
2424 + return <p style={{color: 'red'}}>{state.value}</p>;
2425 + }
2426 + $RefreshReg$(Hello, 'Hello');
2427 + return Hello;
2428 });
2429
2430 expect(container.firstChild).toBe(el);
@@ -2448,7 +2461,6 @@ describe('ReactFresh', () => {
2461 };
2462 });
2463
2451 - const root = ReactDOMClient.createRoot(container);
2464 root.render(<AppV1 offscreen={true} />);
2465 await waitFor(['App#layout']);
2466 const el = container.firstChild;
@@ -2482,7 +2494,7 @@ describe('ReactFresh', () => {
2494 expect(el.firstChild.textContent).toBe('0');
2495 expect(el.firstChild.style.color).toBe('red');
2496
2485 - await internalAct(() => {
2497 + await act(() => {
2498 el.firstChild.dispatchEvent(
2499 new MouseEvent('click', {
2500 bubbles: true,
@@ -2522,9 +2534,9 @@ describe('ReactFresh', () => {
2534 expect(el.firstChild.style.color).toBe('orange');
2535 });
2536
2525 - it('remounts failed error boundaries (componentDidCatch)', () => {
2537 + it('remounts failed error boundaries (componentDidCatch)', async () => {
2538 if (__DEV__) {
2527 - render(() => {
2539 + await render(() => {
2540 function Hello() {
2541 return <h1>Hi</h1>;
2542 }
@@ -2600,9 +2612,9 @@ describe('ReactFresh', () => {
2612 }
2613 });
2614
2603 - it('remounts failed error boundaries (getDerivedStateFromError)', () => {
2615 + it('remounts failed error boundaries (getDerivedStateFromError)', async () => {
2616 if (__DEV__) {
2605 - render(() => {
2617 + await render(() => {
2618 function Hello() {
2619 return <h1>Hi</h1>;
2620 }
@@ -2678,9 +2690,9 @@ describe('ReactFresh', () => {
2690 }
2691 });
2692
2681 - it('remounts error boundaries that failed asynchronously after hot update', () => {
2693 + it('remounts error boundaries that failed asynchronously after hot update', async () => {
2694 if (__DEV__) {
2683 - render(() => {
2695 + await render(() => {
2696 function Hello() {
2697 const [x] = React.useState('');
2698 React.useEffect(() => {}, []);
@@ -2722,26 +2734,25 @@ describe('ReactFresh', () => {
2734 const secondP = firstP.nextSibling.nextSibling;
2735
2736 // Perform a hot update that fails.
2725 - act(() => {
2726 - patch(() => {
2727 - function Hello() {
2728 - const [x, setX] = React.useState('');
2729 - React.useEffect(() => {
2730 - setTimeout(() => {
2731 - setX(42); // This will crash next render.
2732 - }, 1);
2733 - }, []);
2734 - x.slice();
2735 - return <h1>Hi</h1>;
2736 - }
2737 - $RefreshReg$(Hello, 'Hello');
2738 - });
2737 + let crash;
2738 + patch(() => {
2739 + function Hello() {
2740 + const [x, setX] = React.useState('');
2741 + React.useEffect(() => {
2742 + crash = () => {
2743 + setX(42); // This will crash next render.
2744 + };
2745 + }, []);
2746 + x.slice();
2747 + return <h1>Hi</h1>;
2748 + }
2749 + $RefreshReg$(Hello, 'Hello');
2750 });
2751
2752 expect(container.innerHTML).toBe('<p>A</p><h1>Hi</h1><p>B</p>');
2753 // Run timeout inside effect:
2743 - act(() => {
2744 - jest.runAllTimers();
2754 + await act(() => {
2755 + crash();
2756 });
2757 expect(container.innerHTML).toBe(
2758 '<p>A</p><h1>Oops: x.slice is not a function</h1><p>B</p>',
@@ -2750,16 +2761,14 @@ describe('ReactFresh', () => {
2761 expect(container.firstChild.nextSibling.nextSibling).toBe(secondP);
2762
2763 // Perform a hot update that fixes the error.
2753 - act(() => {
2754 - patch(() => {
2755 - function Hello() {
2756 - const [x] = React.useState('');
2757 - React.useEffect(() => {}, []); // Removes the bad effect code.
2758 - x.slice(); // Doesn't throw initially.
2759 - return <h1>Fixed!</h1>;
2760 - }
2761 - $RefreshReg$(Hello, 'Hello');
2762 - });
2764 + patch(() => {
2765 + function Hello() {
2766 + const [x] = React.useState('');
2767 + React.useEffect(() => {}, []); // Removes the bad effect code.
2768 + x.slice(); // Doesn't throw initially.
2769 + return <h1>Fixed!</h1>;
2770 + }
2771 + $RefreshReg$(Hello, 'Hello');
2772 });
2773
2774 // This should remount the error boundary (but not anything above it).
@@ -2769,16 +2778,14 @@ describe('ReactFresh', () => {
2778
2779 // Verify next hot reload doesn't remount anything.
2780 const helloNode = container.firstChild.nextSibling;
2772 - act(() => {
2773 - patch(() => {
2774 - function Hello() {
2775 - const [x] = React.useState('');
2776 - React.useEffect(() => {}, []);
2777 - x.slice();
2778 - return <h1>Nice.</h1>;
2779 - }
2780 - $RefreshReg$(Hello, 'Hello');
2781 - });
2781 + patch(() => {
2782 + function Hello() {
2783 + const [x] = React.useState('');
2784 + React.useEffect(() => {}, []);
2785 + x.slice();
2786 + return <h1>Nice.</h1>;
2787 + }
2788 + $RefreshReg$(Hello, 'Hello');
2789 });
2790
2791 expect(container.firstChild.nextSibling).toBe(helloNode);
@@ -2786,9 +2793,9 @@ describe('ReactFresh', () => {
2793 }
2794 });
2795
2789 - it('remounts a failed root on mount', () => {
2796 + it('remounts a failed root on mount', async () => {
2797 if (__DEV__) {
2791 - expect(() => {
2798 + await expect(
2799 render(() => {
2800 function Hello() {
2801 throw new Error('No');
@@ -2796,8 +2803,8 @@ describe('ReactFresh', () => {
2803 $RefreshReg$(Hello, 'Hello');
2804
2805 return Hello;
2799 - });
2800 - }).toThrow('No');
2806 + }),
2807 + ).rejects.toThrow('No');
2808 expect(container.innerHTML).toBe('');
2809
2810 // A bad retry
@@ -2849,7 +2856,9 @@ describe('ReactFresh', () => {
2856 expect(container.innerHTML).toBe('<h1>Fixed 2!</h1>');
2857
2858 // Updates after intentional unmount are ignored.
2852 - ReactDOM.unmountComponentAtNode(container);
2859 + await act(() => {
2860 + root.unmount();
2861 + });
2862 patch(() => {
2863 function Hello() {
2864 throw new Error('Ignored');
@@ -2867,9 +2876,9 @@ describe('ReactFresh', () => {
2876 }
2877 });
2878
2870 - it('does not retry an intentionally unmounted failed root', () => {
2879 + it('does not retry an intentionally unmounted failed root', async () => {
2880 if (__DEV__) {
2872 - expect(() => {
2881 + await expect(
2882 render(() => {
2883 function Hello() {
2884 throw new Error('No');
@@ -2877,12 +2886,14 @@ describe('ReactFresh', () => {
2886 $RefreshReg$(Hello, 'Hello');
2887
2888 return Hello;
2880 - });
2881 - }).toThrow('No');
2889 + }),
2890 + ).rejects.toThrow('No');
2891 expect(container.innerHTML).toBe('');
2892
2893 // Intentional unmount.
2885 - ReactDOM.unmountComponentAtNode(container);
2894 + await act(() => {
2895 + root.unmount();
2896 + });
2897
2898 // Perform a hot update that fixes the error.
2899 patch(() => {
@@ -2896,9 +2907,9 @@ describe('ReactFresh', () => {
2907 }
2908 });
2909
2899 - it('remounts a failed root on update', () => {
2910 + it('remounts a failed root on update', async () => {
2911 if (__DEV__) {
2901 - render(() => {
2912 + await render(() => {
2913 function Hello() {
2914 return <h1>Hi</h1>;
2915 }
@@ -2974,7 +2985,9 @@ describe('ReactFresh', () => {
2985 expect(container.innerHTML).toBe('<h1>At last.</h1>');
2986
2987 // Check we don't attempt to reverse an intentional unmount.
2977 - ReactDOM.unmountComponentAtNode(container);
2988 + await act(() => {
2989 + root.unmount();
2990 + });
2991 expect(container.innerHTML).toBe('');
2992 patch(() => {
2993 function Hello() {
@@ -2985,7 +2998,8 @@ describe('ReactFresh', () => {
2998 expect(container.innerHTML).toBe('');
2999
3000 // Mount a new container.
2988 - render(() => {
3001 + root = ReactDOMClient.createRoot(container);
3002 + await render(() => {
3003 function Hello() {
3004 return <h1>Hi</h1>;
3005 }
@@ -3007,7 +3021,9 @@ describe('ReactFresh', () => {
3021 expect(container.innerHTML).toBe('');
3022
3023 // Check we don't attempt to reverse an intentional unmount, even after an error.
3010 - ReactDOM.unmountComponentAtNode(container);
3024 + await act(() => {
3025 + root.unmount();
3026 + });
3027 expect(container.innerHTML).toBe('');
3028 patch(() => {
3029 function Hello() {
@@ -3019,10 +3035,12 @@ describe('ReactFresh', () => {
3035 }
3036 });
3037
3022 - it('regression test: does not get into an infinite loop', () => {
3038 + it('regression test: does not get into an infinite loop', async () => {
3039 if (__DEV__) {
3040 const containerA = document.createElement('div');
3041 const containerB = document.createElement('div');
3042 + const rootA = ReactDOMClient.createRoot(containerA);
3043 + const rootB = ReactDOMClient.createRoot(containerB);
3044
3045 // Initially, nothing interesting.
3046 const RootAV1 = () => {
@@ -3034,9 +3052,9 @@ describe('ReactFresh', () => {
3052 };
3053 $RefreshReg$(RootBV1, 'RootB');
3054
3037 - act(() => {
3038 - ReactDOM.render(<RootAV1 />, containerA);
3039 - ReactDOM.render(<RootBV1 />, containerB);
3055 + await act(() => {
3056 + rootA.render(<RootAV1 />);
3057 + rootB.render(<RootBV1 />);
3058 });
3059 expect(containerA.innerHTML).toBe('A1');
3060 expect(containerB.innerHTML).toBe('B1');
@@ -3046,7 +3064,11 @@ describe('ReactFresh', () => {
3064 throw new Error('A2!');
3065 };
3066 $RefreshReg$(RootAV2, 'RootA');
3049 - expect(() => ReactFreshRuntime.performReactRefresh()).toThrow('A2!');
3067 + await expect(
3068 + act(() => {
3069 + ReactFreshRuntime.performReactRefresh();
3070 + }),
3071 + ).rejects.toThrow('A2!');
3072 expect(containerA.innerHTML).toBe('');
3073 expect(containerB.innerHTML).toBe('B1');
3074
@@ -3060,7 +3082,11 @@ describe('ReactFresh', () => {
3082 return 'A3';
3083 };
3084 $RefreshReg$(RootAV3, 'RootA');
3063 - expect(() => ReactFreshRuntime.performReactRefresh()).toThrow('A3!');
3085 + await expect(
3086 + act(() => {
3087 + ReactFreshRuntime.performReactRefresh();
3088 + }),
3089 + ).rejects.toThrow('A3!');
3090 expect(containerA.innerHTML).toBe('');
3091 expect(containerB.innerHTML).toBe('B1');
3092
@@ -3068,15 +3094,17 @@ describe('ReactFresh', () => {
3094 return 'A4';
3095 };
3096 $RefreshReg$(RootAV4, 'RootA');
3071 - ReactFreshRuntime.performReactRefresh();
3097 + await act(() => {
3098 + ReactFreshRuntime.performReactRefresh();
3099 + });
3100 expect(containerA.innerHTML).toBe('A4');
3101 expect(containerB.innerHTML).toBe('B1');
3102 }
3103 });
3104
3077 - it('remounts classes on every edit', () => {
3105 + it('remounts classes on every edit', async () => {
3106 if (__DEV__) {
3079 - const HelloV1 = render(() => {
3107 + const HelloV1 = await render(() => {
3108 class Hello extends React.Component {
3109 state = {count: 0};
3110 handleClick = () => {
@@ -3105,7 +3133,7 @@ describe('ReactFresh', () => {
3133 const el = container.firstChild;
3134 expect(el.textContent).toBe('0');
3135 expect(el.style.color).toBe('blue');
3108 - act(() => {
3136 + await act(() => {
3137 el.dispatchEvent(new MouseEvent('click', {bubbles: true}));
3138 });
3139 expect(el.textContent).toBe('1');
@@ -3136,14 +3164,14 @@ describe('ReactFresh', () => {
3164 const newEl = container.firstChild;
3165 expect(newEl.textContent).toBe('0');
3166 expect(newEl.style.color).toBe('red');
3139 - act(() => {
3167 + await act(() => {
3168 newEl.dispatchEvent(new MouseEvent('click', {bubbles: true}));
3169 });
3170 expect(newEl.textContent).toBe('1');
3171
3172 // Now top-level renders of both types resolve to latest.
3145 - render(() => HelloV1);
3146 - render(() => HelloV2);
3173 + await render(() => HelloV1);
3174 + await render(() => HelloV2);
3175 expect(container.firstChild).toBe(newEl);
3176 expect(newEl.style.color).toBe('red');
3177 expect(newEl.textContent).toBe('1');
@@ -3173,24 +3201,24 @@ describe('ReactFresh', () => {
3201 const finalEl = container.firstChild;
3202 expect(finalEl.textContent).toBe('0');
3203 expect(finalEl.style.color).toBe('orange');
3176 - act(() => {
3204 + await act(() => {
3205 finalEl.dispatchEvent(new MouseEvent('click', {bubbles: true}));
3206 });
3207 expect(finalEl.textContent).toBe('1');
3208
3181 - render(() => HelloV3);
3182 - render(() => HelloV2);
3183 - render(() => HelloV1);
3209 + await render(() => HelloV3);
3210 + await render(() => HelloV2);
3211 + await render(() => HelloV1);
3212 expect(container.firstChild).toBe(finalEl);
3213 expect(finalEl.style.color).toBe('orange');
3214 expect(finalEl.textContent).toBe('1');
3215 }
3216 });
3217
3190 - it('updates refs when remounting', () => {
3218 + it('updates refs when remounting', async () => {
3219 if (__DEV__) {
3220 const testRef = React.createRef();
3193 - render(
3221 + await render(
3222 () => {
3223 class Hello extends React.Component {
3224 getColor() {
@@ -3261,9 +3289,9 @@ describe('ReactFresh', () => {
3289 }
3290 });
3291
3264 - it('remounts on conversion from class to function and back', () => {
3292 + it('remounts on conversion from class to function and back', async () => {
3293 if (__DEV__) {
3266 - const HelloV1 = render(() => {
3294 + const HelloV1 = await render(() => {
3295 function Hello() {
3296 const [val, setVal] = React.useState(0);
3297 return (
@@ -3280,7 +3308,7 @@ describe('ReactFresh', () => {
3308 const el = container.firstChild;
3309 expect(el.textContent).toBe('0');
3310 expect(el.style.color).toBe('blue');
3283 - act(() => {
3311 + await act(() => {
3312 el.dispatchEvent(new MouseEvent('click', {bubbles: true}));
3313 });
3314 expect(el.textContent).toBe('1');
@@ -3311,14 +3339,14 @@ describe('ReactFresh', () => {
3339 const newEl = container.firstChild;
3340 expect(newEl.textContent).toBe('0');
3341 expect(newEl.style.color).toBe('red');
3314 - act(() => {
3342 + await act(() => {
3343 newEl.dispatchEvent(new MouseEvent('click', {bubbles: true}));
3344 });
3345 expect(newEl.textContent).toBe('1');
3346
3347 // Now top-level renders of both types resolve to latest.
3320 - render(() => HelloV1);
3321 - render(() => HelloV2);
3348 + await render(() => HelloV1);
3349 + await render(() => HelloV2);
3350 expect(container.firstChild).toBe(newEl);
3351 expect(newEl.style.color).toBe('red');
3352 expect(newEl.textContent).toBe('1');
@@ -3342,14 +3370,14 @@ describe('ReactFresh', () => {
3370 const finalEl = container.firstChild;
3371 expect(finalEl.textContent).toBe('0');
3372 expect(finalEl.style.color).toBe('orange');
3345 - act(() => {
3373 + await act(() => {
3374 finalEl.dispatchEvent(new MouseEvent('click', {bubbles: true}));
3375 });
3376 expect(finalEl.textContent).toBe('1');
3377
3350 - render(() => HelloV3);
3351 - render(() => HelloV2);
3352 - render(() => HelloV1);
3378 + await render(() => HelloV3);
3379 + await render(() => HelloV2);
3380 + await render(() => HelloV1);
3381 expect(container.firstChild).toBe(finalEl);
3382 expect(finalEl.style.color).toBe('orange');
3383 expect(finalEl.textContent).toBe('1');
@@ -3373,9 +3401,9 @@ describe('ReactFresh', () => {
3401 }
3402 });
3403
3376 - it('can find host instances for a family', () => {
3404 + it('can find host instances for a family', async () => {
3405 if (__DEV__) {
3378 - render(() => {
3406 + await render(() => {
3407 function Child({children}) {
3408 return <div className="Child">{children}</div>;
3409 }
@@ -3481,7 +3509,7 @@ describe('ReactFresh', () => {
3509 });
3510 }
3511
3484 - it('can update multiple roots independently', () => {
3512 + it('can update multiple roots independently', async () => {
3513 if (__DEV__) {
3514 // Declare the first version.
3515 const HelloV1 = () => {
@@ -3504,7 +3532,9 @@ describe('ReactFresh', () => {
3532 );
3533 };
3534 $RefreshReg$(HelloV2, 'Hello');
3507 - ReactFreshRuntime.performReactRefresh();
3535 + await act(() => {
3536 + ReactFreshRuntime.performReactRefresh();
3537 + });
3538
3539 // Mount three roots.
3540 const cont1 = document.createElement('div');
@@ -3513,10 +3543,19 @@ describe('ReactFresh', () => {
3543 document.body.appendChild(cont1);
3544 document.body.appendChild(cont2);
3545 document.body.appendChild(cont3);
3546 + const root1 = ReactDOMClient.createRoot(cont1);
3547 + const root2 = ReactDOMClient.createRoot(cont2);
3548 + const root3 = ReactDOMClient.createRoot(cont3);
3549 try {
3517 - ReactDOM.render(<HelloV1 id={1} />, cont1);
3518 - ReactDOM.render(<HelloV2 id={2} />, cont2);
3519 - ReactDOM.render(<HelloV1 id={3} />, cont3);
3550 + await act(() => {
3551 + root1.render(<HelloV1 id={1} />);
3552 + });
3553 + await act(() => {
3554 + root2.render(<HelloV2 id={2} />);
3555 + });
3556 + await act(() => {
3557 + root3.render(<HelloV1 id={3} />);
3558 + });
3559
3560 // Expect we see the V2 color.
3561 expect(cont1.firstChild.style.color).toBe('red');
@@ -3527,7 +3566,7 @@ describe('ReactFresh', () => {
3566 expect(cont3.firstChild.textContent).toBe('0');
3567
3568 // Bump the state for each of them.
3530 - act(() => {
3569 + await act(() => {
3570 cont1.firstChild.dispatchEvent(
3571 new MouseEvent('click', {bubbles: true}),
3572 );
@@ -3555,7 +3594,9 @@ describe('ReactFresh', () => {
3594 );
3595 };
3596 $RefreshReg$(HelloV3, 'Hello');
3558 - ReactFreshRuntime.performReactRefresh();
3597 + await act(() => {
3598 + ReactFreshRuntime.performReactRefresh();
3599 + });
3600
3601 // It should affect all roots.
3602 expect(cont1.firstChild.style.color).toBe('green');
@@ -3566,7 +3607,9 @@ describe('ReactFresh', () => {
3607 expect(cont3.firstChild.textContent).toBe('1');
3608
3609 // Unmount the second root.
3569 - ReactDOM.unmountComponentAtNode(cont2);
3610 + await act(() => {
3611 + root2.unmount();
3612 + });
3613 // Make the first root throw and unmount on hot update.
3614 const HelloV4 = ({id}) => {
3615 if (id === 1) {
@@ -3580,9 +3623,11 @@ describe('ReactFresh', () => {
3623 );
3624 };
3625 $RefreshReg$(HelloV4, 'Hello');
3583 - expect(() => {
3584 - ReactFreshRuntime.performReactRefresh();
3585 - }).toThrow('Oops.');
3626 + await expect(
3627 + act(() => {
3628 + ReactFreshRuntime.performReactRefresh();
3629 + }),
3630 + ).rejects.toThrow('Oops.');
3631
3632 // Still, we expect the last root to be updated.
3633 expect(cont1.innerHTML).toBe('');
@@ -3791,18 +3836,20 @@ describe('ReactFresh', () => {
3836 jest.resetModules();
3837 React = require('react');
3838 ReactDOM = require('react-dom');
3839 + ReactDOMClient = require('react-dom/client');
3840 Scheduler = require('scheduler');
3795 - act = React.act;
3796 - internalAct = require('internal-test-utils').act;
3841 + act = require('internal-test-utils').act;
3842
3843 // Important! Inject into the global hook *after* ReactDOM runs:
3844 ReactFreshRuntime = require('react-refresh/runtime');
3845 ReactFreshRuntime.injectIntoGlobalHook(global);
3846
3847 + root = ReactDOMClient.createRoot(container);
3848 +
3849 // We're verifying that we're able to track roots mounted after this point.
3850 // The rest of this test is taken from the simplest first test case.
3851
3805 - render(() => {
3852 + await render(() => {
3853 function Hello() {
3854 const [val, setVal] = React.useState(0);
3855 return (
@@ -3819,7 +3866,7 @@ describe('ReactFresh', () => {
3866 const el = container.firstChild;
3867 expect(el.textContent).toBe('0');
3868 expect(el.style.color).toBe('blue');
3822 - act(() => {
3869 + await act(() => {
3870 el.dispatchEvent(new MouseEvent('click', {bubbles: true}));
3871 });
3872 expect(el.textContent).toBe('1');
@@ -3846,7 +3893,7 @@ describe('ReactFresh', () => {
3893 });
3894
3895 // This simulates the scenario in https://github.com/facebook/react/issues/20100
3849 - it('does not block DevTools when an unsupported renderer is injected', () => {
3896 + it('does not block DevTools when an unsupported legacy renderer is injected', () => {
3897 if (__DEV__) {
3898 initFauxDevToolsHook();
3899
@@ -3872,13 +3919,12 @@ describe('ReactFresh', () => {
3919 ReactFreshRuntime = require('react-refresh/runtime');
3920 ReactFreshRuntime.injectIntoGlobalHook(global);
3921
3875 - render(() => {
3876 - function Hello() {
3877 - return <div>Hi!</div>;
3878 - }
3879 - $RefreshReg$(Hello, 'Hello');
3880 - return Hello;
3881 - });
3922 + const Hello = () => {
3923 + return <div>Hi!</div>;
3924 + };
3925 + $RefreshReg$(Hello, 'Hello');
3926 + const Component = Hello;
3927 + ReactDOM.render(<Component />, container);
3928
3929 expect(onCommitFiberRoot).toHaveBeenCalled();
3930 }