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

[devproivansurzhenko]

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

[devproivansurzhenko]

Interesting... I have replaced the following line

react-native/Libraries/Components/Touchable/TouchableHighlight.js

Line 380 in 5b48167

module.exports = (React.forwardRef((props, hostRef) => (

with

module.exports = TouchableHighlight

and now it works fine.

Those lines are introduced there: 7c01172

@yungsters

[yungsters]

@scotthovestadt is working on a fix to how Jest renders React.forwardRef in snapshots.

[devproivansurzhenko]

@scotthovestadt Am I right that PR jestjs/jest#9422 is what I am looking for?

[devproivansurzhenko]

Ah.. no.. it is not. Sorry

[MarianBe]

I have the same problems here, since 0.62.0 all of my tests with TouchableHighlight or TouchableOpacity-Components now fail.

[devproivansurzhenko]

@yungsters @scotthovestadt Is there any link that we can use to track it? or even help with the fix.

[halilb]

This problem has broken our native-testing-librarytests after upgrading to react-native 0.62: testing-library/native-testing-library#113

I applied a temp fix by mocking TouchableOpacity:

jest.mock(
  'react-native/Libraries/Components/Touchable/TouchableOpacity.js',
  () => {
    const { TouchableHighlight } = require('react-native')
    const MockTouchable = props => {
      return <TouchableHighlight {...props} />
    }
    MockTouchable.displayName = 'TouchableOpacity'

    return MockTouchable
  }
)

[antpuleo2586]

@halilb Thanks for your snippet, but I had to modify slightly because I have the same issue with TouchableHighlight. All tests now passing though:

jest.mock('react-native/Libraries/Components/Touchable/TouchableOpacity.js', () => {
    const {View} = require('react-native');
    const MockTouchable = (props) => {
        return <View {...props} />;
    };

    MockTouchable.displayName = 'TouchableOpacity';

    return MockTouchable;
});

jest.mock('react-native/Libraries/Components/Touchable/TouchableHighlight.js', () => {
    const {View} = require('react-native');
    const MockTouchable = (props) => {
        return <View {...props} />;
    };

    MockTouchable.displayName = 'TouchableHighlight';

    return MockTouchable;
});

[halilb]

@halilb Thanks for your snippet, but I had to modify slightly because I have the same issue with TouchableHighlight. All tests now passing though:

Oh I've forgotten adding MockTouchable.displayName = 'TouchableOpacity' line there. Thanks for the feedback. Mocking that with View also worked for me.

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