From 10aadfc36af60b4116f144ef96695ba44d3b89bf Mon Sep 17 00:00:00 2001
From: James Ward <james@notjam.es>
Date: Mon, 21 Sep 2020 11:57:01 -0400
Subject: [PATCH] test: add test that exhibits the behavior causing #1665

---
 .../exports/Picker/__tests__/index-test.js    | 31 ++++++++++++++
 .../exports/Pressable/__tests__/index-test.js | 39 ++++++++++++++++++
 .../src/exports/Text/__tests__/index-test.js  | 31 ++++++++++++++
 .../exports/TextInput/__tests__/index-test.js | 31 ++++++++++++++
 .../__tests__/index-test.js                   | 40 +++++++++++++++++++
 .../TouchableOpacity/__tests__/index-test.js  | 39 ++++++++++++++++++
 .../__tests__/index-test.js                   | 40 +++++++++++++++++++
 .../src/exports/View/__tests__/index-test.js  | 31 ++++++++++++++
 8 files changed, 282 insertions(+)
 create mode 100644 packages/react-native-web/src/exports/Pressable/__tests__/index-test.js
 create mode 100644 packages/react-native-web/src/exports/TouchableHighlight/__tests__/index-test.js
 create mode 100644 packages/react-native-web/src/exports/TouchableOpacity/__tests__/index-test.js
 create mode 100644 packages/react-native-web/src/exports/TouchableWithoutFeedback/__tests__/index-test.js

diff --git a/packages/react-native-web/src/exports/Picker/__tests__/index-test.js b/packages/react-native-web/src/exports/Picker/__tests__/index-test.js
index 44dd6a1be..68f0d832c 100644
--- a/packages/react-native-web/src/exports/Picker/__tests__/index-test.js
+++ b/packages/react-native-web/src/exports/Picker/__tests__/index-test.js
@@ -83,5 +83,36 @@ describe('components/Picker', () => {
       const { container } = render(picker);
       expect(findSelect(container).value).toBe('22');
     });
+
+    test('ref function is called when ref changes', () => {
+      const refMock = jest.fn();
+      const otherRefMock = jest.fn();
+
+      const { rerender } = render(<Picker ref={refMock} />);
+      expect(refMock).toHaveBeenCalled();
+
+      rerender(<Picker ref={otherRefMock} />)
+      expect(otherRefMock).toHaveBeenCalled();
+    });
+
+    test('ref function is not called every render', () => {
+      const refMock = jest.fn();
+
+      const { rerender } = render(<Picker ref={refMock} />);
+      expect(refMock).toHaveBeenCalledTimes(1);
+
+      rerender(<Picker ref={refMock} />);
+      expect(refMock).toHaveBeenCalledTimes(1);
+    });
+
+    test('ref function is not called on prop changes', () => {
+      const refMock = jest.fn();
+
+      const { rerender } = render(<Picker ref={refMock} testID={'foo'} />);
+      expect(refMock).toHaveBeenCalledTimes(1);
+
+      rerender(<Picker ref={refMock} testID={'bar'} />);
+      expect(refMock).toHaveBeenCalledTimes(1);
+    });
   });
 });
