0

We are using detox to write E2E testing of a react native app where we have a case which needs to test if a modal appears after a button tap.

But detox was not able to identify modal with the given testID thought the modal opens as expected. Is there a different way test modal in reactnative using detox?

Below is the modal 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>

And below is the code to test the visibility of 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    
});
arjun
  • 3,514
  • 4
  • 27
  • 48

1 Answers1

3

React Native's Modal component creates a view controller which manages the rendering of child views on the native level. Unfortunately, it doesn't pass down testID, so the best way I've found is to wrap the contents of the modal in a <View>, and pass the testID prop to that component. In your case, you could do: 

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

Sean Wcisel
  • 56
  • 5