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

次の 2 つのシナリオがあります。

  1. props.onPress が定義されているので、if の下のコードに到達します。
  2. props.onPress が定義されていないため、if の下のコードは定義されていません。

props はユーザーが制御する変数なので、必要に応じて props を渡すことができます。この 2 つのシナリオをカバーする小道具を渡すだけで、必要な条件が整います。

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 に答える