React-navigation отображает заголовок в моем приложении, поддерживающем реакцию, через статическое поле класса navigationOptions. Как мне протестировать рендеринг navigationOptions? Я хочу имитировать печать HeaderConfirmButton, но когда я распечатываю html из шутки, он явно не содержит данных navigationOption. Это имеет смысл, поскольку это статическое поле. Как я могу использовать шутку для имитации нажатия кнопок в заголовке, а именно правой кнопки и кнопки возврата?
CreateEmailScreen.js
import React from 'react';
import { Item, Label, Input } from 'native-base';
import HeaderConfirmButton from '../general/components/HeaderConfirmButton';
class CreateEmailScreen extends React.Component {
static navigationOptions = ({navigation}) => {
//default to emtpy object otherwise, params is undefined if there are no params
const { params = {} } = navigation.state;
return {
tabBarVisible: false,
title: "New email?",
headerRight: <HeaderConfirmButton onConfirm = {params.onConfirm} text = {params.confirmText}/>
}
};
componentDidMount () {
const {navigation, children, ...remainingProps} = this.props;
this.props.navigation.setParams({...remainingProps});
}
state = {
email: '',
};
render () {
return (
<Container>
<Content>
<Form>
<Item floatingLabel>
<Label>Email</Label>
<Input value = {this.state.email} onChangeText = {email => this.setState({email})}/>
</Item>
</Form>
</Content>
</Container>
)
}
}
export default CreateEmailScreen;
выход shallow(<CreateEmailScreen navigation = {navigation} />, {context: {store}}).dive().html()
<View style = "0:[object Object];1:[object Object]">
<RCTScrollView keyboardDismissMode = "interactive" contentInset = "[object Object]" scrollEventThrottle = "1" resetScrollToCoords = "[object Object]"
keyboardShouldPersistTaps = "handled" style = "flex:1;background-color:transparent" extraHeight = "75" extraScrollHeight = "0"
keyboardOpeningTime = "250" keyboardSpace = "0">
<View>
<View>
<View style = "margin-top:15px;margin-left:15px;border-left-width:0;border-right-width:0;border-top-width:0;border-bottom-width:1px;border-color:#D9D5DC;background-color:transparent;flex-direction:row;align-items:center;opacity:1">
<View style = "position:absolute;left:0;right:0;top:18px;opacity:1">
<Text style = "top:6px;left:0;font-size:17px;color:#575757;padding-right:5px" ellipsizeMode = "tail">
<Text style = "font-size:17px" ellipsizeMode = "tail">Email</Text>
</Text>
</View>
<TextInput underlineColorAndroid = "rgba(0,0,0,0)" placeholderTextColor = "#575757" value = "" style = "height:50px;top:10px;color:#000;flex:1;font-size:17px;line-height:24;padding-right:5px"></TextInput>
</View>
</View>
</View>
</RCTScrollView>
</View>
либо напишите тесты непосредственно для HeaderConfirmButton.js, либо используйте детокс для тестирования E2E github.com/wix/detox/tree/master/detox





Есть ли причина, по которой вы хотите имитировать нажатие на компонент HeaderConfirmButton из этого компонента? Я чувствую, что вам лучше всего тестировать это внутри HeaderConfirmButton, а не из другого компонента.