javascript - 编写一个测试来改变子组件的 prop
问题描述
*********************更新**************************** *****************
我有一个正在尝试测试的 DialogBox 组件。我正在尝试在 DialogBox 中设置子组件(TextInput)的“值”道具。我几乎尝试了所有方法,但似乎没有任何效果。有人能帮我吗?
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 测试场景,其中用户首先在文本 Input 中输入一个值,然后单击最后一个按钮('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 开发人员的这篇文章建议避免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
});
推荐阅读
- discord.js - Discord.js 的参数
- linux - GNU Parallel 面临静默退出和无效选项错误
- html - 表单未发布所有选中的输入复选框
- java - 如何在预序遍历中打印 AVLTree 的条目
- netlogo - 如何找到两个补丁之间的距离?
- perl - 在 CentOS 7 上安装 Perl 模块的问题
- c++ - 移动到 shared_ptr 后如何调用 std::function
- c++ - 我的设置器可以获取参数,但实际上不能?
- node.js - 消息:“在配置中缺少凭据”,在initialAuth() 中,我缺少哪些凭据?
- java - 在 Java 中实现数据透视表