React native 如何使用jest在组件上测试功能?
我正在使用react native,但我有一个问题:当我尝试测试组件时,我不知道如何在props上测试函数 我正在使用react钩子,所以我的组件的名称是React native 如何使用jest在组件上测试功能?,react-native,React Native,我正在使用react native,但我有一个问题:当我尝试测试组件时,我不知道如何在props上测试函数 我正在使用react钩子,所以我的组件的名称是CardData,所以当你按下CollapseHeader时,组件会显示更多信息,就像手风琴一样,所以在onToggle={(isCollapsed)=>changeCollapsed(isCollapsed)}中,我调用一个函数,此函数等待一个参数:boolean isCollapsed是当折叠打开或关闭时的值,因此isCollapsed返回
CardData
,所以当你按下CollapseHeader时,组件会显示更多信息,就像手风琴一样,所以在onToggle={(isCollapsed)=>changeCollapsed(isCollapsed)}
中,我调用一个函数,此函数等待一个参数:boolean isCollapsed是当折叠打开或关闭时的值,因此isCollapsed返回true或false,因此我需要在用户按下折叠时测试该更改,isCollapsed将状态更改为true,当折叠关闭时,isCollapsed将状态更改为false,这是我需要创建的测试
return (
<Card style={styles.cardFather}>
<Collapse onToggle={(isCollapsed: boolean) => changeCollapsed(isCollapsed)}>
<CollapseHeader style={styles.baseCard}>
<View style={styles.contentView}>
<Text style={styles.numberOrder}>94378331</Text>
<Text>JOE LOCKWOOD</Text>
<Icon type="FontAwesome" name="file-text" style={styles.fileIcon} />
<Icon type="FontAwesome5" name="truck" style={styles.truckIcon} />
<Icon type="FontAwesome5" name="shopping-cart" style={styles.shoopingIcon} />
{!isCollapsed ? (
<Icon type="FontAwesome5" name="chevron-down" style={styles.chevronIcon} />
) : (
<Icon type="FontAwesome5" name="chevron-up" style={styles.chevronIcon} />
)}
</View>
</CollapseHeader>
<CollapseBody>
<View style={styles.baseOrderPlace}>
<Icon type="AntDesign" name="clockcircle" style={styles.clockOrderPlace} />
<Text style={styles.titleOrderPlace}>Order placed</Text>
<Text style={styles.timeOrderPlace}>4 hours ago</Text>
</View>
<View style={styles.baseSpecial}>
<Icon type="FontAwesome" name="file-text" style={styles.fileIconSpecial} />
<Text style={styles.titleSpecial}>Special instructions</Text>
<Text style={styles.textSpecial}>
Lorem ipsum dolor sit amet, consectetur adipiscing elit. Nam sed varius nisi, id tincidunt
ligula. Suspendisse vestibulum erat molestie elit suscipit, volutpat pellentesque dui
euismod.
</Text>
</View>
</CollapseBody>
</Collapse>
</Card>
);
我没有任何测试
const [isCollapsed, setIsCollapsed] = useState(false);
function changeCollapsed(collapsed: boolean) {
if (collapsed) {
setIsCollapsed(true);
} else {
setIsCollapsed(false);
}