*********************更新**************************** *****************
我有一个DialogBox组件,我试图测试。我试图在DialogBox中设置子组件(TextInput)的'value'支柱。我几乎尝试了所有东西,但似乎没有任何工作。有人能帮我吗?
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测试场景,其中用户首先在文本输入中输入一个值,并且一旦点击最后一个按钮('action'),就像在回调函数中一样返回输入值。但是,首先我需要设置文本输入的值。我有一个通过官方文档和许多线程没有任何有意义的帮助。
对话框代码:
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>
)
}
}
来自Airbnb dev的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
});