Question

我正在使用react-native，但是有一个问题：当我尝试测试组件时，我不知道如何在道具上测试功能。

我正在使用react钩子，所以我的组件的名称为CardData，因此当您在CollapseHeader中的onPress上，该组件向我显示了更多信息，就像手风琴一样，因此在onToggle={(isCollapsed) => changeCollapsed(isCollapsed)}中，我调用一个函数，该函数等待一个参数：布尔值isCollapsed是折叠打开时的值o关闭，所以isCollapsed返回true或false，所以我需要测试用户按下折叠时的更改，isCollapsed将状态更改为true和当合拢折叠关闭时，isCollapased将状态更改为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);
    }

我没有任何考试。

如何用笑话测试组件的功能？

0 个答案: