Ошибка при имитации изменения текста, реагировать на родную шутку - PullRequest
Новая
       47

Ошибка при имитации изменения текста, реагировать на родную шутку

0 голосов
/ 16 июня 2020

Допустим, я создаю экран входа в систему. Внутри этого экрана я импортирую компонент формы. А внутри компонента формы у меня есть ввод текста. Затем я хочу имитировать ввод текста при изменении текста, но всегда получаю сообщение об ошибке

Метод «simulate» предназначен для запуска на 1 узле. Вместо этого был найден 0.

Это мой тестовый файл 

it('calls the login submit method', () => {
  const fieldPhoneNumber = wrapper
    .find('Form')
    .dive()
    .find('TextInput[id="fieldPhoneNumber"]');
  fieldPhoneNumber
    .at(0)
    .simulate('changeText', { target: { value: '082262366193' } });
});

Это мой файл входа в систему 

import React, { useState, useEffect } from 'react';
import { ScrollView, StatusBar, Platform } from 'react-native';
import Header from './components/Header';
import Form from './components/Form';
import ButtonSocialMedia from './components/ButtonSocialMedia';
function LoginScreen() {
  const [phoneNumber, setPhoneNumber] = useState('');
  const [focus, setFocus] = useState(false);

  useEffect(() => {
  }, [phoneNumber]);

  const changePhoneNumber = (value) => {
    setPhoneNumber(value);
  };

  const showAppleButton = () => {
    if (Platform.OS === 'ios') {
      const version = Platform.Version.split('.')[0];
      if (version >= 13) {
        return true;
      } else {
        return false;
      }
    } else {
      return false;
    }
  };

  const loginSubmit = () => {
    console.log('Login Submit');
  };

  return (
    <ScrollView>
      <StatusBar
        translucent
        backgroundColor="transparent"
        barStyle="light-content"
      />
      <Header />
      <Form
        phoneNumber={phoneNumber}
        changePhoneNumber={(value) => changePhoneNumber(value)}
        focus={focus}
        setFocus={() => setFocus(true)}
        loginSubmit={() => loginSubmit()} />
      <ButtonSocialMedia showAppleButton={() => showAppleButton()} />
    </ScrollView>
  );
}

export default LoginScreen;

Это мой компонент формы 

/* eslint-disable prettier/prettier */
import React from 'react';
import { View, Text, TextInput } from 'react-native';
import styles from '../styles/StyleForm';
import color from '../../../../__global__/styles/themes/colorThemes';
import regex from '../../../../constant/regex';
import * as yup from 'yup';
import { Formik } from 'formik';
import ButtonFull from '../../../../__global__/button/buttonFull';
const regexPhoneNumber = regex.phone;
function Form(props) {
  const renderFocus = () => {
    if (props.focus) {
      return (
        <Text style={styles.textFocus}>Type your phone number</Text>
      );
    }
  };

  return (
    <Formik
      enableReinitialize={true}
      initialValues={{
        phoneNumber: props.phoneNumber,
      }}
      onSubmit={values => {
        console.log('Login Submit');
      }}
      validateOnMount={true}
      validationSchema={yup.object().shape({
        phoneNumber: yup
          .string()
          .required()
          .min(8)
          .matches(regexPhoneNumber, 'Phone number is not valid'),
      })}>
      {({
        // values,
        handleChange,
        errors,
        setFieldTouched,
        touched,
        isValid,
        handleSubmit,
      }) => (
          <View style={styles.form}>
            <View style={styles.subContainer}>
              <View style={styles.containerTitle}>
                <Text style={styles.textTitle}>+62</Text>
              </View>
              <View style={styles.containerPhoneNumber}>
                {renderFocus()}
                <TextInput
                  id={'fieldPhoneNumber'}
                  onFocus={() => props.setFocus(true)}
                  value={props.phoneNumber}
                  style={styles.subContainerPhoneNumber}
                  placeholderStyle={styles.placeholder}
                  placeholder={'Type your phone number'}
                  onChangeText={(value) => {
                    handleChange('phoneNumber');
                    props.changePhoneNumber(value);
                    setFieldTouched('phoneNumber', true);
                  }}
                  keyboardType={'numeric'}
                  onBlur={() => setFieldTouched('phoneNumber', true)}
                />
              </View>
            </View>
            {touched.phoneNumber && errors.phoneNumber && (
              <View style={styles.containerError}>
                <Text style={styles.textError}>Phone number is not valid</Text>
              </View>
            )}
            <View style={styles.containerButton}>
              <ButtonFull
                isDisabled={!isValid}
                id={'buttonLogin'}
                color={isValid ? color.thema : color.grey}
                handleSubmit={() => props.loginSubmit()}
                title={'Next'}
              />
            </View>
          </View>
        )}
    </Formik>

  );
}

export default Form;

1 Ответ

0 голосов
/ 16 июня 2020

Ошибка, с которой вы столкнулись, означает, что оператор const fieldPhoneNumber wrapper.find('Form').dive().find('TextInput[id="fieldPhoneNumber"]'); не смог найти компонент TextInput, и, следовательно, функция моделирования не может быть вызвана. Попробуйте найти строку TextInput внутри оболочки и посмотрите, работает ли она.

...