RN v0.62.0-rc.0 - Touchable[Highlight|WithoutFeedback] are rendering into a component without name under jest

I am trying to migrate from 0.59.3 to 0.62 rc0

However, I got a strange state of the app. Touchable[Highlight|WithoutFeedback] became to render without display name under jest (see snippets below).

I have the following control:

function backspaceIcon(backspacer: Backspacer, iconProps: IconProps) {
  return (
    <TouchableHighlight
      activeOpacity={1}
      underlayColor="#FFF"
      onShowUnderlay={() => (backspacer.backspaceUnderlay = true)}
      onHideUnderlay={() => (backspacer.backspaceUnderlay = false)}
      onPressIn={() => backspacer.backspace()}
      delayLongPress={500}
      onLongPress={() => backspacer.startBackspace()}
      onPressOut={() => backspacer.endBackspace()}
      style={styles.backspace}
      accessibilityRole="button"
      accessibilityLabel="delete"
    >
      <Icon
        {...iconProps}
        color={backspacer.backspaceUnderlay ? '#999' : '#333'}
      />
    </TouchableHighlight>
  )
}

Snapshot before migration:

<TouchableHighlight
  accessibilityLabel="delete"
  accessibilityRole="button"
  activeOpacity={1}
  delayLongPress={500}
  onHideUnderlay={[Function]}
  onLongPress={[Function]}
  onPressIn={[Function]}
  onPressOut={[Function]}
  onShowUnderlay={[Function]}
  style={
    Object {
      "alignItems": "center",
      "borderRadius": 15,
      "display": "flex",
      "height": 60,
      "justifyContent": "center",
      "width": 60,
    }
  }
  underlayColor="#FFF"
>
  <View
    color="#333"
    name="ios-backspace"
    size={30}
  />
</TouchableHighlight>

Snapshot after migration (no TouchableHighlight name):

<
  accessibilityLabel="delete"
  accessibilityRole="button"
  activeOpacity={1}
  delayLongPress={500}
  onHideUnderlay={[Function]}
  onLongPress={[Function]}
  onPressIn={[Function]}
  onPressOut={[Function]}
  onShowUnderlay={[Function]}
  style={
    Object {
      "alignItems": "center",
      "borderRadius": 15,
      "display": "flex",
      "height": 60,
      "justifyContent": "center",
      "width": 60,
    }
  }
  underlayColor="#FFF"
>
  <View
    color="#333"
    name="ios-backspace"
    size={30}
  />
</>

The same thing happens to TouchableWithoutFeedback. However, other controls look fine.

React Native version: 0.62 rc0

Steps To Reproduce

Not sure.

Describe what you expected to happen: TouchableHighlight rendered to TouchableHighlight TouchableWithoutFeedback rendered to TouchableWithoutFeedback

[sebk]

Isn’t a simpler version enough:

jest.mock('react-native/Libraries/Components/Touchable/TouchableOpacity', () => 'TouchableOpacity');

Currently for my snapshot tests this line seems to be enough. Do you see any problem with that?

[askel4dd]

Came up with this, snapshots will be changed a little, but events tests will pass:

jest.mock('react-native/Libraries/Components/Touchable/TouchableOpacity', () => {
    const TouchableOpacity = jest.requireActual('react-native/Libraries/Components/Touchable/TouchableOpacity');

    TouchableOpacity.displayName = 'TouchableOpacity';

    return TouchableOpacity
});

jest.mock('react-native/Libraries/Components/Touchable/TouchableHighlight', () => {
    const TouchableHighlight = jest.requireActual('react-native/Libraries/Components/Touchable/TouchableHighlight');

    TouchableHighlight.displayName = 'TouchableHighlight';

    return TouchableHighlight
});