[RNMobile] Refactor UIManager native module mock (#29390)

* Update UIManager native module mock The way this native module was being mocked didn't work because UIManager is not exposed in NativeModules object and doMock wasn't overriding it properly. * Remove react-native-aztec mock * Refactor react-native module mock We currently reference TextStateInput (a private module) within react-native-aztec/src/AztecView. Doing so requires that we mock it via its internal path to avoid "TypeError: Cannot read property 'Commands' of undefined." The private module referenced could possibly be replaced with a React ref instead. We could then remove this internal mock. * Refactor to avoid inconsistent import pattern Generally, named exports are used when importing React Native modules. This changes the one exception in our source were we imported a default import of `ReactNative`. Importing this default also caused issues when attempting to mock `react-native` for Jest. This change will make future mocking in Jest easier. * Remove deprecated Jest config The `providesModuleNodeModules` option was removed from Jest. Including it in the Jest configuration displayed a warning on each run. https://git.io/JtNRI > Unknown option "haste.providesModuleNodeModules" with value ["react-native", "react-native-svg"] was found. This is probably a typing mistake. Fixing it will remove this message. * Add documentation for mock of internal React Native module Explain why we are mocking this internal React Native module for future reference. Co-authored-by: Carlos Garcia <[email protected]>
WordPress · Mar 17, 2021 · 915a40f · 915a40f
1 parent 2f1b4dc
commit 915a40f
Show file tree

Hide file tree

Showing 4 changed files with 17 additions and 52 deletions.
diff --git a/packages/react-native-aztec/src/AztecView.js b/packages/react-native-aztec/src/AztecView.js
@@ -1,7 +1,8 @@
 /**
  * External dependencies
  */
-import ReactNative, {
+import {
+	findNodeHandle,
 	requireNativeComponent,
 	UIManager,
 	TouchableWithoutFeedback,
@@ -39,7 +40,7 @@ class AztecView extends Component {
 	dispatch( command, params ) {
 		params = params || [];
 		UIManager.dispatchViewManagerCommand(
-			ReactNative.findNodeHandle( this ),
+			findNodeHandle( this ),
 			command,
 			params
 		);
@@ -125,7 +126,7 @@ class AztecView extends Component {
 
 	_onBlur( event ) {
 		this.selectionEndCaretY = null;
-		TextInputState.blurTextInput( ReactNative.findNodeHandle( this ) );
+		TextInputState.blurTextInput( findNodeHandle( this ) );
 
 		if ( ! this.props.onBlur ) {
 			return;
@@ -177,18 +178,16 @@ class AztecView extends Component {
 	}
 
 	blur() {
-		TextInputState.blurTextInput( ReactNative.findNodeHandle( this ) );
+		TextInputState.blurTextInput( findNodeHandle( this ) );
 	}
 
 	focus() {
-		TextInputState.focusTextInput( ReactNative.findNodeHandle( this ) );
+		TextInputState.focusTextInput( findNodeHandle( this ) );
 	}
 
 	isFocused() {
 		const focusedField = TextInputState.currentlyFocusedField();
-		return (
-			focusedField && focusedField === ReactNative.findNodeHandle( this )
-		);
+		return focusedField && focusedField === findNodeHandle( this );
 	}
 
 	_onPress( event ) {

diff --git a/test/native/__mocks__/react-native-aztec/index.js b/test/native/__mocks__/react-native-aztec/index.js
diff --git a/test/native/jest.config.js b/test/native/jest.config.js
@@ -62,7 +62,6 @@ module.exports = {
 	haste: {
 		defaultPlatform: rnPlatform,
 		platforms: [ 'android', 'ios', 'native' ],
-		providesModuleNodeModules: [ 'react-native', 'react-native-svg' ],
 	},
 	transformIgnorePatterns: [
 		// This is required for now to have jest transform some of our modules

diff --git a/test/native/setup.js b/test/native/setup.js
@@ -1,7 +1,6 @@
 /**
  * External dependencies
  */
-import { NativeModules } from 'react-native';
 import 'react-native-gesture-handler/jestSetup';
 
 jest.mock( '@wordpress/element', () => {
@@ -106,27 +105,6 @@ jest.mock( '@react-native-community/blur', () => () => 'BlurView', {
 	virtual: true,
 } );
 
-// Overwrite some native module mocks from `react-native` jest preset:
-// https://github.com/facebook/react-native/blob/HEAD/jest/setup.js
-// to fix issue "TypeError: Cannot read property 'Commands' of undefined"
-// raised when calling focus or blur on a native component
-const mockNativeModules = {
-	UIManager: {
-		...NativeModules.UIManager,
-		getViewManagerConfig: jest.fn( () => ( { Commands: {} } ) ),
-	},
-};
-
-Object.keys( mockNativeModules ).forEach( ( module ) => {
-	try {
-		jest.doMock( module, () => mockNativeModules[ module ] ); // needed by FacebookSDK-test
-	} catch ( error ) {
-		jest.doMock( module, () => mockNativeModules[ module ], {
-			virtual: true,
-		} );
-	}
-} );
-
 jest.mock( 'react-native-reanimated', () => {
 	const Reanimated = require( 'react-native-reanimated/mock' );
 
@@ -137,5 +115,14 @@ jest.mock( 'react-native-reanimated', () => {
 	return Reanimated;
 } );
 
-// Silence the warning: Animated: `useNativeDriver` is not supported because the native animated module is missing
+// Silence the warning: Animated: `useNativeDriver` is not supported because the
+// native animated module is missing. This was added per React Navigation docs.
+// https://reactnavigation.org/docs/testing/#mocking-native-modules
 jest.mock( 'react-native/Libraries/Animated/src/NativeAnimatedHelper' );
+
+// We currently reference TextStateInput (a private module) within
+// react-native-aztec/src/AztecView. Doing so requires that we mock it via its
+// internal path to avoid "TypeError: Cannot read property 'Commands' of
+// undefined." The private module referenced could possibly be replaced with
+// a React ref instead. We could then remove this internal mock.
+jest.mock( 'react-native/Libraries/Components/TextInput/TextInputState' );