Как смоделировать нажатие заголовка React-Navigation с помощью шутки?

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 из этого компонента? Я чувствую, что вам лучше всего тестировать это внутри HeaderConfirmButton, а не из другого компонента.

dcodesmith 01.04.2018 12:11

либо напишите тесты непосредственно для HeaderConfirmButton.js, либо используйте детокс для тестирования E2E github.com/wix/detox/tree/master/detox

vonovak 02.04.2018 02:11
Поведение ключевого слова "this" в стрелочной функции в сравнении с нормальной функцией
Поведение ключевого слова "this" в стрелочной функции в сравнении с нормальной функцией
В JavaScript одним из самых запутанных понятий является поведение ключевого слова "this" в стрелочной и обычной функциях.
Концепция локализации и ее применение в приложениях React ⚡️
Концепция локализации и ее применение в приложениях React ⚡️
Локализация - это процесс адаптации приложения к различным языкам и культурным требованиям. Это позволяет пользователям получить опыт, соответствующий...
Навигация по приложениям React: Исчерпывающее руководство по React Router
Навигация по приложениям React: Исчерпывающее руководство по React Router
React Router стала незаменимой библиотекой для создания одностраничных приложений с навигацией в React. В этой статье блога мы подробно рассмотрим...
Массив зависимостей в React
Массив зависимостей в React
Все о массиве Dependency и его связи с useEffect.
0
2
735
0

Другие вопросы по теме