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,所以我发现最好的方法是将模式的内容包装在 <View>
中,并将 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