Я тестирую свой компонент, используя Jest и Enzyme, в котором есть Input компонент из React Native Elements, но я получаю ошибку
Method “simulate” is meant to be run on 1 node. 0 found instead
Вот мой код:
import 'react-native';
import React from 'react';
import renderer from 'react-test-renderer';
import { shallow } from 'enzyme';
import TransactionDetails from '../../app/BankingFeatures/components/transactionDetails';
const userProfile = {
data: {
user_profile: {
name: 'ashwith',
payment_status_id: '1234556'
}
}
};
const state = {
name: 'ashwith',
amount: null,
transaction_id: null,
transaction_date: '2019/06/18',
transaction_type: null,
name_status: undefined,
amount_status: undefined,
transaction_id_status: undefined,
transaction_date_status: undefined,
transaction_type_status: undefined,
};
describe('Transaction Test', () => {
const wrapper = shallow(<TransactionDetails
userProfile={userProfile}
/>);
const input = wrapper.find('Input').at(0);
input.simulate('changeText', 'eths');
});
actionDetails.js
import moment from 'moment';
import React, { Component } from 'react';
import DatePicker from 'react-native-datepicker';
import Spinner from 'react-native-loading-spinner-overlay';
import { Icon, Input, Button } from 'react-native-elements';
import {
View,
Text,
ScrollView,
Platform,
KeyboardAvoidingView,
} from 'react-native';
import { Colors } from '../../Metrics';
import { styles } from '../styles/transactionDetails';
import MainContainer from '../../Utilities/mainContainer';
import * as Errmsg from '../../../config/Contents/errMessages';
import * as Placeholdermsg from '../../../config/Contents/placeHolders';
class TransactionDetails extends Component {
// State
constructor(props) {
super(props);
const { userProfile } = this.props;
const userData = userProfile && userProfile.data && userProfile.data.user_profile;
const dateNow = moment(new Date()).format('YYYY/MM/DD');
this.state = {
name: userData ? userData.name : null,
amount: null,
transaction_id: null,
transaction_date: dateNow,
transaction_type: null,
name_status: undefined,
amount_status: undefined,
transaction_id_status: undefined,
transaction_date_status: undefined,
transaction_type_status: undefined,
};
}
getState = () => this.state;
change = (transaction_id, amount) => this.setState({ transaction_id, amount });
// Validating Transaction
async nameValidation() {
const { name } = this.state;
const name_status = name ? undefined : Errmsg.name;
if (name_status === undefined) {
// this.tranIdInput.focus();
} else {
await this.setState({
name_status
});
}
}
// Validating Transaction Date
async transactionDateValidation() {
const { transaction_date } = this.state;
const transaction_date_status = await transaction_date ? undefined : 'Transaction date required';
if (transaction_date_status === undefined) {
this.tranIdInput.focus();
} else {
await this.setState({
transaction_date_status
});
}
}
// Validating Transaction ID
async transIdValidation() {
const { transaction_id } = this.state;
const transaction_id_status = transaction_id ? undefined : 'Transaction id required';
if (transaction_id_status === undefined) {
// this.transTypenput.focus();
} else {
await this.setState({
transaction_id_status
});
}
}
// Validating Transaction Type
async transTypeValidation() {
const { transaction_type } = this.state;
const transaction_type_status = transaction_type ? undefined : 'Transaction type required';
if (transaction_type_status === undefined) {
this.amountInput.focus();
} else {
await this.setState({
transaction_type_status
});
}
}
// Validating Amount
async amountValidation() {
const { amount } = this.state;
const amount_status = !isNaN(amount) ? amount && amount.length >= 5 ? undefined : 'min you can add 10000' : 'Amount required';
if (amount_status === undefined) {
// this.btnPress();
} else {
await this.setState({
amount_status
});
}
}
// Submitting Transaction details
btnPress() {
const { actions } = this.props;
const {
name,
amount,
transaction_id,
transaction_date,
transaction_type,
} = this.state;
actions.addBankTransactionDetails({
name,
amount,
transaction_id,
transaction_date,
transaction_type,
});
}
render() {
const {
name_status,
amount_status,
transaction_id_status,
transaction_date_status,
transaction_type_status,
} = this.state;
const { addBankTransactionDetails } = this.props;
return (
<MainContainer style={styles.container}>
<Spinner
cancelable
visible={addBankTransactionDetails && addBankTransactionDetails.isLoading}
textContent={'Loading...'}
/>
<KeyboardAvoidingView style={styles.container} behavior={Platform.OS === 'ios' && 'height'}>
<ScrollView
bounces={false}
showsVerticalScrollIndicator={false}
>
<View style={styles.formContainer}>
<Text style={styles.title}>Add Transaction Details</Text>
<Input
placeholder={Placeholdermsg.name}
ref={this.nameInput}
leftIcon={
<Icon
name='user'
size={24}
color={Colors.grey}
type='font-awesome'
/>
}
autoFocus
value={this.state.name}
autoCapitalize='characters'
returnKeyType='next'
onSubmitEditing={() => { this.nameValidation(); }}
onChangeText={(name) => this.setState({ name, name_status: undefined })}
inputStyle={styles.textinput}
containerStyle={styles.textFeildContainer}
inputContainerStyle={styles.textFeild}
errorMessage={(name_status) || null}
/>
<DatePicker
style={styles.dateContainer}
date={this.state.transaction_date}
mode="date"
placeholder="Select transaction date"
format="YYYY/MM/DD"
minDate="2019-01-01"
confirmBtnText="Confirm"
cancelBtnText="Cancel"
iconComponent={
<Icon
name="calendar"
type="entypo"
size={24}
color={Colors.grey}
containerStyle={{
position: 'absolute',
left: 10,
top: 8,
marginLeft: 0
}}
/>
}
customStyles={{
dateIcon: {
position: 'absolute',
left: 0,
top: 4,
marginLeft: 0
},
dateInput: {
height: 50,
marginLeft: 50,
borderWidth: 0,
alignItems: 'flex-start',
}
}}
onCloseModal={() => this.transactionDateValidation()}
onDateChange={async (transaction_date) => { this.setState({ transaction_date, transaction_date_status: undefined }, () => { console.log(transaction_date); }); this.transactionDateValidation(); }}
/>
{
(transaction_date_status !== undefined) &&
<View style={styles.errorContainer}>
<Text style={styles.errText}>{transaction_date_status}</Text>
</View>
}
<Input
ref={(input) => { this.tranIdInput = input; }}
placeholder='Enter transaction id'
leftIcon={
<Icon
name='key'
size={24}
color={Colors.grey}
type='entypo'
/>
}
autoCapitalize='characters'
returnKeyType='next'
onSubmitEditing={() => { this.transIdValidation(); }}
onChangeText={(transaction_id) => this.setState({ transaction_id, transaction_id_status: undefined })}
inputStyle={styles.textinput}
containerStyle={styles.textFeildContainer}
inputContainerStyle={styles.textFeild}
errorMessage={(transaction_id_status) || null}
/>
<Input
ref={(input) => { this.transTypenput = input; }}
placeholder='Enter transaction type'
leftIcon={
<Icon
name='bank'
size={20}
color={Colors.grey}
type='font-awesome'
/>
}
autoCapitalize='characters'
returnKeyType='next'
onSubmitEditing={() => { this.transTypeValidation(); }}
onChangeText={(transaction_type) => this.setState({ transaction_type, transaction_type_status: undefined })}
inputStyle={styles.textinput}
containerStyle={styles.textFeildContainer}
inputContainerStyle={styles.textFeild}
errorMessage={(transaction_type_status) || null}
/>
<Input
ref={(input) => { this.amountInput = input; }}
placeholder='Enter Amount'
leftIcon={
<Icon
name='rupee'
size={24}
color={Colors.grey}
type='font-awesome'
/>
}
keyboardType='numeric'
returnKeyType='done'
onSubmitEditing={() => { this.amountValidation(); }}
onChangeText={(amount) => this.setState({ amount, amount_status: undefined })}
inputStyle={styles.textinput}
containerStyle={styles.textFeildContainer}
inputContainerStyle={styles.textFeild}
errorMessage={(amount_status) || null}
/>
</View>
</ScrollView>
</KeyboardAvoidingView>
<View style={styles.bottomContainer}>
<Button
title="Submit"
buttonStyle={styles.Button}
onPress={() => this.btnPress()}
containerStyle={{ alignSelf: 'stretch' }}
/>
</View>
</MainContainer>
);
}
}
export default TransactionDetails;
debug
<MainContainer style={{...}}>
<Spinner cancelable={true} visible={false} textContent="Loading..." animation="none" color="white" size="large" overlayColor="rgba(0, 0, 0, 0.25)" />
<KeyboardAvoidingView style={{...}} behavior="height" enabled={true} keyboardVerticalOffset={0}>
<ScrollViewMock bounces={false} showsVerticalScrollIndicator={false}>
<View style={{...}}>
<Text style={{...}}>
Add Transaction Details
</Text>
<ForwardRef(Themed.Input) placeholder="Enter name" leftIcon={{...}} autoFocus={true} value="ashwith" autoCapitalize="characters" returnKeyType="next" onSubmitEditing={[Function: onSubmitEditing]} onChangeText={[Function: onChangeText]} inputStyle={{...}} containerStyle={{...}} inputContainerStyle={{...}} errorMessage={{...}} />
<DatePicker style={{...}} date="2019/06/24" mode="date" placeholder="Select transaction date" format="YYYY/MM/DD" minDate="2019-01-01" confirmBtnText="Confirm" cancelBtnText="Cancel" iconComponent={{...}} customStyles={{...}} onCloseModal={[Function: onCloseModal]} onDateChange={[Function: _callee]} androidMode="default" height={259} duration={300} iconSource={{...}} showIcon={true} disabled={false} allowFontScaling={true} hideText={false} TouchableComponent={[Function]} modalOnResponderTerminationRequest={[Function: modalOnResponderTerminationRequest]} />
<ForwardRef(Themed.Input) placeholder="Enter transaction id" leftIcon={{...}} autoCapitalize="characters" returnKeyType="next" onSubmitEditing={[Function: onSubmitEditing]} onChangeText={[Function: onChangeText]} inputStyle={{...}} containerStyle={{...}} inputContainerStyle={{...}} errorMessage={{...}} />
<ForwardRef(Themed.Input) placeholder="Enter transaction type" leftIcon={{...}} autoCapitalize="characters" returnKeyType="next" onSubmitEditing={[Function: onSubmitEditing]} onChangeText={[Function: onChangeText]} inputStyle={{...}} containerStyle={{...}} inputContainerStyle={{...}} errorMessage={{...}} />
<ForwardRef(Themed.Input) placeholder="Enter Amount" leftIcon={{...}} keyboardType="numeric" returnKeyType="done" onSubmitEditing={[Function: onSubmitEditing]} onChangeText={[Function: onChangeText]} inputStyle={{...}} containerStyle={{...}} inputContainerStyle={{...}} errorMessage={{...}} />
</View>
</ScrollViewMock>
</KeyboardAvoidingView>
<View style={{...}}>
<ForwardRef(Themed.Button) title="Submit" buttonStyle={{...}} onPress={[Function: onPress]} containerStyle={{...}} />
</View>
</MainContainer>