test: add test that exhibits the behavior causing necolas#1665

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);
+    });
   });
 });

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);
+  });
+});

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);
+  });
 });

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);
+  });
 });

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);
+  });
+});

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);
+  });
+});

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);
+  });
+});

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"', () => {