feat: add displayName to touchables (#29531)

Summary:
Since TouchableHighlight and TouchableOpacity are being exported using `forwardRef`, it's messing up jest's snapshots and some matchers.
This commit 4b935ae95f fixed this for components being mocked on [setup.js](https://github.com/facebook/react-native/blob/master/jest/setup.js). However, these Touchables aren't being mocked.

It resolves https://github.com/facebook/react-native/issues/27721

## Changelog

[General] [Added] - Add displayName to TouchableHighlight and TouchableOpacity

Pull Request resolved: https://github.com/facebook/react-native/pull/29531

Test Plan: Check the new snapshots.

Reviewed By: kacieb

Differential Revision: D27485269

Pulled By: yungsters

fbshipit-source-id: ba2082a4ae9f97ebe93ba92971d58c9195bdf26d

Libraries/Components/Touchable/TouchableHighlight.js

@@ -357,9 +357,13 @@ class TouchableHighlight extends React.Component<Props, State> {
   }
 }
 
-module.exports = (React.forwardRef((props, hostRef) => (
+const Touchable = (React.forwardRef((props, hostRef) => (
   <TouchableHighlight {...props} hostRef={hostRef} />
 )): React.AbstractComponent<
   $ReadOnly<$Diff<Props, {|hostRef: React.Ref<typeof View>|}>>,
   React.ElementRef<typeof View>,
 >);
+
+Touchable.displayName = 'TouchableHighlight';
+
+module.exports = Touchable;

Libraries/Components/Touchable/TouchableNativeFeedback.js

@@ -313,4 +313,6 @@ const getBackgroundProp =
           : {nativeBackgroundAndroid: background}
     : (background, useForeground) => null;
 
+TouchableNativeFeedback.displayName = 'TouchableNativeFeedback';
+
 module.exports = TouchableNativeFeedback;

Libraries/Components/Touchable/TouchableOpacity.js

@@ -265,6 +265,10 @@ class TouchableOpacity extends React.Component<Props, State> {
   }
 }
 
-module.exports = (React.forwardRef((props, ref) => (
+const Touchable = (React.forwardRef((props, ref) => (
   <TouchableOpacity {...props} hostRef={ref} />
 )): React.AbstractComponent<Props, React.ElementRef<typeof Animated.View>>);
+
+Touchable.displayName = 'TouchableOpacity';
+
+module.exports = Touchable;

Libraries/Components/Touchable/TouchableWithoutFeedback.js

@@ -157,4 +157,6 @@ function createPressabilityConfig(props: Props): PressabilityConfig {
   };
 }
 
+TouchableWithoutFeedback.displayName = 'TouchableWithoutFeedback';
+
 module.exports = TouchableWithoutFeedback;

Libraries/Components/Touchable/__tests__/TouchableHighlight-test.js

@@ -11,14 +11,15 @@
 'use strict';
 
 import * as React from 'react';
-import ReactTestRenderer from 'react-test-renderer';
 import Text from '../../../Text/Text';
 import View from '../../View/View';
 import TouchableHighlight from '../TouchableHighlight';
 
+const render = require('../../../../jest/renderer');
+
 describe('TouchableHighlight', () => {
   it('renders correctly', () => {
-    const instance = ReactTestRenderer.create(
+    const instance = render.create(
       <TouchableHighlight style={{}}>
         <Text>Touchable</Text>
       </TouchableHighlight>,
@@ -26,12 +27,16 @@ describe('TouchableHighlight', () => {
 
     expect(instance.toJSON()).toMatchSnapshot();
   });
+
+  it('has displayName', () => {
+    expect(TouchableHighlight.displayName).toEqual('TouchableHighlight');
+  });
 });
 
 describe('TouchableHighlight with disabled state', () => {
   it('should be disabled when disabled is true', () => {
     expect(
-      ReactTestRenderer.create(
+      render.create(
         <TouchableHighlight disabled={true}>
           <View />
         </TouchableHighlight>,
@@ -41,7 +46,7 @@ describe('TouchableHighlight with disabled state', () => {
 
   it('should be disabled when disabled is true and accessibilityState is empty', () => {
     expect(
-      ReactTestRenderer.create(
+      render.create(
         <TouchableHighlight disabled={true} accessibilityState={{}}>
           <View />
         </TouchableHighlight>,
@@ -51,7 +56,7 @@ describe('TouchableHighlight with disabled state', () => {
 
   it('should keep accessibilityState when disabled is true', () => {
     expect(
-      ReactTestRenderer.create(
+      render.create(
         <TouchableHighlight
           disabled={true}
           accessibilityState={{checked: true}}>
@@ -63,7 +68,7 @@ describe('TouchableHighlight with disabled state', () => {
 
   it('should overwrite accessibilityState with value of disabled prop', () => {
     expect(
-      ReactTestRenderer.create(
+      render.create(
         <TouchableHighlight
           disabled={true}
           accessibilityState={{disabled: false}}>
@@ -75,7 +80,7 @@ describe('TouchableHighlight with disabled state', () => {
 
   it('should disable button when accessibilityState is disabled', () => {
     expect(
-      ReactTestRenderer.create(
+      render.create(
         <TouchableHighlight accessibilityState={{disabled: true}}>
           <View />
         </TouchableHighlight>,

Libraries/Components/Touchable/__tests__/TouchableNativeFeedback-test.js

@@ -0,0 +1,35 @@
+/**
+ * Copyright (c) Facebook, Inc. and its affiliates.
+ *
+ * This source code is licensed under the MIT license found in the
+ * LICENSE file in the root directory of this source tree.
+ *
+ * @format
+ * @emails oncall+react_native
+ */
+
+'use strict';
+
+const React = require('react');
+const Text = require('../../../Text/Text');
+const TouchableNativeFeedback = require('../TouchableNativeFeedback');
+
+const render = require('../../../../jest/renderer');
+
+describe('TouchableWithoutFeedback', () => {
+  it('renders correctly', () => {
+    const instance = render.create(
+      <TouchableNativeFeedback style={{}}>
+        <Text>Touchable</Text>
+      </TouchableNativeFeedback>,
+    );
+
+    expect(instance.toJSON()).toMatchSnapshot();
+  });
+
+  it('has displayName', () => {
+    expect(TouchableNativeFeedback.displayName).toEqual(
+      'TouchableNativeFeedback',
+    );
+  });
+});

Libraries/Components/Touchable/__tests__/TouchableOpacity-test.js

@@ -0,0 +1,33 @@
+/**
+ * Copyright (c) Facebook, Inc. and its affiliates.
+ *
+ * This source code is licensed under the MIT license found in the
+ * LICENSE file in the root directory of this source tree.
+ *
+ * @format
+ * @emails oncall+react_native
+ */
+
+'use strict';
+
+const React = require('react');
+const Text = require('../../../Text/Text');
+const TouchableOpacity = require('../TouchableOpacity');
+
+const render = require('../../../../jest/renderer');
+
+describe('TouchableOpacity', () => {
+  it('renders correctly', () => {
+    const instance = render.create(
+      <TouchableOpacity style={{}}>
+        <Text>Touchable</Text>
+      </TouchableOpacity>,
+    );
+
+    expect(instance.toJSON()).toMatchSnapshot();
+  });
+
+  it('has displayName', () => {
+    expect(TouchableOpacity.displayName).toEqual('TouchableOpacity');
+  });
+});

Libraries/Components/Touchable/__tests__/TouchableWithoutFeedback-test.js

@@ -0,0 +1,35 @@
+/**
+ * Copyright (c) Facebook, Inc. and its affiliates.
+ *
+ * This source code is licensed under the MIT license found in the
+ * LICENSE file in the root directory of this source tree.
+ *
+ * @format
+ * @emails oncall+react_native
+ */
+
+'use strict';
+
+const React = require('react');
+const Text = require('../../../Text/Text');
+const TouchableWithoutFeedback = require('../TouchableWithoutFeedback');
+
+const render = require('../../../../jest/renderer');
+
+describe('TouchableWithoutFeedback', () => {
+  it('renders correctly', () => {
+    const instance = render.create(
+      <TouchableWithoutFeedback style={{}}>
+        <Text>Touchable</Text>
+      </TouchableWithoutFeedback>,
+    );
+
+    expect(instance.toJSON()).toMatchSnapshot();
+  });
+
+  it('has displayName', () => {
+    expect(TouchableWithoutFeedback.displayName).toEqual(
+      'TouchableWithoutFeedback',
+    );
+  });
+});

Libraries/Components/Touchable/__tests__/__snapshots__/TouchableNativeFeedback-test.js.snap

@@ -0,0 +1,17 @@
+// Jest Snapshot v1, https://goo.gl/fbAQLP
+
+exports[`TouchableWithoutFeedback renders correctly 1`] = `
+<Text
+  accessible={true}
+  focusable={false}
+  onClick={[Function]}
+  onResponderGrant={[Function]}
+  onResponderMove={[Function]}
+  onResponderRelease={[Function]}
+  onResponderTerminate={[Function]}
+  onResponderTerminationRequest={[Function]}
+  onStartShouldSetResponder={[Function]}
+>
+  Touchable
+</Text>
+`;

Libraries/Components/Touchable/__tests__/__snapshots__/TouchableOpacity-test.js.snap

@@ -0,0 +1,26 @@
+// Jest Snapshot v1, https://goo.gl/fbAQLP
+
+exports[`TouchableOpacity renders correctly 1`] = `
+<View
+  accessible={true}
+  collapsable={false}
+  focusable={false}
+  nativeID="animatedComponent"
+  onClick={[Function]}
+  onResponderGrant={[Function]}
+  onResponderMove={[Function]}
+  onResponderRelease={[Function]}
+  onResponderTerminate={[Function]}
+  onResponderTerminationRequest={[Function]}
+  onStartShouldSetResponder={[Function]}
+  style={
+    Object {
+      "opacity": 1,
+    }
+  }
+>
+  <Text>
+    Touchable
+  </Text>
+</View>
+`;

Libraries/Components/Touchable/__tests__/__snapshots__/TouchableWithoutFeedback-test.js.snap

@@ -0,0 +1,17 @@
+// Jest Snapshot v1, https://goo.gl/fbAQLP
+
+exports[`TouchableWithoutFeedback renders correctly 1`] = `
+<Text
+  accessible={true}
+  focusable={false}
+  onClick={[Function]}
+  onResponderGrant={[Function]}
+  onResponderMove={[Function]}
+  onResponderRelease={[Function]}
+  onResponderTerminate={[Function]}
+  onResponderTerminationRequest={[Function]}
+  onStartShouldSetResponder={[Function]}
+>
+  Touchable
+</Text>
+`;