how to mock autofocus prop of a child textInput in ReactNative

Question

good day everyone, i'm just starting working with both react native and testing. i have a log in component who has 2 text inputs one of them is autofocused. when i try running my test it complains about the component using findNodeHandle.

i tried looking for answers to similar problems on google but found nothing that worked for me so i thought i try my luck here.

this is the render method of my component.

render() {
    return (
      <View style={styles.login}>
        <TextInput autoFocus={this.props.focus || true} onChange={uname => this.setState({ username: uname})} placeholder={'Username'} style={styles.input}/>
        <TextInput 
        onChange = {
          pwd => this.setState({
            password: pwd
          })
        }
        placeholder = {
          'Password'
        }
        style = {
          [styles.input,
          styles.password]
        }

        secureTextEntry = {true}
        />
      </View>
    )
  }

and this is the test i'm trying to perform

it('render a log in form', () => {
    expect(renderer.create(
        <Login focus={false}/>
    )).toMatchSnapshot();
});

when i run the test this is the output i receive:

PASS tests/App-test.js

● Cannot log after tests are done. Did you forget to wait for something async in your test?

Attempted to log "Calling .focus() in the test renderer environment is not supported. Instead, mock out your components that use findNodeHandle with replacements that don't rely on the native environment.".

at BufferedConsole.warn (node_modules/@jest/console/build/BufferedConsole.js:224:10)

at Component.focus (node_modules/react-native/jest/MockNativeMethods.js:11:13)

PASS tests/Login.test.js

Test Suites: 2 passed, 2 total

Tests: 2 passed, 2 total

Snapshots: 1 passed, 1 total

Time: 4.233s

Ran all test suites.

● Cannot log after tests are done. Did you forget to wait for something async in your test?

Attempted to log "Calling .focus() in the test renderer environment is not supported. Instead, mock out your components that use findNodeHandle with replacements that don't rely on the native environment.".

at BufferedConsole.warn (node_modules/@jest/console/build/BufferedConsole.js:224:10)

at Component.focus (node_modules/react-native/jest/MockNativeMethods.js:11:13)

Done in 6.16s.

i hope some one can tell me what is causing this problem and how to prevent it for this situation and future similar situations. thanks to everyone for their time in answering my question.

Ankush Rishi Ankush Rishi · Accepted Answer · 2019-04-03T10:40:32

Add this code to your imports (anywhere in your imports)

import { findNodeHandle } from 'react-native';
import TextInputState from 'react-native/lib/TextInputState';
export function focusTextInput(node) {
  try {
    TextInputState.focusTextInput(findNodeHandle(node));
  } catch(e) {
    console.log("Couldn't focus text input: ", e.message)
  }
};

Add the following lines to your constructor

this.focusNextField = this.focusNextField.bind(this);
this.inputs = {};
Add the following function to your class

focusNextField(id) {
  this.inputs[id].focus();
}

Edit your TextInput as follow :

<TextInput
  onSubmitEditing={() => {this.focusNextField('two');}}
  ref={ input => {this.inputs['one'] = input;}}
/>
<TextInput
  onSubmitEditing={() => {this.focusNextField('three');}}
  ref={ input => {this.inputs['two'] = input;}}
/>

Refer this post: ReactNative TextInput Focus

how to mock autofocus prop of a child textInput in ReactNative

1 Answers