title: How to simulate a press a react-navigation header with jest?
body: <p>React-navigation renders a header in my react-native app via a class's static field <code>navigationOptions</code>. How do I test the render of <code>navigationOptions</code>? I want to simulate a press of <code>HeaderConfirmButton</code> but when I print out the html from jest, it clearly does not contain the <code>navigationOption</code> data. This makes sense since it is a static field. How can I use jest to simulate button clicks within the header, namely my right button and my back button?</p>
  
  <p>CreateEmailScreen.js</p>
  
  <pre><code>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}) =&gt; {
      //default to emtpy object otherwise, params is undefined if there are no params
      const { params = {} } = navigation.state;
      return {
        tabBarVisible: false,
        title: "New email?",
        headerRight: &lt;HeaderConfirmButton onConfirm={params.onConfirm} text={params.confirmText}/&gt;
      }
    };
  
    componentDidMount () {
      const {navigation, children, ...remainingProps} = this.props;
      this.props.navigation.setParams({...remainingProps});
    }
  
  
    state = { 
      email: '',
    };
  
    render () {
      return (
        &lt;Container&gt;
          &lt;Content&gt;
            &lt;Form&gt;
              &lt;Item floatingLabel&gt;
                &lt;Label&gt;Email&lt;/Label&gt;
                &lt;Input value={this.state.email} onChangeText={email =&gt; this.setState({email})}/&gt;
              &lt;/Item&gt;
            &lt;/Form&gt;
          &lt;/Content&gt;
        &lt;/Container&gt;
      )
    }
  }
  
  export default CreateEmailScreen;
  </code></pre>
  
  <p>output of <code>shallow(&lt;CreateEmailScreen navigation={navigation} /&gt;, {context: {store}}).dive().html()</code></p>
  
  <pre><code>&lt;View style="0:[object Object];1:[object Object]"&gt;
    &lt;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"&gt;
      &lt;View&gt;
        &lt;View&gt;
          &lt;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"&gt;
            &lt;View style="position:absolute;left:0;right:0;top:18px;opacity:1"&gt;
              &lt;Text style="top:6px;left:0;font-size:17px;color:#575757;padding-right:5px" ellipsizeMode="tail"&gt;
                &lt;Text style="font-size:17px" ellipsizeMode="tail"&gt;Email&lt;/Text&gt;
              &lt;/Text&gt;
            &lt;/View&gt;
            &lt;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"&gt;&lt;/TextInput&gt;
          &lt;/View&gt;
        &lt;/View&gt;
      &lt;/View&gt;
    &lt;/RCTScrollView&gt;
  &lt;/View&gt;
  </code></pre>