javascript - 编写测试以更改子组件的 prop

Question

*********************已更新************************ ********************

我有一个正在尝试测试的 DialogBox 组件。我正在尝试在 DialogBox 中设置子组件(TextInput)的“值” Prop 。我几乎尝试了所有方法，但似乎没有任何效果。有人可以帮助我吗？

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'))
  })
})

console.log(obj.html()) 转储是:

  <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>

我正在测试一个 ui 测试场景，在该场景中，用户首先在文本输入中输入一个值，然后单击最后一个按钮(“操作”)后，输入值将作为回调函数返回。但是，首先我需要设置文本输入的值。我通过官方文档和许多线程获得了一个，但没有任何有意义的帮助。

对话框代码:

   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来自 Airbnb 开发人员的建议避免模拟并直接调用 Prop 。

应用该方法:

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
});