首页 > 解决方案 > 如何为返回 ListItem 并具有多个道具的 React Native 组件编写单元测试。我正在努力这样做。有什么建议么?

问题描述

我是一个新人,我的任务是为以下组件编写单元测试。问题是有多个道具和一些条件以及基于我需要显示切换的一些条件。我不明白如何测试它?是否通过虚拟数据或如何传递?

type myProps = {
disabled?: boolean,
title?: string,
onClick: () => void | Promise<void>,
icon?: string,
text?: string,
icon2?: string,
toggleButton?: boolean,
value?: boolean,
onValueChange?: boolean,
thumbColor?: string,
trackColor?: string,
};

export const myList = ({
disabled = false,
title,
onClick,
icon1,
text,
icon2,
toggleButton,
value = false,
onValueChange = false,
thumbColor,
trackColor,
}: myProps) => {
return (
    <ListItem onPress={onClick} disabled={disabled}>
        {leftIcon && (
            <Icon name={icon1} color={lightGray} style={styles.itemLeftIcon} size={IconSize} />
        )}
        <ListItem.Content>
            <ListItem.Title>{title}</ListItem.Title>
        </ListItem.Content>
        {toggleButton ? (
            <Switch
                value={value}
                onValueChange={onValueChange}
                thumbColor={thumbColor}
                trackColor={trackColor}
                disabled={disabled}
            />
        ) : (
            <Text style={styles.itemRightText} numberOfLines={2} ellipsizeMode={'tail'}>
                {text}
            </Text>
        )}
        {icon2 && (
            <Icon name={icon2} color={lightGray} style={styles.itemRightIcon} size= 
      {IconSize} />
        )}
    </ListItem>
);
};

标签: reactjstypescriptreact-nativeunit-testingjestjs

解决方案


推荐阅读