Question

React-navigation通过类的静态字段navigationOptions在我的react-native应用程序中呈现标题。如何测试navigationOptions的渲染？我想模拟HeaderConfirmButton的新闻，但是当我从jest打印出html时，它显然不包含navigationOption数据。这是有道理的，因为它是一个静态字段。如何使用jest模拟标题中的按钮点击，即右键和后键？

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>

如何用jest模拟反应导航标题？

0 个答案: