0

我创建了一个卡片组件并为此编写了测试用例，但是在查看测试覆盖率时，我发现该组件的分支覆盖率为 50%。测试用例中缺少的部分是 onPress 函数中 else 部分的测试。

Q1。我怎样才能测试这个缺失的部分并增加我的覆盖率？

Q2。我们如何单独测试 Card 组件的 onPress 功能？

const Card = (props) => {

    const onPress = () => {
        if (props.onPress) props.onPress();
    };

    return (<TouchableWithoutFeedback onPress={onPress}>
        <View style={[Style.body, { width: props.width, height: props.height }]}>
            <ImageBackground source={{ uri: props.imageUrl }} style={{ width: '100%', height: '100%' }} />
        </View>
    </TouchableWithoutFeedback>);
};

export default Card;
4

1 回答 1

2

你有两种情况：

  1. 定义了 props.onPress，所以就到了 if 下的代码。
  2. props.onPress 没有定义，所以 if 下的代码也没有定义。

道具是您控制它的变量，因此您可以根据需要/需要传递道具。只需通过涵盖这两个场景的道具，您就可以很好地满足所需的条件。

我认为您不需要单独测试 onPress 功能。但另一种方法是从组件中删除逻辑。

export const onPress = (props) => () => {
    if (props.onPress) {
        props.onPress()
    }
}

const Card = (props) => {

    return (<TouchableWithoutFeedback onPress={onPress(props)}>
        <View style={[Style.body, { width: props.width, height: props.height }]}>
            <ImageBackground source={{ uri: props.imageUrl }} style={{ width: '100%', height: '100%' }} />
        </View>
    </TouchableWithoutFeedback>);
};

export default Card;

现在您已经导出了 onPress 函数，您可以根据需要进行测试。

于 2020-08-30T18:40:13.140 回答