React native 如何使用jest在组件上测试功能?

React native 如何使用jest在组件上测试功能?,react-native,React Native,我正在使用react native,但我有一个问题:当我尝试测试组件时,我不知道如何在props上测试函数 我正在使用react钩子,所以我的组件的名称是CardData,所以当你按下CollapseHeader时,组件会显示更多信息,就像手风琴一样,所以在onToggle={(isCollapsed)=>changeCollapsed(isCollapsed)}中,我调用一个函数,此函数等待一个参数:boolean isCollapsed是当折叠打开或关闭时的值,因此isCollapsed返回

我正在使用react native,但我有一个问题:当我尝试测试组件时,我不知道如何在props上测试函数

我正在使用react钩子,所以我的组件的名称是
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);
    }