From c4e40b81c01d061c189a7d28a4f56a588c3d1aea Mon Sep 17 00:00:00 2001
From: Bruno Castro <bruno.castro@codeminer42.com>
Date: Wed, 31 Mar 2021 17:34:47 -0700
Subject: [PATCH] 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 4b935ae95f09e4a1eb1e5ac8089eb258222a0f8b 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
---
 .../Touchable/TouchableHighlight.js           |  6 +++-
 .../Touchable/TouchableNativeFeedback.js      |  2 ++
 .../Components/Touchable/TouchableOpacity.js  |  6 +++-
 .../Touchable/TouchableWithoutFeedback.js     |  2 ++
 .../__tests__/TouchableHighlight-test.js      | 19 ++++++----
 .../__tests__/TouchableNativeFeedback-test.js | 35 +++++++++++++++++++
 .../__tests__/TouchableOpacity-test.js        | 33 +++++++++++++++++
 .../TouchableWithoutFeedback-test.js          | 35 +++++++++++++++++++
 .../TouchableNativeFeedback-test.js.snap      | 17 +++++++++
 .../TouchableOpacity-test.js.snap             | 26 ++++++++++++++
 .../TouchableWithoutFeedback-test.js.snap     | 17 +++++++++
 11 files changed, 189 insertions(+), 9 deletions(-)
 create mode 100644 Libraries/Components/Touchable/__tests__/TouchableNativeFeedback-test.js
 create mode 100644 Libraries/Components/Touchable/__tests__/TouchableOpacity-test.js
 create mode 100644 Libraries/Components/Touchable/__tests__/TouchableWithoutFeedback-test.js
 create mode 100644 Libraries/Components/Touchable/__tests__/__snapshots__/TouchableNativeFeedback-test.js.snap
 create mode 100644 Libraries/Components/Touchable/__tests__/__snapshots__/TouchableOpacity-test.js.snap
 create mode 100644 Libraries/Components/Touchable/__tests__/__snapshots__/TouchableWithoutFeedback-test.js.snap

diff --git a/Libraries/Components/Touchable/TouchableHighlight.js b/Libraries/Components/Touchable/TouchableHighlight.js
index 52ed550b38..c0faac9bdd 100644
--- a/Libraries/Components/Touchable/TouchableHighlight.js
+++ b/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;
diff --git a/Libraries/Components/Touchable/TouchableNativeFeedback.js b/Libraries/Components/Touchable/TouchableNativeFeedback.js
index 739ea4c15a..e18b625ab8 100644
--- a/Libraries/Components/Touchable/TouchableNativeFeedback.js
+++ b/Libraries/Components/Touchable/TouchableNativeFeedback.js
@@ -313,4 +313,6 @@ const getBackgroundProp =
           : {nativeBackgroundAndroid: background}
     : (background, useForeground) => null;
 
+TouchableNativeFeedback.displayName = 'TouchableNativeFeedback';
+
 module.exports = TouchableNativeFeedback;
diff --git a/Libraries/Components/Touchable/TouchableOpacity.js b/Libraries/Components/Touchable/TouchableOpacity.js
index 7a17eef9a2..6ae8cd850f 100644
--- a/Libraries/Components/Touchable/TouchableOpacity.js
+++ b/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;
diff --git a/Libraries/Components/Touchable/TouchableWithoutFeedback.js b/Libraries/Components/Touchable/TouchableWithoutFeedback.js
index 0a9ec55183..2f06d41031 100755
--- a/Libraries/Components/Touchable/TouchableWithoutFeedback.js
+++ b/Libraries/Components/Touchable/TouchableWithoutFeedback.js
@@ -157,4 +157,6 @@ function createPressabilityConfig(props: Props): PressabilityConfig {
   };
 }
 
+TouchableWithoutFeedback.displayName = 'TouchableWithoutFeedback';
+
 module.exports = TouchableWithoutFeedback;
diff --git a/Libraries/Components/Touchable/__tests__/TouchableHighlight-test.js b/Libraries/Components/Touchable/__tests__/TouchableHighlight-test.js
index 2f2b0ff310..f25f4150de 100644
--- a/Libraries/Components/Touchable/__tests__/TouchableHighlight-test.js
+++ b/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>,
diff --git a/Libraries/Components/Touchable/__tests__/TouchableNativeFeedback-test.js b/Libraries/Components/Touchable/__tests__/TouchableNativeFeedback-test.js
new file mode 100644
index 0000000000..766912665d
--- /dev/null
+++ b/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',
+    );
+  });
+});
diff --git a/Libraries/Components/Touchable/__tests__/TouchableOpacity-test.js b/Libraries/Components/Touchable/__tests__/TouchableOpacity-test.js
new file mode 100644
index 0000000000..77a0575b7e
--- /dev/null
+++ b/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');
+  });
+});
diff --git a/Libraries/Components/Touchable/__tests__/TouchableWithoutFeedback-test.js b/Libraries/Components/Touchable/__tests__/TouchableWithoutFeedback-test.js
new file mode 100644
index 0000000000..1812253fef
--- /dev/null
+++ b/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',
+    );
+  });
+});
diff --git a/Libraries/Components/Touchable/__tests__/__snapshots__/TouchableNativeFeedback-test.js.snap b/Libraries/Components/Touchable/__tests__/__snapshots__/TouchableNativeFeedback-test.js.snap
new file mode 100644
index 0000000000..27c69f4930
--- /dev/null
+++ b/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>
+`;
diff --git a/Libraries/Components/Touchable/__tests__/__snapshots__/TouchableOpacity-test.js.snap b/Libraries/Components/Touchable/__tests__/__snapshots__/TouchableOpacity-test.js.snap
new file mode 100644
index 0000000000..c1a2ee3501
--- /dev/null
+++ b/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>
+`;
diff --git a/Libraries/Components/Touchable/__tests__/__snapshots__/TouchableWithoutFeedback-test.js.snap b/Libraries/Components/Touchable/__tests__/__snapshots__/TouchableWithoutFeedback-test.js.snap
new file mode 100644
index 0000000000..27c69f4930
--- /dev/null
+++ b/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>
+`;