chore: ReactNative API assumptions early warning tests (#1143)

Author: mdjastrzebski

src/__tests__/jest-native.test.tsx

@@ -40,10 +40,10 @@ test('jest-native matchers work correctly', () => {
   expect(getByText('Disabled Button')).toBeDisabled();
   expect(getByText('Enabled Button')).not.toBeDisabled();
 
-  expect(getByA11yHint('Empty Text')).toBeEmpty();
-  expect(getByA11yHint('Empty View')).toBeEmpty();
-  expect(getByA11yHint('Not Empty Text')).not.toBeEmpty();
-  expect(getByA11yHint('Not Empty View')).not.toBeEmpty();
+  expect(getByA11yHint('Empty Text')).toBeEmptyElement();
+  expect(getByA11yHint('Empty View')).toBeEmptyElement();
+  expect(getByA11yHint('Not Empty Text')).not.toBeEmptyElement();
+  expect(getByA11yHint('Not Empty View')).not.toBeEmptyElement();
 
   expect(getByA11yHint('Container View')).toContainElement(
     // $FlowFixMe - TODO: fix @testing-library/jest-native flow typings

src/__tests__/react-native-api.test.tsx

@@ -0,0 +1,100 @@
+import * as React from 'react';
+import { View, Text, TextInput } from 'react-native';
+import { render } from '..';
+import { getHostSelf } from '../helpers/component-tree';
+
+/**
+ * Tests in this file are intended to give us an proactive warning that React Native behavior has
+ * changed in a way that may impact our code like queries or event handling.
+ */
+
+test('React Native API assumption: <View> renders single host element', () => {
+  const view = render(<View testID="test" />);
+  const hostView = view.getByTestId('test');
+  expect(getHostSelf(hostView)).toBe(hostView);
+
+  expect(view.toJSON()).toMatchInlineSnapshot(`
+    <View
+      testID="test"
+    />
+  `);
+});
+
+test('React Native API assumption: <Text> renders single host element', () => {
+  const view = render(<Text testID="test">Hello</Text>);
+  const compositeView = view.getByText('Hello');
+  const hostView = view.getByTestId('test');
+  expect(getHostSelf(compositeView)).toBe(hostView);
+
+  expect(view.toJSON()).toMatchInlineSnapshot(`
+    <Text
+      testID="test"
+    >
+      Hello
+    </Text>
+  `);
+});
+
+test('React Native API assumption: nested <Text> renders single host element', () => {
+  const view = render(
+    <Text testID="test">
+      <Text testID="before">Before</Text>
+      Hello
+      <Text testID="after">
+        <Text testID="deeplyNested">Deeply nested</Text>
+      </Text>
+    </Text>
+  );
+  expect(getHostSelf(view.getByText('Hello'))).toBe(view.getByTestId('test'));
+  expect(getHostSelf(view.getByText('Before'))).toBe(
+    view.getByTestId('before')
+  );
+  expect(getHostSelf(view.getByText('Deeply nested'))).toBe(
+    view.getByTestId('deeplyNested')
+  );
+
+  expect(view.toJSON()).toMatchInlineSnapshot(`
+    <Text
+      testID="test"
+    >
+      <Text
+        testID="before"
+      >
+        Before
+      </Text>
+      Hello
+      <Text
+        testID="after"
+      >
+        <Text
+          testID="deeplyNested"
+        >
+          Deeply nested
+        </Text>
+      </Text>
+    </Text>
+  `);
+});
+
+test('React Native API assumption: <TextInput> renders single host element', () => {
+  const view = render(
+    <TextInput
+      testID="test"
+      defaultValue="default"
+      value="currentValue"
+      placeholder="Placeholder"
+    />
+  );
+  const compositeView = view.getByPlaceholderText('Placeholder');
+  const hostView = view.getByTestId('test');
+  expect(getHostSelf(compositeView)).toBe(hostView);
+
+  expect(view.toJSON()).toMatchInlineSnapshot(`
+    <TextInput
+      defaultValue="default"
+      placeholder="Placeholder"
+      testID="test"
+      value="currentValue"
+    />
+  `);
+});