{"commit":{"authorEmail":"git@andrewclark.io","shortRevision":"f85f429d55","authoredAt":"2021-07-08T22:35:46-04:00","revision":"f85f429d55f3f13bd741b4e4a06e3fcc54f2330c","authorName":"Andrew Clark","subject":"Use `act()` in ReactFabric tests (#21839) (#21841)"},"files":[{"path":"packages\/react-native-renderer\/src\/__tests__\/ReactFabric-test.internal.js","status":"M"}],"parents":["84639ab53fcb83c5d4806b5d791bb07992c40bf1"],"patch":"diff --git a\/packages\/react-native-renderer\/src\/__tests__\/ReactFabric-test.internal.js b\/packages\/react-native-renderer\/src\/__tests__\/ReactFabric-test.internal.js\nindex a935da5e4d..4c5bea872b 100644\n--- a\/packages\/react-native-renderer\/src\/__tests__\/ReactFabric-test.internal.js\n+++ b\/packages\/react-native-renderer\/src\/__tests__\/ReactFabric-test.internal.js\n@@ -16,6 +16,7 @@ let createReactNativeComponentClass;\n let UIManager;\n let StrictMode;\n let TextInputState;\n+let act;\n \n const SET_NATIVE_PROPS_NOT_SUPPORTED_MESSAGE =\n 'Warning: setNativeProps is not currently supported in Fabric';\n@@ -47,6 +48,8 @@ describe('ReactFabric', () => {\n .ReactNativeViewConfigRegistry.register;\n TextInputState = require('react-native\/Libraries\/ReactPrivate\/ReactNativePrivateInterface')\n .TextInputState;\n+\n+ act = require('jest-react').act;\n });\n \n it('should be able to create and render a native component', () => {\n@@ -55,7 +58,9 @@ describe('ReactFabric', () => {\n uiViewClassName: 'RCTView',\n }));\n \n- ReactFabric.render(, 1);\n+ act(() => {\n+ ReactFabric.render(, 1);\n+ });\n expect(nativeFabricUIManager.createNode).toBeCalled();\n expect(nativeFabricUIManager.appendChild).not.toBeCalled();\n expect(nativeFabricUIManager.completeRoot).toBeCalled();\n@@ -71,11 +76,15 @@ describe('ReactFabric', () => {\n \n nativeFabricUIManager.createNode.mockReturnValue(firstNode);\n \n- ReactFabric.render(, 11);\n+ act(() => {\n+ ReactFabric.render(, 11);\n+ });\n \n expect(nativeFabricUIManager.createNode).toHaveBeenCalledTimes(1);\n \n- ReactFabric.render(, 11);\n+ act(() => {\n+ ReactFabric.render(, 11);\n+ });\n \n expect(nativeFabricUIManager.createNode).toHaveBeenCalledTimes(1);\n expect(nativeFabricUIManager.cloneNodeWithNewProps).toHaveBeenCalledTimes(\n@@ -97,7 +106,9 @@ describe('ReactFabric', () => {\n uiViewClassName: 'RCTText',\n }));\n \n- ReactFabric.render(1<\/Text>, 11);\n+ act(() => {\n+ ReactFabric.render(1<\/Text>, 11);\n+ });\n expect(nativeFabricUIManager.cloneNode).not.toBeCalled();\n expect(nativeFabricUIManager.cloneNodeWithNewChildren).not.toBeCalled();\n expect(nativeFabricUIManager.cloneNodeWithNewProps).not.toBeCalled();\n@@ -106,7 +117,9 @@ describe('ReactFabric', () => {\n ).not.toBeCalled();\n \n \/\/ If no properties have changed, we shouldn't call cloneNode.\n- ReactFabric.render(1<\/Text>, 11);\n+ act(() => {\n+ ReactFabric.render(1<\/Text>, 11);\n+ });\n expect(nativeFabricUIManager.cloneNode).not.toBeCalled();\n expect(nativeFabricUIManager.cloneNodeWithNewChildren).not.toBeCalled();\n expect(nativeFabricUIManager.cloneNodeWithNewProps).not.toBeCalled();\n@@ -115,7 +128,9 @@ describe('ReactFabric', () => {\n ).not.toBeCalled();\n \n \/\/ Only call cloneNode for the changed property (and not for text).\n- ReactFabric.render(1<\/Text>, 11);\n+ act(() => {\n+ ReactFabric.render(1<\/Text>, 11);\n+ });\n expect(nativeFabricUIManager.cloneNode).not.toBeCalled();\n expect(nativeFabricUIManager.cloneNodeWithNewChildren).not.toBeCalled();\n expect(nativeFabricUIManager.cloneNodeWithNewProps).toHaveBeenCalledTimes(\n@@ -126,7 +141,9 @@ describe('ReactFabric', () => {\n ).not.toBeCalled();\n \n \/\/ Only call cloneNode for the changed text (and no other properties).\n- ReactFabric.render(2<\/Text>, 11);\n+ act(() => {\n+ ReactFabric.render(2<\/Text>, 11);\n+ });\n expect(nativeFabricUIManager.cloneNode).not.toBeCalled();\n expect(\n nativeFabricUIManager.cloneNodeWithNewChildren,\n@@ -139,7 +156,9 @@ describe('ReactFabric', () => {\n ).not.toBeCalled();\n \n \/\/ Call cloneNode for both changed text and properties.\n- ReactFabric.render(3<\/Text>, 11);\n+ act(() => {\n+ ReactFabric.render(3<\/Text>, 11);\n+ });\n expect(nativeFabricUIManager.cloneNode).not.toBeCalled();\n expect(\n nativeFabricUIManager.cloneNodeWithNewChildren,\n@@ -158,12 +177,14 @@ describe('ReactFabric', () => {\n uiViewClassName: 'RCTText',\n }));\n \n- ReactFabric.render(\n- \n- 1\n- <\/Text>,\n- 11,\n- );\n+ act(() => {\n+ ReactFabric.render(\n+ \n+ 1\n+ <\/Text>,\n+ 11,\n+ );\n+ });\n expect(nativeFabricUIManager.cloneNode).not.toBeCalled();\n expect(nativeFabricUIManager.cloneNodeWithNewChildren).not.toBeCalled();\n expect(nativeFabricUIManager.cloneNodeWithNewProps).not.toBeCalled();\n@@ -171,12 +192,14 @@ describe('ReactFabric', () => {\n nativeFabricUIManager.cloneNodeWithNewChildrenAndProps,\n ).not.toBeCalled();\n \n- ReactFabric.render(\n- \n- 1\n- <\/Text>,\n- 11,\n- );\n+ act(() => {\n+ ReactFabric.render(\n+ \n+ 1\n+ <\/Text>,\n+ 11,\n+ );\n+ });\n expect(\n nativeFabricUIManager.cloneNodeWithNewProps.mock.calls[0][1],\n ).toEqual({\n@@ -186,12 +209,14 @@ describe('ReactFabric', () => {\n nativeFabricUIManager.__dumpHierarchyForJestTestsOnly(),\n ).toMatchSnapshot();\n \n- ReactFabric.render(\n- \n- 2\n- <\/Text>,\n- 11,\n- );\n+ act(() => {\n+ ReactFabric.render(\n+ \n+ 2\n+ <\/Text>,\n+ 11,\n+ );\n+ });\n expect(\n nativeFabricUIManager.cloneNodeWithNewChildrenAndProps.mock.calls[0][1],\n ).toEqual({\n@@ -211,15 +236,17 @@ describe('ReactFabric', () => {\n UIManager.updateView.mockReset();\n \n let viewRef;\n- ReactFabric.render(\n- {\n- viewRef = ref;\n- }}\n- \/>,\n- 11,\n- );\n+ act(() => {\n+ ReactFabric.render(\n+ {\n+ viewRef = ref;\n+ }}\n+ \/>,\n+ 11,\n+ );\n+ });\n expect(UIManager.updateView).not.toBeCalled();\n \n expect(() => {\n@@ -247,14 +274,16 @@ describe('ReactFabric', () => {\n nativeFabricUIManager.dispatchCommand.mockClear();\n \n let viewRef;\n- ReactFabric.render(\n- {\n- viewRef = ref;\n- }}\n- \/>,\n- 11,\n- );\n+ act(() => {\n+ ReactFabric.render(\n+ {\n+ viewRef = ref;\n+ }}\n+ \/>,\n+ 11,\n+ );\n+ });\n \n expect(nativeFabricUIManager.dispatchCommand).not.toBeCalled();\n ReactFabric.dispatchCommand(viewRef, 'updateCommand', [10, 20]);\n@@ -274,14 +303,16 @@ describe('ReactFabric', () => {\n nativeFabricUIManager.dispatchCommand.mockReset();\n \n let viewRef;\n- ReactFabric.render(\n- {\n- viewRef = ref;\n- }}\n- \/>,\n- 11,\n- );\n+ act(() => {\n+ ReactFabric.render(\n+ {\n+ viewRef = ref;\n+ }}\n+ \/>,\n+ 11,\n+ );\n+ });\n \n expect(nativeFabricUIManager.dispatchCommand).not.toBeCalled();\n expect(() => {\n@@ -302,14 +333,16 @@ describe('ReactFabric', () => {\n nativeFabricUIManager.sendAccessibilityEvent.mockClear();\n \n let viewRef;\n- ReactFabric.render(\n- {\n- viewRef = ref;\n- }}\n- \/>,\n- 11,\n- );\n+ act(() => {\n+ ReactFabric.render(\n+ {\n+ viewRef = ref;\n+ }}\n+ \/>,\n+ 11,\n+ );\n+ });\n \n expect(nativeFabricUIManager.sendAccessibilityEvent).not.toBeCalled();\n ReactFabric.sendAccessibilityEvent(viewRef, 'focus');\n@@ -332,14 +365,16 @@ describe('ReactFabric', () => {\n nativeFabricUIManager.sendAccessibilityEvent.mockReset();\n \n let viewRef;\n- ReactFabric.render(\n- {\n- viewRef = ref;\n- }}\n- \/>,\n- 11,\n- );\n+ act(() => {\n+ ReactFabric.render(\n+ {\n+ viewRef = ref;\n+ }}\n+ \/>,\n+ 11,\n+ );\n+ });\n \n expect(nativeFabricUIManager.sendAccessibilityEvent).not.toBeCalled();\n expect(() => {\n@@ -360,14 +395,16 @@ describe('ReactFabric', () => {\n nativeFabricUIManager.measure.mockClear();\n \n let viewRef;\n- ReactFabric.render(\n- {\n- viewRef = ref;\n- }}\n- \/>,\n- 11,\n- );\n+ act(() => {\n+ ReactFabric.render(\n+ {\n+ viewRef = ref;\n+ }}\n+ \/>,\n+ 11,\n+ );\n+ });\n \n expect(nativeFabricUIManager.measure).not.toBeCalled();\n const successCallback = jest.fn();\n@@ -386,14 +423,16 @@ describe('ReactFabric', () => {\n nativeFabricUIManager.measureInWindow.mockClear();\n \n let viewRef;\n- ReactFabric.render(\n- {\n- viewRef = ref;\n- }}\n- \/>,\n- 11,\n- );\n+ act(() => {\n+ ReactFabric.render(\n+ {\n+ viewRef = ref;\n+ }}\n+ \/>,\n+ 11,\n+ );\n+ });\n \n expect(nativeFabricUIManager.measureInWindow).not.toBeCalled();\n const successCallback = jest.fn();\n@@ -413,22 +452,24 @@ describe('ReactFabric', () => {\n \n let viewRef;\n let otherRef;\n- ReactFabric.render(\n- \n- {\n- viewRef = ref;\n- }}\n- \/>\n- {\n- otherRef = ref;\n- }}\n- \/>\n- <\/View>,\n- 11,\n- );\n+ act(() => {\n+ ReactFabric.render(\n+ \n+ {\n+ viewRef = ref;\n+ }}\n+ \/>\n+ {\n+ otherRef = ref;\n+ }}\n+ \/>\n+ <\/View>,\n+ 11,\n+ );\n+ });\n \n expect(nativeFabricUIManager.measureLayout).not.toBeCalled();\n const successCallback = jest.fn();\n@@ -483,12 +524,16 @@ describe('ReactFabric', () => {\n const before = 'abcdefghijklmnopqrst';\n const after = 'mxhpgwfralkeoivcstzy';\n \n- ReactFabric.render(, 11);\n+ act(() => {\n+ ReactFabric.render(, 11);\n+ });\n expect(\n nativeFabricUIManager.__dumpHierarchyForJestTestsOnly(),\n ).toMatchSnapshot();\n \n- ReactFabric.render(, 11);\n+ act(() => {\n+ ReactFabric.render(, 11);\n+ });\n expect(\n nativeFabricUIManager.__dumpHierarchyForJestTestsOnly(),\n ).toMatchSnapshot();\n@@ -521,12 +566,14 @@ describe('ReactFabric', () => {\n \n const ref = React.createRef();\n \/\/ Wrap in a host node.\n- ReactFabric.render(\n- \n- \n- <\/View>,\n- 11,\n- );\n+ act(() => {\n+ ReactFabric.render(\n+ \n+ \n+ <\/View>,\n+ 11,\n+ );\n+ });\n expect(\n nativeFabricUIManager.__dumpHierarchyForJestTestsOnly(),\n ).toMatchSnapshot();\n@@ -552,7 +599,9 @@ describe('ReactFabric', () => {\n }\n }\n \n- ReactFabric.render(, 11);\n+ act(() => {\n+ ReactFabric.render(, 11);\n+ });\n expect(mockArgs.length).toEqual(0);\n });\n \n@@ -572,12 +621,14 @@ describe('ReactFabric', () => {\n );\n });\n \n- ReactFabric.render(\n- \n- \n- <\/View>,\n- 22,\n- );\n+ act(() => {\n+ ReactFabric.render(\n+ \n+ \n+ <\/View>,\n+ 22,\n+ );\n+ });\n expect(snapshots).toMatchSnapshot();\n });\n \n@@ -595,19 +646,23 @@ describe('ReactFabric', () => {\n uiViewClassName: 'RCTView',\n }));\n \n- ReactFabric.render(\n- \n- \n- <\/Text>,\n- 11,\n- );\n+ act(() => {\n+ ReactFabric.render(\n+ \n+ \n+ <\/Text>,\n+ 11,\n+ );\n+ });\n \n- ReactFabric.render(\n- \n- \n- <\/Text>,\n- 11,\n- );\n+ act(() => {\n+ ReactFabric.render(\n+ \n+ \n+ <\/Text>,\n+ 11,\n+ );\n+ });\n });\n \n it('should throw for text not inside of a ancestor', () => {\n@@ -624,18 +679,22 @@ describe('ReactFabric', () => {\n uiViewClassName: 'RCTView',\n }));\n \n- expect(() => ReactFabric.render(this should warn<\/View>, 11)).toThrow(\n- 'Text strings must be rendered within a component.',\n- );\n+ expect(() => {\n+ act(() => {\n+ ReactFabric.render(this should warn<\/View>, 11);\n+ });\n+ }).toThrow('Text strings must be rendered within a component.');\n \n- expect(() =>\n- ReactFabric.render(\n- \n- hi hello hi<\/ScrollView>\n- <\/Text>,\n- 11,\n- ),\n- ).toThrow('Text strings must be rendered within a component.');\n+ expect(() => {\n+ act(() => {\n+ ReactFabric.render(\n+ \n+ hi hello hi<\/ScrollView>\n+ <\/Text>,\n+ 11,\n+ );\n+ });\n+ }).toThrow('Text strings must be rendered within a component.');\n });\n \n it('should not throw for text inside of an indirect ancestor', () => {\n@@ -646,12 +705,14 @@ describe('ReactFabric', () => {\n \n const Indirection = () => 'Hi';\n \n- ReactFabric.render(\n- \n- \n- <\/Text>,\n- 11,\n- );\n+ act(() => {\n+ ReactFabric.render(\n+ \n+ \n+ <\/Text>,\n+ 11,\n+ );\n+ });\n });\n \n it('dispatches events to the last committed props', () => {\n@@ -668,7 +729,9 @@ describe('ReactFabric', () => {\n const touchStart = jest.fn();\n const touchStart2 = jest.fn();\n \n- ReactFabric.render(, 11);\n+ act(() => {\n+ ReactFabric.render(, 11);\n+ });\n \n expect(nativeFabricUIManager.createNode.mock.calls.length).toBe(1);\n expect(nativeFabricUIManager.registerEventHandler.mock.calls.length).toBe(\n@@ -698,7 +761,9 @@ describe('ReactFabric', () => {\n expect(touchStart).toBeCalled();\n expect(touchStart2).not.toBeCalled();\n \n- ReactFabric.render(, 11);\n+ act(() => {\n+ ReactFabric.render(, 11);\n+ });\n \n \/\/ Intentionally dispatch to the same instanceHandle again.\n dispatchEvent(instanceHandle, 'topTouchStart', touchEvent);\n@@ -742,33 +807,35 @@ describe('ReactFabric', () => {\n const ref1 = React.createRef();\n const ref2 = React.createRef();\n \n- ReactFabric.render(\n- \n- {\n- expect(ref1.current).not.toBeNull();\n- \/\/ Check for referential equality\n- expect(ref1.current).toBe(event.target);\n- expect(ref1.current).toBe(event.currentTarget);\n- }}\n- onStartShouldSetResponder={() => true}\n- \/>\n- {\n- expect(ref2.current).not.toBeNull();\n- \/\/ Check for referential equality\n- expect(ref2.current).toBe(event.target);\n- expect(ref2.current).toBe(event.currentTarget);\n- }}\n- onStartShouldSetResponder={() => true}\n- \/>\n- <\/View>,\n- 1,\n- );\n+ act(() => {\n+ ReactFabric.render(\n+ \n+ {\n+ expect(ref1.current).not.toBeNull();\n+ \/\/ Check for referential equality\n+ expect(ref1.current).toBe(event.target);\n+ expect(ref1.current).toBe(event.currentTarget);\n+ }}\n+ onStartShouldSetResponder={() => true}\n+ \/>\n+ {\n+ expect(ref2.current).not.toBeNull();\n+ \/\/ Check for referential equality\n+ expect(ref2.current).toBe(event.target);\n+ expect(ref2.current).toBe(event.currentTarget);\n+ }}\n+ onStartShouldSetResponder={() => true}\n+ \/>\n+ <\/View>,\n+ 1,\n+ );\n+ });\n \n const [\n dispatchEvent,\n@@ -823,7 +890,12 @@ describe('ReactFabric', () => {\n }\n }\n \n- ReactFabric.render( (parent = n)} \/>, 11);\n+ act(() => {\n+ ReactFabric.render(\n+ (parent = n)} \/>,\n+ 11,\n+ );\n+ });\n \n let match;\n expect(\n@@ -855,12 +927,14 @@ describe('ReactFabric', () => {\n }\n }\n \n- ReactFabric.render(\n- \n- (parent = n)} \/>\n- <\/StrictMode>,\n- 11,\n- );\n+ act(() => {\n+ ReactFabric.render(\n+ \n+ (parent = n)} \/>\n+ <\/StrictMode>,\n+ 11,\n+ );\n+ });\n \n let match;\n expect(\n@@ -896,7 +970,12 @@ describe('ReactFabric', () => {\n }\n }\n \n- ReactFabric.render( (parent = n)} \/>, 11);\n+ act(() => {\n+ ReactFabric.render(\n+ (parent = n)} \/>,\n+ 11,\n+ );\n+ });\n \n let match;\n expect(() => (match = ReactFabric.findNodeHandle(parent))).toErrorDev([\n@@ -926,12 +1005,14 @@ describe('ReactFabric', () => {\n }\n }\n \n- ReactFabric.render(\n- \n- (parent = n)} \/>\n- <\/StrictMode>,\n- 11,\n- );\n+ act(() => {\n+ ReactFabric.render(\n+ \n+ (parent = n)} \/>\n+ <\/StrictMode>,\n+ 11,\n+ );\n+ });\n \n let match;\n expect(() => (match = ReactFabric.findNodeHandle(parent))).toErrorDev([\n@@ -953,7 +1034,9 @@ describe('ReactFabric', () => {\n }));\n \n const viewRef = React.createRef();\n- ReactFabric.render(, 11);\n+ act(() => {\n+ ReactFabric.render(, 11);\n+ });\n \n expect(TextInputState.blurTextInput).not.toBeCalled();\n \n@@ -970,7 +1053,9 @@ describe('ReactFabric', () => {\n }));\n \n const viewRef = React.createRef();\n- ReactFabric.render(, 11);\n+ act(() => {\n+ ReactFabric.render(, 11);\n+ });\n \n expect(TextInputState.focusTextInput).not.toBeCalled();\n \n","body":"Co-authored-by: Timothy Yung "}

dillon1000/react

Files changed