Question

我们正在使用排毒来编写反应原生应用的E2E测试，其中我们有一个案例需要测试按钮点击后是否出现模态。

但是，排毒无法识别模态与给定的testID认为模态按预期打开。使用排毒方法在反应中是否有不同的测试模式？

以下是模态JSX

<Modal
    testID="loadingModal"
    animationType="none"
    transparent
    visible={loading}
    onRequestClose={() => {}}
  >
    <View style={styles.modalContainer}>
      <View style={styles.loginModal}>
        <ActivityIndicator
          animating
          size="large"
          color="#00e0ff"
        />
        <Text style={styles.login}>Logging in...</Text>
      </View>
    </View>
  </Modal>

以下是测试模态

可见性的代码

it('should have welcome screen', async () => {      
    ....

    await element(by.text('CONTINUE')).tap();
    await waitFor(element(by.id('loadingModal'))).toBeVisible().withTimeout(5000);
    await expect(element(by.id('loadingModal'))).toBeVisible(); // this always fails    
});

Answer 1

React Native的Modal组件创建一个视图控制器，用于管理本机级别的子视图的呈现。不幸的是，它没有传递testID，所以我发现最好的方法是将模态的内容包装在<View>中，并将testID prop传递给该组件。在您的情况下，您可以这样做：

<Modal
    animationType="none"
    transparent
    visible={loading}
    onRequestClose={() => {}}
>
    <View 
        style={styles.modalContainer}
        testID="loadingModal"         // Just move the testID to this element
    >
        <View style={styles.loginModal}>
            <ActivityIndicator
                animating
                size="large"
                color="#00e0ff"
            />
        <Text style={styles.login}>Logging in...</Text>
    </View>
</View>

排毒 - 测试反应原生模态的可见性

1 个答案: