как смоделировать автофокус для дочернего textInput в ReactNative

Question

добрый день всем, я только начинаю работать как с реакцией на родной, так и с тестированием. У меня есть компонент входа в систему, который имеет 2 текстовых ввода, один из них является автофокусированным. когда я пытаюсь запустить свой тест, он жалуется на компонент, используя findNodeHandle.

Я пытался найти ответы на похожие проблемы в Google, но не нашел ничего, что помогло бы мне, поэтому я подумал, что мне здесь повезло.

это метод рендеринга моего компонента.

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>
    )
  }

и это тест, который я пытаюсь выполнить

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

когда я запускаю тест, это вывод, который я получаю:

PASS tests / App-test.js

● Невозможно войти в систему после завершения испытаний. Вы забыли подождать что-то асинхронное в своем тесте?

Попытка занести в журнал «Вызов .focus () в среде визуализатора тестирования не поддерживается. Вместо этого смоделируйте компоненты, использующие findNodeHandle, с заменами, не зависящими от собственной среды.».

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

в Component.focus (node_modules / реакции-нативный / jest / MockNativeMethods.js: 11: 13)

PASS тесты / Login.test.js

Тестовые наборы: 2 пройдено, 2 всего

Тесты: 2 пройдено, 2 всего

Снимки: 1 пройдено, 1 всего

Время: 4,233 с

Запустил все тестовые наборы.

● Невозможно войти в систему после завершения испытаний. Вы забыли подождать что-то асинхронное в своем тесте?

Попытка занести в журнал «Вызов .focus () в среде визуализатора тестирования не поддерживается. Вместо этого смоделируйте компоненты, использующие findNodeHandle, с заменами, не зависящими от собственной среды.».

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

в Component.focus (node_modules / Reaction-native / jest / MockNativeMethods.js: 11: 13)

Совершено за 6,16 с.

Я надеюсь, что кто-нибудь скажет мне, что является причиной этой проблемы и как предотвратить ее для этой ситуации и будущих подобных ситуаций. спасибо всем за то, что нашли время ответить на мой вопрос.

Answer 1

Добавьте этот код в ваш импорт (в любом месте вашего импорта)

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)
  }
};

Добавьте следующие строки в ваш конструктор

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

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

Отредактируйте ваш TextInput следующим образом:

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

См. Этот пост: ReactNative TextInput Focus