Detox - 测试模式在 React Native 中的可见性

Posted

技术标签:

【中文标题】Detox - 测试模式在 React Native 中的可见性【英文标题】:Detox - Testing visibility of modal in react native 【发布时间】:2018-10-11 12:54:19 【问题描述】:

我们正在使用 detox 编写反应原生应用程序的 E2E 测试,其中我们有一个案例需要测试按钮点击后是否出现模式。

但 detox 无法使用给定的 testID 识别模态,认为模态按预期打开。使用 detox 在 reactnative 中测试模态是否有不同的方法?

下面是模态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    
);

【问题讨论】:

【参考方案1】:

React Native 的 Modal 组件创建了一个视图控制器,它管理原生级别的子视图的渲染。不幸的是,它不会传递 testID,所以我发现最好的方法是将模式的内容包装在 &lt;View&gt; 中,并将 testID 属性传递给该组件。在你的情况下,你可以这样做:

<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>

【讨论】:

以上是关于Detox - 测试模式在 React Native 中的可见性的主要内容,如果未能解决你的问题,请参考以下文章

在 Expo React Native 项目中使用 Detox 运行测试时出错

使用 Detox 在 Android React Native 应用程序中通过 Chrome 弹出测试登录

React Native Detox - 运行特定的测试文件

使用 detox 通过 ID 测试查找元素 - React Native

在 e2e 测试中的某个点开始使用 Detox 在 react native

获取 ReferenceError:在 react-native ios 上运行 detox 测试时未定义设备