diff --git a/packages/react-native-web/src/exports/Pressable/__tests__/index-test.js b/packages/react-native-web/src/exports/Pressable/__tests__/index-test.js
new file mode 100644
index 000000000..1384f0ada
--- /dev/null
+++ b/packages/react-native-web/src/exports/Pressable/__tests__/index-test.js
@@ -0,0 +1,39 @@
+/* eslint-env jasmine, jest */
+/* eslint-disable react/jsx-no-bind */
+
+import React from 'react';
+import { render } from '@testing-library/react';
+import TouchableOpacity from '../';
+
+describe('components/Pressable', () => {
+  test('ref function is called when ref changes', () => {
+    const refMock = jest.fn();
+    const otherRefMock = jest.fn();
+
+    const { rerender } = render(<TouchableOpacity ref={refMock} />);
+    expect(refMock).toHaveBeenCalled();
+
+    rerender(<TouchableOpacity ref={otherRefMock} />)
+    expect(otherRefMock).toHaveBeenCalled();
+  });
+
+  test('ref function is not called every render', () => {
+    const refMock = jest.fn();
+
+    const { rerender } = render(<TouchableOpacity ref={refMock} />);
+    expect(refMock).toHaveBeenCalledTimes(1);
+
+    rerender(<TouchableOpacity ref={refMock} />);
+    expect(refMock).toHaveBeenCalledTimes(1);
+  });
+
+  test('ref function is not called on prop changes', () => {
+    const refMock = jest.fn();
+
+    const { rerender } = render(<TouchableOpacity ref={refMock} testID={'foo'} />);
+    expect(refMock).toHaveBeenCalledTimes(1);
+
+    rerender(<TouchableOpacity ref={refMock} testID={'bar'} />);
+    expect(refMock).toHaveBeenCalledTimes(1);
+  });
+});
diff --git a/packages/react-native-web/src/exports/Text/__tests__/index-test.js b/packages/react-native-web/src/exports/Text/__tests__/index-test.js
index 4d7957d02..7f4589738 100644
--- a/packages/react-native-web/src/exports/Text/__tests__/index-test.js
+++ b/packages/react-native-web/src/exports/Text/__tests__/index-test.js
@@ -22,4 +22,35 @@ describe('components/Text', () => {
   });
 
   test('prop "numberOfLines"', () => {});
+
+  test('ref function is called when ref changes', () => {
+    const refMock = jest.fn();
+    const otherRefMock = jest.fn();
+
+    const { rerender } = render(<Text ref={refMock} />);
+    expect(refMock).toHaveBeenCalled();
+
+    rerender(<Text ref={otherRefMock} />)
+    expect(otherRefMock).toHaveBeenCalled();
+  });
+
+  test('ref function is not called every render', () => {
+    const refMock = jest.fn();
+
+    const { rerender } = render(<Text ref={refMock} />);
+    expect(refMock).toHaveBeenCalledTimes(1);
+
+    rerender(<Text ref={refMock} />);
+    expect(refMock).toHaveBeenCalledTimes(1);
+  });
+
+  test('ref function is not called on prop changes', () => {
+    const refMock = jest.fn();
+
+    const { rerender } = render(<Text ref={refMock} testID={'foo'} />);
+    expect(refMock).toHaveBeenCalledTimes(1);
+
+    rerender(<Text ref={refMock} testID={'bar'} />);
+    expect(refMock).toHaveBeenCalledTimes(1);
+  });
 });
diff --git a/packages/react-native-web/src/exports/TextInput/__tests__/index-test.js b/packages/react-native-web/src/exports/TextInput/__tests__/index-test.js
index 3b5dbd321..2a515ce4a 100644
--- a/packages/react-native-web/src/exports/TextInput/__tests__/index-test.js
+++ b/packages/react-native-web/src/exports/TextInput/__tests__/index-test.js
@@ -633,4 +633,35 @@ describe('components/TextInput', () => {
     const input = findInput(container);
     expect(input.value).toEqual(value);
   });
+
+  test('ref function is called when ref changes', () => {
+    const refMock = jest.fn();
+    const otherRefMock = jest.fn();
+
+    const { rerender } = render(<TextInput ref={refMock} />);
+    expect(refMock).toHaveBeenCalled();
+
+    rerender(<TextInput ref={otherRefMock} />)
+    expect(otherRefMock).toHaveBeenCalled();
+  });
+
+  test('ref function is not called every render', () => {
+    const refMock = jest.fn();
+
+    const { rerender } = render(<TextInput ref={refMock} />);
+    expect(refMock).toHaveBeenCalledTimes(1);
+
+    rerender(<TextInput ref={refMock} />);
+    expect(refMock).toHaveBeenCalledTimes(1);
+  });
+
+  test('ref function is not called on prop changes', () => {
+    const refMock = jest.fn();
+
+    const { rerender } = render(<TextInput ref={refMock} testID={'foo'} />);
+    expect(refMock).toHaveBeenCalledTimes(1);
+
+    rerender(<TextInput ref={refMock} testID={'bar'} />);
+    expect(refMock).toHaveBeenCalledTimes(1);
+  });
 });
