react-native - 模拟更改文本时出错以开玩笑的方式反应本机

问题描述

假设我创建了一个登录屏幕。在该屏幕内，我导入表单组件。在表单组件内部，我有一个文本输入。然后，我想在更改文本时模拟文本输入，但总是出错

方法“模拟”意味着在 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;

标签： react-nativejestjsenzyme

react-native - 模拟更改文本时出错以开玩笑的方式反应本机

问题描述

解决方案

推荐阅读