首页 > 解决方案 > 如何在 .map 循环笑话测试库中覆盖 onPress 的 touchableOpacity

问题描述

我正在尝试使用 Jest 和测试库在 React Native 中编写测试用例。我有一个.map函数,它使用TouchableOpacity.

{data.map((item, index) => (
    <SafeAreaView key={index}>
        <ItemView data={item} index={index} />
        {index >= data.length - 1 ? (
            <View style={{ marginTop: 16 }} />
        ) : (
            <View style={styles.itmSeperator} />
        )}
    </SafeAreaView>
))}

ItemView 看起来像

const ItemView = ({ data, index }) => (
    <TouchableOpacity
        testID="TouchablePress"
        onPress={() => onPress(data)}
        style={{
            alignItems: "center",
            paddingVertical: 16,
        }}
    >
        <Text style={styles.text}>{data.name}</Text>
    </TouchableOpacity>
);

对于上述情况,如果我 fireEvent(getByTestId("TouchablePress"), "press"); 在测试文件中调用,则测试正在获取文件,说明找到了具有相同 ID“TouchablePress”的多个组件。

关于如何在不失败的情况下覆盖此测试的任何建议?

标签: react-nativejestjsreact-native-testing-library

解决方案


推荐阅读