diff --git a/packages/react-native-web/src/exports/TouchableHighlight/__tests__/index-test.js b/packages/react-native-web/src/exports/TouchableHighlight/__tests__/index-test.js
new file mode 100644
index 000000000..f4a9cfbe2
--- /dev/null
+++ b/packages/react-native-web/src/exports/TouchableHighlight/__tests__/index-test.js
@@ -0,0 +1,40 @@
+/* eslint-env jasmine, jest */
+/* eslint-disable react/jsx-no-bind */
+
+import React from 'react';
+import { render } from '@testing-library/react';
+import TouchableHighlight from '../';
+import View from '../../View';
+
+describe('components/TouchableHighlight', () => {
+  test('ref function is called when ref changes', () => {
+    const refMock = jest.fn();
+    const otherRefMock = jest.fn();
+
+    const { rerender } = render(<TouchableHighlight ref={refMock}><View /></TouchableHighlight>);
+    expect(refMock).toHaveBeenCalled();
+
+    rerender(<TouchableHighlight ref={otherRefMock}><View /></TouchableHighlight>)
+    expect(otherRefMock).toHaveBeenCalled();
+  });
+
+  test('ref function is not called every render', () => {
+    const refMock = jest.fn();
+
+    const { rerender } = render(<TouchableHighlight ref={refMock}><View /></TouchableHighlight>);
+    expect(refMock).toHaveBeenCalledTimes(1);
+
+    rerender(<TouchableHighlight ref={refMock}><View /></TouchableHighlight>);
+    expect(refMock).toHaveBeenCalledTimes(1);
+  });
+
+  test('ref function is not called on prop changes', () => {
+    const refMock = jest.fn();
+
+    const { rerender } = render(<TouchableHighlight ref={refMock} testID={'foo'}><View /></TouchableHighlight>);
+    expect(refMock).toHaveBeenCalledTimes(1);
+
+    rerender(<TouchableHighlight ref={refMock} testID={'bar'}><View /></TouchableHighlight>);
+    expect(refMock).toHaveBeenCalledTimes(1);
+  });
+});
diff --git a/packages/react-native-web/src/exports/TouchableOpacity/__tests__/index-test.js b/packages/react-native-web/src/exports/TouchableOpacity/__tests__/index-test.js
new file mode 100644
index 000000000..a0b3984a5
--- /dev/null
+++ b/packages/react-native-web/src/exports/TouchableOpacity/__tests__/index-test.js
@@ -0,0 +1,39 @@
+/* eslint-env jasmine, jest */
+/* eslint-disable react/jsx-no-bind */
+
+import React from 'react';
+import { render } from '@testing-library/react';
+import TouchableOpacity from '../';
+
+describe('components/TouchableOpacity', () => {
+  test('ref function is called when ref changes', () => {
+    const refMock = jest.fn();
+    const otherRefMock = jest.fn();
+
+    const { rerender } = render(<TouchableOpacity ref={refMock} />);
+    expect(refMock).toHaveBeenCalled();
+
+    rerender(<TouchableOpacity ref={otherRefMock} />)
+    expect(otherRefMock).toHaveBeenCalled();
+  });
+
+  test('ref function is not called every render', () => {
+    const refMock = jest.fn();
+
+    const { rerender } = render(<TouchableOpacity ref={refMock} />);
+    expect(refMock).toHaveBeenCalledTimes(1);
+
+    rerender(<TouchableOpacity ref={refMock} />);
+    expect(refMock).toHaveBeenCalledTimes(1);
+  });
+
+  test('ref function is not called on prop changes', () => {
+    const refMock = jest.fn();
+
+    const { rerender } = render(<TouchableOpacity ref={refMock} testID={'foo'} />);
+    expect(refMock).toHaveBeenCalledTimes(1);
+
+    rerender(<TouchableOpacity ref={refMock} testID={'bar'} />);
+    expect(refMock).toHaveBeenCalledTimes(1);
+  });
+});
diff --git a/packages/react-native-web/src/exports/TouchableWithoutFeedback/__tests__/index-test.js b/packages/react-native-web/src/exports/TouchableWithoutFeedback/__tests__/index-test.js
new file mode 100644
index 000000000..0fcef7706
--- /dev/null
+++ b/packages/react-native-web/src/exports/TouchableWithoutFeedback/__tests__/index-test.js
@@ -0,0 +1,40 @@
+/* eslint-env jasmine, jest */
+/* eslint-disable react/jsx-no-bind */
+
+import React from 'react';
+import { render } from '@testing-library/react';
+import TouchableWithoutFeedback from '../';
+import View from '../../View';
+
+describe('components/TouchableWithoutFeedback', () => {
+  test('ref function is called when ref changes', () => {
+    const refMock = jest.fn();
+    const otherRefMock = jest.fn();
+
+    const { rerender } = render(<TouchableWithoutFeedback ref={refMock}><View /></TouchableWithoutFeedback>);
+    expect(refMock).toHaveBeenCalled();
+
+    rerender(<TouchableWithoutFeedback ref={otherRefMock}><View /></TouchableWithoutFeedback>)
+    expect(otherRefMock).toHaveBeenCalled();
+  });
+
+  test('ref function is not called every render', () => {
+    const refMock = jest.fn();
+
+    const { rerender } = render(<TouchableWithoutFeedback ref={refMock}><View /></TouchableWithoutFeedback>);
+    expect(refMock).toHaveBeenCalledTimes(1);
+
+    rerender(<TouchableWithoutFeedback ref={refMock}><View /></TouchableWithoutFeedback>);
+    expect(refMock).toHaveBeenCalledTimes(1);
+  });
+
+  test('ref function is not called on prop changes', () => {
+    const refMock = jest.fn();
+
+    const { rerender } = render(<TouchableWithoutFeedback ref={refMock} testID={'foo'}><View /></TouchableWithoutFeedback>);
+    expect(refMock).toHaveBeenCalledTimes(1);
+
+    rerender(<TouchableWithoutFeedback ref={refMock} testID={'bar'}><View /></TouchableWithoutFeedback>);
+    expect(refMock).toHaveBeenCalledTimes(1);
+  });
+});
diff --git a/packages/react-native-web/src/exports/View/__tests__/index-test.js b/packages/react-native-web/src/exports/View/__tests__/index-test.js
index b76c5cecc..f196aa3c3 100644
--- a/packages/react-native-web/src/exports/View/__tests__/index-test.js
+++ b/packages/react-native-web/src/exports/View/__tests__/index-test.js
@@ -41,6 +41,37 @@ describe('components/View', () => {
       );
       expect(console.error).toBeCalled();
     });
+
+    test('ref function is called when ref changes', () => {
+      const refMock = jest.fn();
+      const otherRefMock = jest.fn();
+
+      const { rerender } = render(<View ref={refMock} />);
+      expect(refMock).toHaveBeenCalled();
+
+      rerender(<View ref={otherRefMock} />)
+      expect(otherRefMock).toHaveBeenCalled();
+    });
+
+    test('ref function is not called every render', () => {
+      const refMock = jest.fn();
+
+      const { rerender } = render(<View ref={refMock} />);
+      expect(refMock).toHaveBeenCalledTimes(1);
+
+      rerender(<View ref={refMock} />);
+      expect(refMock).toHaveBeenCalledTimes(1);
+    });
+
+    test('ref function is not called on prop changes', () => {
+      const refMock = jest.fn();
+
+      const { rerender } = render(<View ref={refMock} testID={'foo'} />);
+      expect(refMock).toHaveBeenCalledTimes(1);
+
+      rerender(<View ref={refMock} testID={'bar'} />);
+      expect(refMock).toHaveBeenCalledTimes(1);
+    });
   });
 
   test('prop "pointerEvents"', () => {