@samitouri / QOS-React / commits / c549bc4918

Revert "Use `act()` in ReactFabric tests (#21839)" (#21840)

This reverts commit 59d3aca68638319c88d685ce22cac76a03cfe493.

Timothy Yung committed Jul 8, 2021 at 15:05 UTC c549bc491877b94a44ecc00daa9cf04026a77a6e
1 file changed +188 -274
packages/react-native-renderer/src/__tests__/ReactFabric-test.internal.js
+188 -274
@@ -16,7 +16,6 @@ let createReactNativeComponentClass;
16 let UIManager;
17 let StrictMode;
18 let TextInputState;
19 -let act;
19
20 const SET_NATIVE_PROPS_NOT_SUPPORTED_MESSAGE =
21 'Warning: setNativeProps is not currently supported in Fabric';
@@ -48,9 +47,6 @@ describe('ReactFabric', () => {
47 .ReactNativeViewConfigRegistry.register;
48 TextInputState = require('react-native/Libraries/ReactPrivate/ReactNativePrivateInterface')
49 .TextInputState;
51 -
52 - const ReactTestRenderer = require('react-test-renderer');
53 - act = ReactTestRenderer.act;
50 });
51
52 it('should be able to create and render a native component', () => {
@@ -59,9 +55,7 @@ describe('ReactFabric', () => {
55 uiViewClassName: 'RCTView',
56 }));
57
62 - act(() => {
63 - ReactFabric.render(<View foo="test" />, 1);
64 - });
58 + ReactFabric.render(<View foo="test" />, 1);
59 expect(nativeFabricUIManager.createNode).toBeCalled();
60 expect(nativeFabricUIManager.appendChild).not.toBeCalled();
61 expect(nativeFabricUIManager.completeRoot).toBeCalled();
@@ -77,15 +71,11 @@ describe('ReactFabric', () => {
71
72 nativeFabricUIManager.createNode.mockReturnValue(firstNode);
73
80 - act(() => {
81 - ReactFabric.render(<View foo="foo" />, 11);
82 - });
74 + ReactFabric.render(<View foo="foo" />, 11);
75
76 expect(nativeFabricUIManager.createNode).toHaveBeenCalledTimes(1);
77
86 - act(() => {
87 - ReactFabric.render(<View foo="bar" />, 11);
88 - });
78 + ReactFabric.render(<View foo="bar" />, 11);
79
80 expect(nativeFabricUIManager.createNode).toHaveBeenCalledTimes(1);
81 expect(nativeFabricUIManager.cloneNodeWithNewProps).toHaveBeenCalledTimes(
@@ -107,9 +97,7 @@ describe('ReactFabric', () => {
97 uiViewClassName: 'RCTText',
98 }));
99
110 - act(() => {
111 - ReactFabric.render(<Text foo="a">1</Text>, 11);
112 - });
100 + ReactFabric.render(<Text foo="a">1</Text>, 11);
101 expect(nativeFabricUIManager.cloneNode).not.toBeCalled();
102 expect(nativeFabricUIManager.cloneNodeWithNewChildren).not.toBeCalled();
103 expect(nativeFabricUIManager.cloneNodeWithNewProps).not.toBeCalled();
@@ -118,9 +106,7 @@ describe('ReactFabric', () => {
106 ).not.toBeCalled();
107
108 // If no properties have changed, we shouldn't call cloneNode.
121 - act(() => {
122 - ReactFabric.render(<Text foo="a">1</Text>, 11);
123 - });
109 + ReactFabric.render(<Text foo="a">1</Text>, 11);
110 expect(nativeFabricUIManager.cloneNode).not.toBeCalled();
111 expect(nativeFabricUIManager.cloneNodeWithNewChildren).not.toBeCalled();
112 expect(nativeFabricUIManager.cloneNodeWithNewProps).not.toBeCalled();
@@ -129,9 +115,7 @@ describe('ReactFabric', () => {
115 ).not.toBeCalled();
116
117 // Only call cloneNode for the changed property (and not for text).
132 - act(() => {
133 - ReactFabric.render(<Text foo="b">1</Text>, 11);
134 - });
118 + ReactFabric.render(<Text foo="b">1</Text>, 11);
119 expect(nativeFabricUIManager.cloneNode).not.toBeCalled();
120 expect(nativeFabricUIManager.cloneNodeWithNewChildren).not.toBeCalled();
121 expect(nativeFabricUIManager.cloneNodeWithNewProps).toHaveBeenCalledTimes(
@@ -142,9 +126,7 @@ describe('ReactFabric', () => {
126 ).not.toBeCalled();
127
128 // Only call cloneNode for the changed text (and no other properties).
145 - act(() => {
146 - ReactFabric.render(<Text foo="b">2</Text>, 11);
147 - });
129 + ReactFabric.render(<Text foo="b">2</Text>, 11);
130 expect(nativeFabricUIManager.cloneNode).not.toBeCalled();
131 expect(
132 nativeFabricUIManager.cloneNodeWithNewChildren,
@@ -157,9 +139,7 @@ describe('ReactFabric', () => {
139 ).not.toBeCalled();
140
141 // Call cloneNode for both changed text and properties.
160 - act(() => {
161 - ReactFabric.render(<Text foo="c">3</Text>, 11);
162 - });
142 + ReactFabric.render(<Text foo="c">3</Text>, 11);
143 expect(nativeFabricUIManager.cloneNode).not.toBeCalled();
144 expect(
145 nativeFabricUIManager.cloneNodeWithNewChildren,
@@ -178,14 +158,12 @@ describe('ReactFabric', () => {
158 uiViewClassName: 'RCTText',
159 }));
160
181 - act(() => {
182 - ReactFabric.render(
183 - <Text foo="a" bar="a">
184 - 1
185 - </Text>,
186 - 11,
187 - );
188 - });
161 + ReactFabric.render(
162 + <Text foo="a" bar="a">
163 + 1
164 + </Text>,
165 + 11,
166 + );
167 expect(nativeFabricUIManager.cloneNode).not.toBeCalled();
168 expect(nativeFabricUIManager.cloneNodeWithNewChildren).not.toBeCalled();
169 expect(nativeFabricUIManager.cloneNodeWithNewProps).not.toBeCalled();
@@ -193,14 +171,12 @@ describe('ReactFabric', () => {
171 nativeFabricUIManager.cloneNodeWithNewChildrenAndProps,
172 ).not.toBeCalled();
173
196 - act(() => {
197 - ReactFabric.render(
198 - <Text foo="a" bar="b">
199 - 1
200 - </Text>,
201 - 11,
202 - );
203 - });
174 + ReactFabric.render(
175 + <Text foo="a" bar="b">
176 + 1
177 + </Text>,
178 + 11,
179 + );
180 expect(
181 nativeFabricUIManager.cloneNodeWithNewProps.mock.calls[0][1],
182 ).toEqual({
@@ -210,14 +186,12 @@ describe('ReactFabric', () => {
186 nativeFabricUIManager.__dumpHierarchyForJestTestsOnly(),
187 ).toMatchSnapshot();
188
213 - act(() => {
214 - ReactFabric.render(
215 - <Text foo="b" bar="b">
216 - 2
217 - </Text>,
218 - 11,
219 - );
220 - });
189 + ReactFabric.render(
190 + <Text foo="b" bar="b">
191 + 2
192 + </Text>,
193 + 11,
194 + );
195 expect(
196 nativeFabricUIManager.cloneNodeWithNewChildrenAndProps.mock.calls[0][1],
197 ).toEqual({
@@ -237,17 +211,15 @@ describe('ReactFabric', () => {
211 UIManager.updateView.mockReset();
212
213 let viewRef;
240 - act(() => {
241 - ReactFabric.render(
242 - <View
243 - foo="bar"
244 - ref={ref => {
245 - viewRef = ref;
246 - }}
247 - />,
248 - 11,
249 - );
250 - });
214 + ReactFabric.render(
215 + <View
216 + foo="bar"
217 + ref={ref => {
218 + viewRef = ref;
219 + }}
220 + />,
221 + 11,
222 + );
223 expect(UIManager.updateView).not.toBeCalled();
224
225 expect(() => {
@@ -275,16 +247,14 @@ describe('ReactFabric', () => {
247 nativeFabricUIManager.dispatchCommand.mockClear();
248
249 let viewRef;
278 - act(() => {
279 - ReactFabric.render(
280 - <View
281 - ref={ref => {
282 - viewRef = ref;
283 - }}
284 - />,
285 - 11,
286 - );
287 - });
250 + ReactFabric.render(
251 + <View
252 + ref={ref => {
253 + viewRef = ref;
254 + }}
255 + />,
256 + 11,
257 + );
258
259 expect(nativeFabricUIManager.dispatchCommand).not.toBeCalled();
260 ReactFabric.dispatchCommand(viewRef, 'updateCommand', [10, 20]);
@@ -304,16 +274,14 @@ describe('ReactFabric', () => {
274 nativeFabricUIManager.dispatchCommand.mockReset();
275
276 let viewRef;
307 - act(() => {
308 - ReactFabric.render(
309 - <BasicClass
310 - ref={ref => {
311 - viewRef = ref;
312 - }}
313 - />,
314 - 11,
315 - );
316 - });
277 + ReactFabric.render(
278 + <BasicClass
279 + ref={ref => {
280 + viewRef = ref;
281 + }}
282 + />,
283 + 11,
284 + );
285
286 expect(nativeFabricUIManager.dispatchCommand).not.toBeCalled();
287 expect(() => {
@@ -334,16 +302,14 @@ describe('ReactFabric', () => {
302 nativeFabricUIManager.sendAccessibilityEvent.mockClear();
303
304 let viewRef;
337 - act(() => {
338 - ReactFabric.render(
339 - <View
340 - ref={ref => {
341 - viewRef = ref;
342 - }}
343 - />,
344 - 11,
345 - );
346 - });
305 + ReactFabric.render(
306 + <View
307 + ref={ref => {
308 + viewRef = ref;
309 + }}
310 + />,
311 + 11,
312 + );
313
314 expect(nativeFabricUIManager.sendAccessibilityEvent).not.toBeCalled();
315 ReactFabric.sendAccessibilityEvent(viewRef, 'focus');
@@ -366,16 +332,14 @@ describe('ReactFabric', () => {
332 nativeFabricUIManager.sendAccessibilityEvent.mockReset();
333
334 let viewRef;
369 - act(() => {
370 - ReactFabric.render(
371 - <BasicClass
372 - ref={ref => {
373 - viewRef = ref;
374 - }}
375 - />,
376 - 11,
377 - );
378 - });
335 + ReactFabric.render(
336 + <BasicClass
337 + ref={ref => {
338 + viewRef = ref;
339 + }}
340 + />,
341 + 11,
342 + );
343
344 expect(nativeFabricUIManager.sendAccessibilityEvent).not.toBeCalled();
345 expect(() => {
@@ -396,16 +360,14 @@ describe('ReactFabric', () => {
360 nativeFabricUIManager.measure.mockClear();
361
362 let viewRef;
399 - act(() => {
400 - ReactFabric.render(
401 - <View
402 - ref={ref => {
403 - viewRef = ref;
404 - }}
405 - />,
406 - 11,
407 - );
408 - });
363 + ReactFabric.render(
364 + <View
365 + ref={ref => {
366 + viewRef = ref;
367 + }}
368 + />,
369 + 11,
370 + );
371
372 expect(nativeFabricUIManager.measure).not.toBeCalled();
373 const successCallback = jest.fn();
@@ -424,16 +386,14 @@ describe('ReactFabric', () => {
386 nativeFabricUIManager.measureInWindow.mockClear();
387
388 let viewRef;
427 - act(() => {
428 - ReactFabric.render(
429 - <View
430 - ref={ref => {
431 - viewRef = ref;
432 - }}
433 - />,
434 - 11,
435 - );
436 - });
389 + ReactFabric.render(
390 + <View
391 + ref={ref => {
392 + viewRef = ref;
393 + }}
394 + />,
395 + 11,
396 + );
397
398 expect(nativeFabricUIManager.measureInWindow).not.toBeCalled();
399 const successCallback = jest.fn();
@@ -453,24 +413,22 @@ describe('ReactFabric', () => {
413
414 let viewRef;
415 let otherRef;
456 - act(() => {
457 - ReactFabric.render(
458 - <View>
459 - <View
460 - foo="bar"
461 - ref={ref => {
462 - viewRef = ref;
463 - }}
464 - />
465 - <View
466 - ref={ref => {
467 - otherRef = ref;
468 - }}
469 - />
470 - </View>,
471 - 11,
472 - );
473 - });
416 + ReactFabric.render(
417 + <View>
418 + <View
419 + foo="bar"
420 + ref={ref => {
421 + viewRef = ref;
422 + }}
423 + />
424 + <View
425 + ref={ref => {
426 + otherRef = ref;
427 + }}
428 + />
429 + </View>,
430 + 11,
431 + );
432
433 expect(nativeFabricUIManager.measureLayout).not.toBeCalled();
434 const successCallback = jest.fn();
@@ -525,16 +483,12 @@ describe('ReactFabric', () => {
483 const before = 'abcdefghijklmnopqrst';
484 const after = 'mxhpgwfralkeoivcstzy';
485
528 - act(() => {
529 - ReactFabric.render(<Component chars={before} />, 11);
530 - });
486 + ReactFabric.render(<Component chars={before} />, 11);
487 expect(
488 nativeFabricUIManager.__dumpHierarchyForJestTestsOnly(),
489 ).toMatchSnapshot();
490
535 - act(() => {
536 - ReactFabric.render(<Component chars={after} />, 11);
537 - });
491 + ReactFabric.render(<Component chars={after} />, 11);
492 expect(
493 nativeFabricUIManager.__dumpHierarchyForJestTestsOnly(),
494 ).toMatchSnapshot();
@@ -567,14 +521,12 @@ describe('ReactFabric', () => {
521
522 const ref = React.createRef();
523 // Wrap in a host node.
570 - act(() => {
571 - ReactFabric.render(
572 - <View>
573 - <Component ref={ref} />
574 - </View>,
575 - 11,
576 - );
577 - });
524 + ReactFabric.render(
525 + <View>
526 + <Component ref={ref} />
527 + </View>,
528 + 11,
529 + );
530 expect(
531 nativeFabricUIManager.__dumpHierarchyForJestTestsOnly(),
532 ).toMatchSnapshot();
@@ -600,9 +552,7 @@ describe('ReactFabric', () => {
552 }
553 }
554
603 - act(() => {
604 - ReactFabric.render(<Component />, 11);
605 - });
555 + ReactFabric.render(<Component />, 11);
556 expect(mockArgs.length).toEqual(0);
557 });
558
@@ -622,14 +572,12 @@ describe('ReactFabric', () => {
572 );
573 });
574
625 - act(() => {
626 - ReactFabric.render(
627 - <View foo="a">
628 - <View foo="b" />
629 - </View>,
630 - 22,
631 - );
632 - });
575 + ReactFabric.render(
576 + <View foo="a">
577 + <View foo="b" />
578 + </View>,
579 + 22,
580 + );
581 expect(snapshots).toMatchSnapshot();
582 });
583
@@ -647,23 +595,19 @@ describe('ReactFabric', () => {
595 uiViewClassName: 'RCTView',
596 }));
597
650 - act(() => {
651 - ReactFabric.render(
652 - <Text>
653 - <View />
654 - </Text>,
655 - 11,
656 - );
657 - });
598 + ReactFabric.render(
599 + <Text>
600 + <View />
601 + </Text>,
602 + 11,
603 + );
604
659 - act(() => {
660 - ReactFabric.render(
661 - <Text>
662 - <Image />
663 - </Text>,
664 - 11,
665 - );
666 - });
605 + ReactFabric.render(
606 + <Text>
607 + <Image />
608 + </Text>,
609 + 11,
610 + );
611 });
612
613 it('should throw for text not inside of a <Text> ancestor', () => {
@@ -680,22 +624,18 @@ describe('ReactFabric', () => {
624 uiViewClassName: 'RCTView',
625 }));
626
683 - expect(() => {
684 - act(() => {
685 - ReactFabric.render(<View>this should warn</View>, 11);
686 - });
687 - }).toThrow('Text strings must be rendered within a <Text> component.');
627 + expect(() => ReactFabric.render(<View>this should warn</View>, 11)).toThrow(
628 + 'Text strings must be rendered within a <Text> component.',
629 + );
630
689 - expect(() => {
690 - act(() => {
691 - ReactFabric.render(
692 - <Text>
693 - <ScrollView>hi hello hi</ScrollView>
694 - </Text>,
695 - 11,
696 - );
697 - });
698 - }).toThrow('Text strings must be rendered within a <Text> component.');
631 + expect(() =>
632 + ReactFabric.render(
633 + <Text>
634 + <ScrollView>hi hello hi</ScrollView>
635 + </Text>,
636 + 11,
637 + ),
638 + ).toThrow('Text strings must be rendered within a <Text> component.');
639 });
640
641 it('should not throw for text inside of an indirect <Text> ancestor', () => {
@@ -706,14 +646,12 @@ describe('ReactFabric', () => {
646
647 const Indirection = () => 'Hi';
648
709 - act(() => {
710 - ReactFabric.render(
711 - <Text>
712 - <Indirection />
713 - </Text>,
714 - 11,
715 - );
716 - });
649 + ReactFabric.render(
650 + <Text>
651 + <Indirection />
652 + </Text>,
653 + 11,
654 + );
655 });
656
657 it('dispatches events to the last committed props', () => {
@@ -730,9 +668,7 @@ describe('ReactFabric', () => {
668 const touchStart = jest.fn();
669 const touchStart2 = jest.fn();
670
733 - act(() => {
734 - ReactFabric.render(<View onTouchStart={touchStart} />, 11);
735 - });
671 + ReactFabric.render(<View onTouchStart={touchStart} />, 11);
672
673 expect(nativeFabricUIManager.createNode.mock.calls.length).toBe(1);
674 expect(nativeFabricUIManager.registerEventHandler.mock.calls.length).toBe(
@@ -762,9 +698,7 @@ describe('ReactFabric', () => {
698 expect(touchStart).toBeCalled();
699 expect(touchStart2).not.toBeCalled();
700
765 - act(() => {
766 - ReactFabric.render(<View onTouchStart={touchStart2} />, 11);
767 - });
701 + ReactFabric.render(<View onTouchStart={touchStart2} />, 11);
702
703 // Intentionally dispatch to the same instanceHandle again.
704 dispatchEvent(instanceHandle, 'topTouchStart', touchEvent);
@@ -808,35 +742,33 @@ describe('ReactFabric', () => {
742 const ref1 = React.createRef();
743 const ref2 = React.createRef();
744
811 - act(() => {
812 - ReactFabric.render(
813 - <View id="parent">
814 - <View
815 - ref={ref1}
816 - id="one"
817 - onResponderStart={event => {
818 - expect(ref1.current).not.toBeNull();
819 - // Check for referential equality
820 - expect(ref1.current).toBe(event.target);
821 - expect(ref1.current).toBe(event.currentTarget);
822 - }}
823 - onStartShouldSetResponder={() => true}
824 - />
825 - <View
826 - ref={ref2}
827 - id="two"
828 - onResponderStart={event => {
829 - expect(ref2.current).not.toBeNull();
830 - // Check for referential equality
831 - expect(ref2.current).toBe(event.target);
832 - expect(ref2.current).toBe(event.currentTarget);
833 - }}
834 - onStartShouldSetResponder={() => true}
835 - />
836 - </View>,
837 - 1,
838 - );
839 - });
745 + ReactFabric.render(
746 + <View id="parent">
747 + <View
748 + ref={ref1}
749 + id="one"
750 + onResponderStart={event => {
751 + expect(ref1.current).not.toBeNull();
752 + // Check for referential equality
753 + expect(ref1.current).toBe(event.target);
754 + expect(ref1.current).toBe(event.currentTarget);
755 + }}
756 + onStartShouldSetResponder={() => true}
757 + />
758 + <View
759 + ref={ref2}
760 + id="two"
761 + onResponderStart={event => {
762 + expect(ref2.current).not.toBeNull();
763 + // Check for referential equality
764 + expect(ref2.current).toBe(event.target);
765 + expect(ref2.current).toBe(event.currentTarget);
766 + }}
767 + onStartShouldSetResponder={() => true}
768 + />
769 + </View>,
770 + 1,
771 + );
772
773 const [
774 dispatchEvent,
@@ -891,12 +823,7 @@ describe('ReactFabric', () => {
823 }
824 }
825
894 - act(() => {
895 - ReactFabric.render(
896 - <ContainsStrictModeChild ref={n => (parent = n)} />,
897 - 11,
898 - );
899 - });
826 + ReactFabric.render(<ContainsStrictModeChild ref={n => (parent = n)} />, 11);
827
828 let match;
829 expect(
@@ -928,14 +855,12 @@ describe('ReactFabric', () => {
855 }
856 }
857
931 - act(() => {
932 - ReactFabric.render(
933 - <StrictMode>
934 - <IsInStrictMode ref={n => (parent = n)} />
935 - </StrictMode>,
936 - 11,
937 - );
938 - });
858 + ReactFabric.render(
859 + <StrictMode>
860 + <IsInStrictMode ref={n => (parent = n)} />
861 + </StrictMode>,
862 + 11,
863 + );
864
865 let match;
866 expect(
@@ -971,12 +896,7 @@ describe('ReactFabric', () => {
896 }
897 }
898
974 - act(() => {
975 - ReactFabric.render(
976 - <ContainsStrictModeChild ref={n => (parent = n)} />,
977 - 11,
978 - );
979 - });
899 + ReactFabric.render(<ContainsStrictModeChild ref={n => (parent = n)} />, 11);
900
901 let match;
902 expect(() => (match = ReactFabric.findNodeHandle(parent))).toErrorDev([
@@ -1006,14 +926,12 @@ describe('ReactFabric', () => {
926 }
927 }
928
1009 - act(() => {
1010 - ReactFabric.render(
1011 - <StrictMode>
1012 - <IsInStrictMode ref={n => (parent = n)} />
1013 - </StrictMode>,
1014 - 11,
1015 - );
1016 - });
929 + ReactFabric.render(
930 + <StrictMode>
931 + <IsInStrictMode ref={n => (parent = n)} />
932 + </StrictMode>,
933 + 11,
934 + );
935
936 let match;
937 expect(() => (match = ReactFabric.findNodeHandle(parent))).toErrorDev([
@@ -1035,9 +953,7 @@ describe('ReactFabric', () => {
953 }));
954
955 const viewRef = React.createRef();
1038 - act(() => {
1039 - ReactFabric.render(<View ref={viewRef} />, 11);
1040 - });
956 + ReactFabric.render(<View ref={viewRef} />, 11);
957
958 expect(TextInputState.blurTextInput).not.toBeCalled();
959
@@ -1054,9 +970,7 @@ describe('ReactFabric', () => {
970 }));
971
972 const viewRef = React.createRef();
1057 - act(() => {
1058 - ReactFabric.render(<View ref={viewRef} />, 11);
1059 - });
973 + ReactFabric.render(<View ref={viewRef} />, 11);
974
975 expect(TextInputState.focusTextInput).not.toBeCalled();
976