feat: RegExp support for *ByTestId queries (#535)

* getAllByTestId supports a regex matcher

* update typings

* docs: update

* refactor types

* refactor. remove unnecessary try/catch

* refactor test assertions

Author: acatalina

src/__tests__/getByApi.test.js

@@ -35,3 +35,18 @@ test('getByTestId returns only native elements', () => {
     'No instances found 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);
+});

src/helpers/findByAPI.js

@@ -21,12 +21,12 @@ const makeFindQuery = <Text, Result>(
 ): Promise<Result> => waitFor(() => getQuery(instance)(text), waitForOptions);
 
 export const findByTestId = (instance: ReactTestInstance) => (
-  testId: string,
+  testId: string | RegExp,
   waitForOptions: WaitForOptions = {}
 ) => makeFindQuery(instance, getByTestId, testId, waitForOptions);
 
 export const findAllByTestId = (instance: ReactTestInstance) => (
-  testId: string,
+  testId: string | RegExp,
   waitForOptions: WaitForOptions = {}
 ) => makeFindQuery(instance, getAllByTestId, testId, waitForOptions);
 

src/helpers/getByAPI.js

@@ -89,6 +89,12 @@ const getTextInputNodeByDisplayValue = (node, value) => {
   }
 };
 
+const getNodeByTestId = (node, testID) => {
+  return typeof testID === 'string'
+    ? testID === node.props.testID
+    : testID.test(node.props.testID);
+};
+
 export const getByText = (instance: ReactTestInstance) =>
   function getByTextFn(text: string | RegExp) {
     try {
@@ -124,7 +130,7 @@ export const getByDisplayValue = (instance: ReactTestInstance) =>
   };
 
 export const getByTestId = (instance: ReactTestInstance) =>
-  function getByTestIdFn(testID: string) {
+  function getByTestIdFn(testID: string | RegExp) {
     try {
       const results = getAllByTestId(instance)(testID);
       if (results.length === 1) {
@@ -183,9 +189,9 @@ export const getAllByDisplayValue = (instance: ReactTestInstance) =>
   };
 
 export const getAllByTestId = (instance: ReactTestInstance) =>
-  function getAllByTestIdFn(testID: string): ReactTestInstance[] {
+  function getAllByTestIdFn(testID: string | RegExp): ReactTestInstance[] {
     const results = instance
-      .findAllByProps({ testID })
+      .findAll((node) => getNodeByTestId(node, testID))
       .filter((element) => typeof element.type === 'string');
 
     if (results.length === 0) {

src/helpers/queryByAPI.js

@@ -48,7 +48,7 @@ export const queryByDisplayValue = (instance: ReactTestInstance) =>
   };
 
 export const queryByTestId = (instance: ReactTestInstance) =>
-  function queryByTestIdFn(testID: string) {
+  function queryByTestIdFn(testID: string | RegExp) {
     try {
       return getByTestId(instance)(testID);
     } catch (error) {
@@ -87,7 +87,7 @@ export const queryAllByDisplayValue = (instance: ReactTestInstance) => (
 };
 
 export const queryAllByTestId = (instance: ReactTestInstance) => (
-  testID: string
+  testID: string | RegExp
 ) => {
   try {
     return getAllByTestId(instance)(testID);

typings/__tests__/index.test.tsx

@@ -41,6 +41,7 @@ const getBy: ReactTestInstance[] = [
   tree.getByDisplayValue('my value'),
   tree.getByDisplayValue(/value/g),
   tree.getByTestId('test-id'),
+  tree.getByTestId(/test-id/),
   tree.getByA11yLabel('label'),
   tree.getByLabelText('label'),
   tree.getByA11yHint('label'),
@@ -64,6 +65,7 @@ const getAllBy: ReactTestInstance[][] = [
   tree.getAllByDisplayValue('my value'),
   tree.getAllByDisplayValue(/value/g),
   tree.getAllByTestId('test-id'),
+  tree.getAllByTestId(/value/g),
   tree.getAllByA11yLabel('label'),
   tree.getAllByLabelText('label'),
   tree.getAllByA11yHint('label'),
@@ -88,6 +90,7 @@ const queryBy: Array<ReactTestInstance | null> = [
   tree.queryByDisplayValue('my value'),
   tree.queryByDisplayValue(/value/g),
   tree.queryByTestId('test-id'),
+  tree.queryByTestId(/test-id/),
   tree.queryByA11yHint('label'),
   tree.queryByHintText('label'),
   tree.queryByA11yLabel('label'),
@@ -111,6 +114,7 @@ const queryAllBy: ReactTestInstance[][] = [
   tree.queryAllByDisplayValue('my value'),
   tree.queryAllByDisplayValue(/value/g),
   tree.queryAllByTestId('test-id'),
+  tree.queryAllByTestId(/test-id/),
   tree.queryAllByA11yLabel('label'),
   tree.queryAllByLabelText('label'),
   tree.queryAllByA11yHint('label'),
@@ -141,7 +145,7 @@ const findBy: Promise<ReactTestInstance>[] = [
   tree.findByDisplayValue(/value/g),
   tree.findByDisplayValue(/value/g, { timeout: 10, interval: 10 }),
   tree.findByTestId('test-id'),
-  tree.findByTestId('test-id', { timeout: 10, interval: 10 }),
+  tree.findByTestId(/test-id/, { timeout: 10, interval: 10 }),
   tree.findByA11yLabel('label'),
   tree.findByA11yLabel('label', { timeout: 10, interval: 10 }),
   tree.findByLabelText('label'),
@@ -177,7 +181,7 @@ const findAllBy: Promise<ReactTestInstance[]>[] = [
   tree.findAllByDisplayValue(/View/g),
   tree.findAllByDisplayValue(/View/g, { timeout: 10, interval: 10 }),
   tree.findAllByTestId('test-id'),
-  tree.findAllByTestId('test-id', { timeout: 10, interval: 10 }),
+  tree.findAllByTestId(/test-id/, { timeout: 10, interval: 10 }),
   tree.findAllByA11yLabel('label'),
   tree.findAllByA11yLabel('label', { timeout: 10, interval: 10 }),
   tree.findAllByLabelText('label'),

typings/index.d.ts

@@ -18,8 +18,8 @@ interface GetByAPI {
   getByText: (text: string | RegExp) => ReactTestInstance;
   getByPlaceholderText: (placeholder: string | RegExp) => ReactTestInstance;
   getByDisplayValue: (value: string | RegExp) => ReactTestInstance;
-  getByTestId: (testID: string) => ReactTestInstance;
-  getAllByTestId: (testID: string) => Array<ReactTestInstance>;
+  getByTestId: (testID: string | RegExp) => ReactTestInstance;
+  getAllByTestId: (testID: string | RegExp) => Array<ReactTestInstance>;
   getAllByText: (text: string | RegExp) => Array<ReactTestInstance>;
   getAllByPlaceholderText: (
     placeholder: string | RegExp
@@ -69,8 +69,8 @@ interface QueryByAPI {
     placeholder: string | RegExp
   ) => ReactTestInstance | null;
   queryByDisplayValue: (value: string | RegExp) => ReactTestInstance | null;
-  queryByTestId: (testID: string) => ReactTestInstance | null;
-  queryAllByTestId: (testID: string) => Array<ReactTestInstance> | [];
+  queryByTestId: (testID: string | RegExp) => ReactTestInstance | null;
+  queryAllByTestId: (testID: string | RegExp) => Array<ReactTestInstance> | [];
   queryAllByText: (text: string | RegExp) => Array<ReactTestInstance> | [];
   queryAllByPlaceholderText: (
     placeholder: string | RegExp
@@ -137,7 +137,7 @@ interface FindByAPI {
     value: string | RegExp,
     waitForOptions?: WaitForOptions
   ) => FindReturn;
-  findByTestId: (testID: string, waitForOptions?: WaitForOptions) => FindReturn;
+  findByTestId: (testID: string | RegExp, waitForOptions?: WaitForOptions) => FindReturn;
   findAllByText: (
     text: string | RegExp,
     waitForOptions?: WaitForOptions
@@ -151,7 +151,7 @@ interface FindByAPI {
     waitForOptions?: WaitForOptions
   ) => FindAllReturn;
   findAllByTestId: (
-    testID: string,
+    testID: string | RegExp,
     waitForOptions?: WaitForOptions
   ) => FindAllReturn;
 }

website/docs/Queries.md

@@ -98,7 +98,7 @@ const element = getByDisplayValue('username');
 
 > getByTestId, getAllByTestId, queryByTestId, queryAllByTestId, findByTestId, findAllByTestId
 
-Returns a `ReactTestInstance` with matching `testID` prop.
+Returns a `ReactTestInstance` with matching `testID` prop. `testID` – may be a string or a regular expression.
 
 ```jsx
 import { render } from '@testing-library/react-native';