TouchableOpacity not returned (some other Native events too)

[abanik0831]

Versions

react: 16.8.6
react-native: 0.59.4
react-native-testing-library: 1.7.0
react-test-renderer: 16.8.6

Description

debug, snapshot not returning <TouchableOpacity>.

Sample test written:

 render(
    <TouchableOpacity onPress={this.onPress} disabled={true}>
      <View>
        <Text>Hello world!</Text>
      </View>
    </TouchableOpacity>
  )

Expected output

<TouchableOpacity
  onPress={[Function bound fn]}
  disabled={true}
>
  <View>
    <Text>Hello world!</Text>
  </View>
</TouchableOpacity>

Output returned:

<View
  accessible={true}
  isTVSelectable={true}
  onResponderGrant={[Function]}
  onResponderMove={[Function]}
  onResponderRelease={[Function]}
  onResponderTerminate={[Function]}
  onResponderTerminationRequest={[Function]}
  onStartShouldSetResponder={[Function]}
  style={
    Object {
      "opacity": 1,
    }
  }
>
  <View>
    <Text>
      Hello world
    </Text>
  </View>
</View>

Reproducible Demo

run the following test:

const { debug } = render(
    <TouchableOpacity onPress={this.onPress} disabled={true}>
      <View>
        <Text>He World</Text>
      </View>
    </TouchableOpacity>
  )
  debug()

[abanik0831]

any idea what's going on? This is the first time i've integrated with react-native-testing-library and seeing this issue. Any help will be appreciated.

[abanik0831]

what i'm really looking to test here is if the TouchableOpacity is disabled or not..

[thymikee]

Hey @abanik0831! The issue you deal with is quite similar to #28 (comment). Please read through it.

What happens: TouchableOpacity is implemented using View in React Native, that's why you see the View in hierarchy. Additionally, the implementation of View is mocked inside react-native Jest preset and unfortunately this mock is not complete and doesn't include the logic to disable onPress when disabled is passed to Touchable*.

Since this is common pain point, we may introduce a special handling for some elements, like Touchables, to mitigate that. Ideally I'd like to fix the mock in react-native preset which is the correct solution to the problem.