UI Tests with react native. How to fix Timestamped Event Matching Error: Failed to find matching element

Question

I am trying to integrate UI tests in an quite big react native project. But as soon as i want to record the ui test i get the warning

Timestamped Event Matching Error: Failed to find matching element

This is the ui element i am hitting.

<TouchableOpacity style={containerStyle}
                  onPress={this.props.onPress}
                  accessibilityLabel='back_button_touchable'
                  accessible={true}
                  testID='back_button_touchable'
                  underlayColor='#99d9f4'>
                <Image style={iconStyle} source={require('../white-arrow.png')}/>
                <Text style={styles.text}>{this.props.text}</Text>
</TouchableOpacity>

I just set up a fresh react native project and was trying to get the ui tests running, and it was fine. So this lead me to the question that the element retrieval is somehow blocked by existing code / build setup.

Any ideas what could disable or block the ui tests?

Answer 1

For anyone else looking for an answer for this - I found that Touchable elements in RN have an issue with the UI tests side of things.

If you set accessible={false} on the Touchable, then the testID works on the child Text & View elements when recording.

<TouchableOpacity onPress={onPressFn} accessible={false}>
  <View style={styles.buttonContainer} testID="button">
    <Text style={styles.buttonText}>
      {children}
    </Text>
  </View>
</TouchableOpacity>