chore: restructure ByTestId queries code by predicate type

src/__tests__/byTestId.test.js

@@ -0,0 +1,173 @@
+// @flow
+import React from 'react';
+import { View, Text, TextInput, TouchableOpacity, Button } from 'react-native';
+import { render } from '..';
+
+const PLACEHOLDER_FRESHNESS = 'Add custom freshness';
+const PLACEHOLDER_CHEF = 'Who inspected freshness?';
+const INPUT_FRESHNESS = 'Custom Freshie';
+const INPUT_CHEF = 'I inspected freshie';
+
+class MyButton extends React.Component<any> {
+  render() {
+    return (
+      <TouchableOpacity onPress={this.props.onPress}>
+        <Text>{this.props.children}</Text>
+      </TouchableOpacity>
+    );
+  }
+}
+
+class Banana extends React.Component<any, any> {
+  state = {
+    fresh: false,
+  };
+
+  componentDidUpdate() {
+    if (this.props.onUpdate) {
+      this.props.onUpdate();
+    }
+  }
+
+  componentWillUnmount() {
+    if (this.props.onUnmount) {
+      this.props.onUnmount();
+    }
+  }
+
+  changeFresh = () => {
+    this.setState((state) => ({
+      fresh: !state.fresh,
+    }));
+  };
+
+  render() {
+    const test = 0;
+    return (
+      <View>
+        <Text>Is the banana fresh?</Text>
+        <Text testID="bananaFresh">
+          {this.state.fresh ? 'fresh' : 'not fresh'}
+        </Text>
+        <TextInput
+          testID="bananaCustomFreshness"
+          placeholder={PLACEHOLDER_FRESHNESS}
+          value={INPUT_FRESHNESS}
+        />
+        <TextInput
+          testID="bananaChef"
+          placeholder={PLACEHOLDER_CHEF}
+          value={INPUT_CHEF}
+        />
+        <MyButton onPress={this.changeFresh} type="primary">
+          Change freshness!
+        </MyButton>
+        <Text testID="duplicateText">First Text</Text>
+        <Text testID="duplicateText">Second Text</Text>
+        <Text>{test}</Text>
+      </View>
+    );
+  }
+}
+
+const MyComponent = () => {
+  return <Text>My Component</Text>;
+};
+
+test('getByTestId returns only native elements', () => {
+  const { getByTestId, getAllByTestId } = render(
+    <View>
+      <Text testID="text">Text</Text>
+      <TextInput testID="textInput" />
+      <View testID="view" />
+      <Button testID="button" title="Button" onPress={jest.fn()} />
+      <MyComponent testID="myComponent" />
+    </View>
+  );
+
+  expect(getByTestId('text')).toBeTruthy();
+  expect(getByTestId('textInput')).toBeTruthy();
+  expect(getByTestId('view')).toBeTruthy();
+  expect(getByTestId('button')).toBeTruthy();
+
+  expect(getAllByTestId('text')).toHaveLength(1);
+  expect(getAllByTestId('textInput')).toHaveLength(1);
+  expect(getAllByTestId('view')).toHaveLength(1);
+  expect(getAllByTestId('button')).toHaveLength(1);
+
+  expect(() => getByTestId('myComponent')).toThrowError(
+    'Unable to find an element with testID: myComponent'
+  );
+  expect(() => getAllByTestId('myComponent')).toThrowError(
+    'Unable to find an element with testID: myComponent'
+  );
+});
+
+test('supports a regex matcher', () => {
+  const { getByTestId, getAllByTestId } = render(
+    <View>
+      <Text testID="text">Text</Text>
+      <TextInput testID="textInput" />
+      <View testID="view" />
+      <Button testID="button" title="Button" onPress={jest.fn()} />
+      <MyComponent testID="myComponent" />
+    </View>
+  );
+
+  expect(getByTestId(/view/)).toBeTruthy();
+  expect(getAllByTestId(/text/)).toHaveLength(2);
+});
+
+test('getByTestId, queryByTestId', () => {
+  const { getByTestId, queryByTestId } = render(<Banana />);
+  const component = getByTestId('bananaFresh');
+
+  expect(component.props.children).toBe('not fresh');
+  expect(() => getByTestId('InExistent')).toThrow(
+    'Unable to find an element with testID: InExistent'
+  );
+
+  expect(getByTestId('bananaFresh')).toBe(component);
+  expect(queryByTestId('InExistent')).toBeNull();
+});
+
+test('getAllByTestId, queryAllByTestId', () => {
+  const { getAllByTestId, queryAllByTestId } = render(<Banana />);
+  const textElements = getAllByTestId('duplicateText');
+
+  expect(textElements.length).toBe(2);
+  expect(textElements[0].props.children).toBe('First Text');
+  expect(textElements[1].props.children).toBe('Second Text');
+  expect(() => getAllByTestId('nonExistentTestId')).toThrow(
+    'Unable to find an element with testID: nonExistentTestId'
+  );
+
+  const queriedTextElements = queryAllByTestId('duplicateText');
+
+  expect(queriedTextElements.length).toBe(2);
+  expect(queriedTextElements[0]).toBe(textElements[0]);
+  expect(queriedTextElements[1]).toBe(textElements[1]);
+  expect(queryAllByTestId('nonExistentTestId')).toHaveLength(0);
+});
+
+test('findByTestId and findAllByTestId work asynchronously', async () => {
+  const options = { timeout: 10 }; // Short timeout so that this test runs quickly
+  const { rerender, findByTestId, findAllByTestId } = render(<View />);
+  await expect(findByTestId('aTestId', options)).rejects.toBeTruthy();
+  await expect(findAllByTestId('aTestId', options)).rejects.toBeTruthy();
+
+  setTimeout(
+    () =>
+      rerender(
+        <View testID="aTestId">
+          <Text>Some Text</Text>
+          <TextInput placeholder="Placeholder Text" />
+          <TextInput value="Display Value" />
+        </View>
+      ),
+    20
+  );
+
+  await expect(findByTestId('aTestId')).resolves.toBeTruthy();
+  await expect(findAllByTestId('aTestId')).resolves.toHaveLength(1);
+}, 20000);

