Question

*********************更新************************* ********************

我有一个要尝试测试的DialogBox组件。我正在尝试在DialogBox中设置子组件（TextInput）的'value'属性。我已经尝试了几乎所有内容，但似乎没有任何效果。有人可以帮我吗？

upload_to

console.log（obj.html（））转储为：

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

我正在测试一个ui测试方案，其中用户首先在文本Input中输入一个值，然后单击最后一个按钮（“操作”），然后像回调函数一样返回输入值。但是，首先我需要设置文本Input的值。我有一份通过官方文档获得的信息，还有许多没有有意义帮助的线程。

对话框代码：

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

Answer 1

来自Airbnb开发人员的

This post建议避免使用simulate并直接调用道具。

应用该方法：

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

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

1 个答案: