diff --git a/packages/react-native-aztec/src/AztecView.js b/packages/react-native-aztec/src/AztecView.js index 9e92034710e11..854b26f745f40 100644 --- 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 deleted file mode 100644 index 6f0797e23d820..0000000000000 --- a/test/native/__mocks__/react-native-aztec/index.js +++ /dev/null @@ -1,20 +0,0 @@ -/** - * WordPress dependencies - */ -import { Component } from '@wordpress/element'; - -class AztecView extends Component { - blur = () => {}; - - focus = () => {}; - - isFocused = () => { - return false; - }; - - render() { - return <>; - } -} - -export default AztecView; diff --git a/test/native/jest.config.js b/test/native/jest.config.js index 8a823af611f70..2da93faad1859 100644 --- 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 index 5a691f2698b9d..6e6534d70d871 100644 --- 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' );