title: write a test to change prop of a child component
body: <p>*********************Updated*********************************************</p>
  
  <p>I have a DialogBox component that I am trying to test out. I am trying to set the 'value' prop of a child component(TextInput) inside the DialogBox. I have tried almost everything but nothing seems to work. Can some one help me?</p>
  
  <pre><code>test('input type returns a text', () =&gt; {
  const okPressFunction = jest.fn()
  const obj = (
    shallow(
      &lt;DialogBox
        title='random title'
        message={lorem}
        type='input'
        isVisible
        onOkPress={okPressFunction}
        onRequestClose={noop}
      /&gt;
    )
  )
  // obj.dive().find('TextInput').setProps({ value: 'hi' })
  // obj.update()
  // console.log(obj.dive().find('TextInput').prop('value'))
  obj.find('TextInput').simulate('change', {
    target: { value: 'hello' },
  })
  obj.update()
  console.log(obj.dive().find('TextInput').prop('value'))
    })
  })
  </code></pre>
  
  <p>The console.log(obj.html()) dump is:</p>
  
  <pre><code>  &lt;Component
    transparent={true}
    animationType="fade"
    visible={true}
    onRequestClose={[(Function: noop)]}
    hardwareAccelerated={false}
  &gt;
    &lt;View
      style={{
        backgroundColor: "#33333340",
        width: "100%",
        height: "100%",
        justifyContent: "center",
        alignItems: "center",
      }}
    &gt;
      &lt;View
        style={{
          backgroundColor: "white",
          width: "80%",
          borderRadius: 2,
          borderColor: "#a4a4a4",
          flexDirection: "column",
          paddingHorizontal: 7,
        }}
      &gt;
        &lt;View stlye={{ flexDirection: "column", justifyContent: "flex-start" }}&gt;
          &lt;H3 style={{ fontWeight: "bold" }} if={true}&gt;
            random title
          &lt;/H3&gt;
          &lt;Text style={{}} if={true}&gt;
            Lorem ipsum dolor sit amet, consectetur adipisicing elit. Dignissimos
            doloribus, eos porro sed velit sunt. Maiores ipsa, voluptatum ad
            explicabo aut rem aperiam animi consequuntur libero eveniet sed,
            voluptatem velit?
          &lt;/Text&gt;
        &lt;/View&gt;
        &lt;TextInput
          noSpacing={true}
          placeholder="input here..."
          name="input"
          onChangeText={[(Function: onChangeText)]}
          value={null}
          icon={null}
          style={{}}
          hasFloatingLabel={true}
          numberOfLines={1}
          isPassword={false}
          if={true}
        /&gt;
        &lt;View style={{ flexDirection: "row", justifyContent: "flex-end" }}&gt;
          &lt;Button
            type="text"
            title="cancel"
            onPress={null}
            icon={null}
            iconPosition="right"
            iconProps={{}}
            isDisabled={false}
            isLoading={false}
            size="medium"
            style={{}}
            textContainerStyles={{}}
            if={true}
          /&gt;
          &lt;View style={{ flexDirection: "row", justifyContent: "flex-end" }}&gt;
            &lt;Button
              type="text"
              title="action"
              onPress={[(Function: onPress)]}
              icon={null}
              iconPosition="right"
              iconProps={{}}
              isDisabled={false}
              isLoading={false}
              size="medium"
              style={{}}
              textContainerStyles={{}}
              if={true}
            /&gt;
          &lt;/View&gt;
        &lt;/View&gt;
      &lt;/View&gt;
    &lt;/View&gt;
  &lt;/Component&gt;
  </code></pre>
  
  <p>I am testing a ui test scenario in which a user first inputs a value in text Input and once clicks on the last button ('action') the input value is returned as in a callback function. But, first I need to set value of the text Input. I have one through official docs and many threads with no meaningful help.</p>
  
  <p>Dialog box code:</p>
  
  <pre><code>   export class DialogBox extends PureComponent {
    state = {
      textInput: null,
    }
  
    okButton = (
      &lt;View style={styles.buttons}&gt;
        &lt;Button
          type="text"
          title={t('action')}
          onPress={() =&gt; {
            this.props.onOkPress(this.state.textInput)
            this.setState({ textInput: null })
          }}
        /&gt;
      &lt;/View&gt;
    )
  
    cancelButton = (
      &lt;Button
        type="text"
        title={t('cancel')}
        onPress={this.props.onCancelPress}
      /&gt;
    )
  
    confirmButtons = (
      &lt;View style={styles.buttons}&gt;
        {this.cancelButton}
        {this.okButton}
      &lt;/View&gt;
    )
  
    inputButtons = (
      &lt;Fragment&gt;
        &lt;TextInput
          noSpacing
          placeholder="input here..."
          name="input"
          onChangeText={(text) =&gt; this.setState({ textInput: text })}
        /&gt;
        {this.confirmButtons}
      &lt;/Fragment&gt;
    )
  
    renderButtons (type) {
      switch (type) {
        case 'confirm':
          return this.confirmButtons
        case 'alert':
          return this.okButton
        case 'input':
          return this.inputButtons
        default:
          return this.okButton
      }
    }
  
    render () {
      const {
        title,
        message,
        isVisible,
        type,
        onRequestClose,
      } = this.props
  
      return (
        &lt;Modal
          transparent
          animationType="fade"
          visible={isVisible}
          onRequestClose={onRequestClose}
        &gt;
          &lt;View style={styles.container}&gt;
            &lt;View style={styles.alertContainer}&gt;
              &lt;View stlye={styles.textContainer}&gt;
                &lt;H3 style={styles.title}&gt;{title}&lt;/H3&gt;
                &lt;Text&gt;{message}&lt;/Text&gt;
              &lt;/View&gt;
              {this.renderButtons(type)}
            &lt;/View&gt;
          &lt;/View&gt;
        &lt;/Modal&gt;
      )
    }
  }
  </code></pre>