src/__tests__/findByApi.test.js

@@ -7,17 +7,13 @@ test('findBy queries work asynchronously', async () => {
   const options = { timeout: 10 }; // Short timeout so that this test runs quickly
   const {
     rerender,
-    findByTestId,
-    findAllByTestId,
     findByText,
     findAllByText,
     findByPlaceholderText,
     findAllByPlaceholderText,
     findByDisplayValue,
     findAllByDisplayValue,
   } = render(<View />);
-  await expect(findByTestId('aTestId', options)).rejects.toBeTruthy();
-  await expect(findAllByTestId('aTestId', options)).rejects.toBeTruthy();
   await expect(findByText('Some Text', options)).rejects.toBeTruthy();
   await expect(findAllByText('Some Text', options)).rejects.toBeTruthy();
   await expect(
@@ -45,8 +41,6 @@ test('findBy queries work asynchronously', async () => {
     20
   );
 
-  await expect(findByTestId('aTestId')).resolves.toBeTruthy();
-  await expect(findAllByTestId('aTestId')).resolves.toHaveLength(1);
   await expect(findByText('Some Text')).resolves.toBeTruthy();
   await expect(findAllByText('Some Text')).resolves.toHaveLength(1);
   await expect(findByPlaceholderText('Placeholder Text')).resolves.toBeTruthy();

src/__tests__/render.test.js

@@ -79,36 +79,6 @@ class Banana extends React.Component<any, any> {
   }
 }
 
-test('getByTestId, queryByTestId', () => {
-  const { getByTestId, queryByTestId } = render(<Banana />);
-  const component = getByTestId('bananaFresh');
-
-  expect(component.props.children).toBe('not fresh');
-  expect(() => getByTestId('InExistent')).toThrow('No instances found');
-
-  expect(getByTestId('bananaFresh')).toBe(component);
-  expect(queryByTestId('InExistent')).toBeNull();
-});
-
-test('getAllByTestId, queryAllByTestId', () => {
-  const { getAllByTestId, queryAllByTestId } = render(<Banana />);
-  const textElements = getAllByTestId('duplicateText');
-
-  expect(textElements.length).toBe(2);
-  expect(textElements[0].props.children).toBe('First Text');
-  expect(textElements[1].props.children).toBe('Second Text');
-  expect(() => getAllByTestId('nonExistentTestId')).toThrow(
-    'No instances found'
-  );
-
-  const queriedTextElements = queryAllByTestId('duplicateText');
-
-  expect(queriedTextElements.length).toBe(2);
-  expect(queriedTextElements[0]).toBe(textElements[0]);
-  expect(queriedTextElements[1]).toBe(textElements[1]);
-  expect(queryAllByTestId('nonExistentTestId')).toHaveLength(0);
-});
-
 test('UNSAFE_getAllByType, UNSAFE_queryAllByType', () => {
   const { UNSAFE_getAllByType, UNSAFE_queryAllByType } = render(<Banana />);
   const [text, status, button] = UNSAFE_getAllByType(Text);

src/helpers/byTestId.js

@@ -0,0 +1,46 @@
+// @flow
+import { makeQueries } from './makeQueries';
+import type { Queries } from './makeQueries';
+
+const getNodeByTestId = (node, testID) => {
+  return typeof testID === 'string'
+    ? testID === node.props.testID
+    : testID.test(node.props.testID);
+};
+
+const queryAllByTestId = (
+  instance: ReactTestInstance
+): ((testId: string | RegExp) => Array<ReactTestInstance>) =>
+  function getAllByTestIdFn(testId) {
+    const results = instance
+      .findAll((node) => getNodeByTestId(node, testId))
+      .filter((element) => typeof element.type === 'string');
+
+    return results;
+  };
+
+const getMultipleError = (testId) =>
+  `Found multiple elements with testID: ${String(testId)}`;
+const getMissingError = (testId) =>
+  `Unable to find an element with testID: ${String(testId)}`;
+
+const {
+  getBy: getByTestId,
+  getAllBy: getAllByTestId,
+  queryBy: queryByTestId,
+  findBy: findByTestId,
+  findAllBy: findAllByTestId,
+}: Queries<string | RegExp> = makeQueries(
+  queryAllByTestId,
+  getMissingError,
+  getMultipleError
+);
+
+export {
+  getByTestId,
+  getAllByTestId,
+  queryByTestId,
+  findByTestId,
+  findAllByTestId,
+  queryAllByTestId,
+};

src/helpers/findByAPI.js

@@ -2,15 +2,14 @@
 import waitFor from '../waitFor';
 import type { WaitForOptions } from '../waitFor';
 import {
-  getByTestId,
-  getAllByTestId,
   getByText,
   getAllByText,
   getByPlaceholderText,
   getAllByPlaceholderText,
   getByDisplayValue,
   getAllByDisplayValue,
 } from './getByAPI';
+import { findAllByTestId, findByTestId } from './byTestId';
 import { throwRenamedFunctionError } from './errors';
 
 export type FindByAPI = {|
@@ -57,26 +56,6 @@ const makeFindQuery = <Text, Result>(
   waitForOptions: WaitForOptions
 ): Promise<Result> => waitFor(() => getQuery(instance)(text), waitForOptions);
 
-export const findByTestId = (
-  instance: ReactTestInstance
-): ((
-  testId: string | RegExp,
-  waitForOptions?: WaitForOptions
-) => Promise<ReactTestInstance>) => (
-  testId: string | RegExp,
-  waitForOptions: WaitForOptions = {}
-) => makeFindQuery(instance, getByTestId, testId, waitForOptions);
-
-export const findAllByTestId = (
-  instance: ReactTestInstance
-): ((
-  testId: string | RegExp,
-  waitForOptions?: WaitForOptions
-) => Promise<Array<ReactTestInstance>>) => (
-  testId: string | RegExp,
-  waitForOptions: WaitForOptions = {}
-) => makeFindQuery(instance, getAllByTestId, testId, waitForOptions);
-
 export const findByText = (
   instance: ReactTestInstance
 ): ((