编写测试以更改子组件的属性

Question

*********************Updated*********************************************

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?

test('input type returns a text', () => {
const okPressFunction = jest.fn()
const obj = (
  shallow(
    <DialogBox
      title='random title'
      message={lorem}
      type='input'
      isVisible
      onOkPress={okPressFunction}
      onRequestClose={noop}
    />
  )
)
// 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'))
  })
})

The console.log(obj.html()) dump is:

  <Component
  transparent={true}
  animationType="fade"
  visible={true}
  onRequestClose={[(Function: noop)]}
  hardwareAccelerated={false}
>
  <View
    style={{
      backgroundColor: "#33333340",
      width: "100%",
      height: "100%",
      justifyContent: "center",
      alignItems: "center",
    }}
  >
    <View
      style={{
        backgroundColor: "white",
        width: "80%",
        borderRadius: 2,
        borderColor: "#a4a4a4",
        flexDirection: "column",
        paddingHorizontal: 7,
      }}
    >
      <View stlye={{ flexDirection: "column", justifyContent: "flex-start" }}>
        <H3 style={{ fontWeight: "bold" }} if={true}>
          random title
        </H3>
        <Text style={{}} if={true}>
          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?
        </Text>
      </View>
      <TextInput
        noSpacing={true}
        placeholder="input here..."
        name="input"
        onChangeText={[(Function: onChangeText)]}
        value={null}
        icon={null}
        style={{}}
        hasFloatingLabel={true}
        numberOfLines={1}
        isPassword={false}
        if={true}
      />
      <View style={{ flexDirection: "row", justifyContent: "flex-end" }}>
        <Button
          type="text"
          title="cancel"
          onPress={null}
          icon={null}
          iconPosition="right"
          iconProps={{}}
          isDisabled={false}
          isLoading={false}
          size="medium"
          style={{}}
          textContainerStyles={{}}
          if={true}
        />
        <View style={{ flexDirection: "row", justifyContent: "flex-end" }}>
          <Button
            type="text"
            title="action"
            onPress={[(Function: onPress)]}
            icon={null}
            iconPosition="right"
            iconProps={{}}
            isDisabled={false}
            isLoading={false}
            size="medium"
            style={{}}
            textContainerStyles={{}}
            if={true}
          />
        </View>
      </View>
    </View>
  </View>
</Component>

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.

Dialog box code:

   export class DialogBox extends PureComponent {
  state = {
    textInput: null,
  }

  okButton = (
    <View style={styles.buttons}>
      <Button
        type="text"
        title={t('action')}
        onPress={() => {
          this.props.onOkPress(this.state.textInput)
          this.setState({ textInput: null })
        }}
      />
    </View>
  )

  cancelButton = (
    <Button
      type="text"
      title={t('cancel')}
      onPress={this.props.onCancelPress}
    />
  )

  confirmButtons = (
    <View style={styles.buttons}>
      {this.cancelButton}
      {this.okButton}
    </View>
  )

  inputButtons = (
    <Fragment>
      <TextInput
        noSpacing
        placeholder="input here..."
        name="input"
        onChangeText={(text) => this.setState({ textInput: text })}
      />
      {this.confirmButtons}
    </Fragment>
  )

  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 (
      <Modal
        transparent
        animationType="fade"
        visible={isVisible}
        onRequestClose={onRequestClose}
      >
        <View style={styles.container}>
          <View style={styles.alertContainer}>
            <View stlye={styles.textContainer}>
              <H3 style={styles.title}>{title}</H3>
              <Text>{message}</Text>
            </View>
            {this.renderButtons(type)}
          </View>
        </View>
      </Modal>
    )
  }
}

Answer 1

This post from an Airbnb dev recommends avoiding simulate and invoking the props directly.

Applying that approach:

test('input type returns a text', () => {
  const okPressFunction = jest.fn()
  const obj = (
    shallow(
      <DialogBox
        title='random title'
        message={lorem}
        type='input'
        isVisible
        onOkPress={okPressFunction}
        onRequestClose={noop}
      />
    )
  )
  obj.find('TextInput').props().onChangeText('hello');
  obj.find('Button').at(1).props().onPress();
  expect(okPressFunction).toHaveBeenCalledWith('hello');  // SUCCESS
});