feat(breaking): Return host component for all queries

jest-setup.ts

@@ -0,0 +1,7 @@
+import { resetToDefaults } from './src/pure';
+
+jest.mock('react-native/Libraries/Animated/NativeAnimatedHelper');
+
+beforeEach(() => {
+  resetToDefaults();
+});

package.json

@@ -87,9 +87,7 @@
   },
   "jest": {
     "preset": "./jest-preset",
-    "setupFiles": [
-      "./jestSetup.js"
-    ],
+    "setupFilesAfterEnv": ["./jest-setup.ts"],
     "testPathIgnorePatterns": [
       "timerUtils",
       "examples/"

src/__tests__/config.test.ts

@@ -5,10 +5,6 @@ import {
   configureInternal,
 } from '../config';
 
-beforeEach(() => {
-  resetToDefaults();
-});
-
 test('getConfig() returns existing configuration', () => {
   expect(getConfig().useBreakingChanges).toEqual(false);
   expect(getConfig().asyncUtilTimeout).toEqual(1000);

src/__tests__/host-component-names.test.tsx

@@ -0,0 +1,48 @@
+import { View } from 'react-native';
+import TestRenderer from 'react-test-renderer';
+import { configureInternal, getConfig } from '../config';
+import { getHostComponentNames } from '../helpers/host-component-names';
+
+const mockCreate = jest.spyOn(TestRenderer, 'create') as jest.Mock;
+
+describe('getHostComponentNames', () => {
+  test('updates internal config with host component names when they are not defined', () => {
+    expect(getConfig().hostComponentNames).toBeUndefined();
+
+    getHostComponentNames();
+
+    expect(getConfig().hostComponentNames).toEqual({
+      text: 'Text',
+      textInput: 'TextInput',
+    });
+  });
+
+  test('does not update internal config when host component names are already configured', () => {
+    configureInternal({
+      hostComponentNames: { text: 'banana', textInput: 'banana' },
+    });
+
+    getHostComponentNames();
+
+    expect(getConfig().hostComponentNames).toEqual({
+      text: 'banana',
+      textInput: 'banana',
+    });
+  });
+
+  test('throw an error when autodetection fails', () => {
+    mockCreate.mockReturnValue({
+      root: { type: View, children: [], props: {} },
+    });
+
+    expect(() => getHostComponentNames()).toThrowErrorMatchingInlineSnapshot(`
+      "Trying to detect host component names triggered the following error:
+
+      Unable to find an element with testID: text
+
+      There seems to be an issue with your configuration that prevents React Native Testing Library from working correctly.
+      Please check if you are using compatible versions of React Native and React Native Testing Library.
+      "
+    `);
+  });
+});

src/__tests__/render-debug.test.tsx

@@ -2,7 +2,7 @@
 import * as React from 'react';
 import { View, Text, TextInput, Pressable } from 'react-native';
 import stripAnsi from 'strip-ansi';
-import { render, fireEvent, resetToDefaults, configure } from '..';
+import { render, fireEvent, configure } from '..';
 
 type ConsoleLogMock = jest.Mock<Array<string>>;
 
@@ -18,7 +18,6 @@ const ignoreWarnings = ['Using debug("message") is deprecated'];
 const realConsoleWarn = console.warn;
 
 beforeEach(() => {
-  resetToDefaults();
   jest.spyOn(console, 'log').mockImplementation(() => {});
   jest.spyOn(console, 'warn').mockImplementation((message) => {
     if (!ignoreWarnings.some((warning) => message.includes(warning))) {

src/__tests__/render.test.tsx

@@ -1,7 +1,7 @@
 /* eslint-disable no-console */
 import * as React from 'react';
 import { View, Text, TextInput, Pressable, SafeAreaView } from 'react-native';
-import { render, fireEvent, RenderAPI, resetToDefaults } from '..';
+import { render, fireEvent, RenderAPI } from '..';
 
 const PLACEHOLDER_FRESHNESS = 'Add custom freshness';
 const PLACEHOLDER_CHEF = 'Who inspected freshness?';
@@ -10,10 +10,6 @@ const INPUT_CHEF = 'I inspected freshie';
 const DEFAULT_INPUT_CHEF = 'What did you inspect?';
 const DEFAULT_INPUT_CUSTOMER = 'What banana?';
 
-beforeEach(() => {
-  resetToDefaults();
-});
-
 class MyButton extends React.Component<any> {
   render() {
     return (

src/__tests__/waitFor.test.tsx

@@ -1,6 +1,6 @@
 import * as React from 'react';
 import { Text, TouchableOpacity, View, Pressable } from 'react-native';
-import { fireEvent, render, waitFor, configure, resetToDefaults } from '..';
+import { fireEvent, render, waitFor, configure } from '..';
 
 class Banana extends React.Component<any> {
   changeFresh = () => {
@@ -19,10 +19,6 @@ class Banana extends React.Component<any> {
   }
 }
 
-beforeEach(() => {
-  resetToDefaults();
-});
-
 class BananaContainer extends React.Component<{}, any> {
   state = { fresh: false };
 

src/config.ts

@@ -3,6 +3,7 @@ import { DebugOptions } from './helpers/debugDeep';
 /**
  * Global configuration options for React Native Testing Library.
  */
+
 export type Config = {
   /** Default timeout, in ms, for `waitFor` and `findBy*` queries. */
   asyncUtilTimeout: number;
@@ -19,9 +20,17 @@ export type ConfigAliasOptions = {
   defaultHidden: boolean;
 };
 
+export type HostComponentNames = {
+  text: string;
+  textInput: string;
+};
+
 export type InternalConfig = Config & {
   /** Whether to use breaking changes intended for next major version release. */
   useBreakingChanges: boolean;
+
+  /** Names for key React Native host components. */
+  hostComponentNames?: HostComponentNames;
 };
 
 const defaultConfig: InternalConfig = {

src/fireEvent.ts

@@ -3,6 +3,7 @@ import { TextInput } from 'react-native';
 import act from './act';
 import { isHostElement } from './helpers/component-tree';
 import { filterNodeByType } from './helpers/filterNodeByType';
+import { getHostComponentNames } from './helpers/host-component-names';
 
 type EventHandler = (...args: any) => unknown;
 
@@ -14,12 +15,11 @@ const isTextInput = (element?: ReactTestInstance) => {
   // We have to test if the element type is either the TextInput component
   // (which would if it is a composite component) or the string
   // TextInput (which would be true if it is a host component)
-  // All queries but the one by testID return composite component and event
-  // if all queries returned host components, since fireEvent bubbles up
+  // All queries return host components but since fireEvent bubbles up
   // it would trigger the parent prop without the composite component check
   return (
     filterNodeByType(element, TextInput) ||
-    filterNodeByType(element, 'TextInput')
+    filterNodeByType(element, getHostComponentNames().textInput)
   );
 };
 

src/helpers/host-component-names.tsx

@@ -0,0 +1,50 @@
+import React from 'react';
+import { Text, TextInput, View } from 'react-native';
+import TestRenderer from 'react-test-renderer';
+import { configureInternal, getConfig, HostComponentNames } from '../config';
+import { getQueriesForElement } from '../within';
+
+const defaultErrorMessage = `There seems to be an issue with your configuration that prevents React Native Testing Library from working correctly.
+Please check if you are using compatible versions of React Native and React Native Testing Library.`;
+
+export function getHostComponentNames(): HostComponentNames {
+  const configHostComponentNames = getConfig().hostComponentNames;
+  if (configHostComponentNames) {
+    return configHostComponentNames;
+  }
+
+  try {
+    const renderer = TestRenderer.create(
+      <View>
+        <Text testID="text">Hello</Text>
+        <TextInput testID="textInput" />
+      </View>
+    );
+    const { getByTestId } = getQueriesForElement(renderer.root);
+    const textHostName = getByTestId('text').type;
+    const textInputHostName = getByTestId('textInput').type;
+
+    // This code path should not happen as getByTestId always returns host elements.
+    if (
+      typeof textHostName !== 'string' ||
+      typeof textInputHostName !== 'string'
+    ) {
+      throw new Error(defaultErrorMessage);
+    }
+
+    const hostComponentNames = {
+      text: textHostName,
+      textInput: textInputHostName,
+    };
+    configureInternal({ hostComponentNames });
+    return hostComponentNames;
+  } catch (error) {
+    const errorMessage =
+      error && typeof error === 'object' && 'message' in error
+        ? error.message
+        : null;
+
+    throw new Error(`Trying to detect host component names triggered the following error:\n\n${errorMessage}\n\n${defaultErrorMessage}
+`);
+  }
+}

src/helpers/matchers/matchTextContent.ts

@@ -1,15 +1,20 @@
 import { Text } from 'react-native';
 import type { ReactTestInstance } from 'react-test-renderer';
+import { getConfig } from '../../config';
 import { matches, TextMatch, TextMatchOptions } from '../../matches';
 import { filterNodeByType } from '../filterNodeByType';
 import { getTextContent } from '../getTextContent';
+import { getHostComponentNames } from '../host-component-names';
 
 export function matchTextContent(
   node: ReactTestInstance,
   text: TextMatch,
   options: TextMatchOptions = {}
 ) {
-  if (!filterNodeByType(node, Text)) {
+  const textType = getConfig().useBreakingChanges
+    ? getHostComponentNames().text
+    : Text;
+  if (!filterNodeByType(node, textType)) {
     return false;
   }
 

src/queries/__tests__/displayValue.breaking.test.tsx

@@ -0,0 +1,136 @@
+import * as React from 'react';
+import { View, TextInput } from 'react-native';
+
+import { render } from '../..';
+import { configureInternal } from '../../config';
+
+const PLACEHOLDER_FRESHNESS = 'Add custom freshness';
+const PLACEHOLDER_CHEF = 'Who inspected freshness?';
+const INPUT_FRESHNESS = 'Custom Freshie';
+const INPUT_CHEF = 'I inspected freshie';
+const DEFAULT_INPUT_CHEF = 'What did you inspect?';
+const DEFAULT_INPUT_CUSTOMER = 'What banana?';
+
+beforeEach(() => configureInternal({ useBreakingChanges: true }));
+
+const Banana = () => (
+  <View>
+    <TextInput
+      testID="bananaCustomFreshness"
+      placeholder={PLACEHOLDER_FRESHNESS}
+      value={INPUT_FRESHNESS}
+    />
+    <TextInput
+      testID="bananaChef"
+      placeholder={PLACEHOLDER_CHEF}
+      value={INPUT_CHEF}
+      defaultValue={DEFAULT_INPUT_CHEF}
+    />
+    <TextInput defaultValue={DEFAULT_INPUT_CUSTOMER} />
+    <TextInput defaultValue={'hello'} value="" />
+  </View>
+);
+
+test('getByDisplayValue, queryByDisplayValue', () => {
+  const { getByDisplayValue, queryByDisplayValue } = render(<Banana />);
+  const input = getByDisplayValue(/custom/i);
+
+  expect(input.props.value).toBe(INPUT_FRESHNESS);
+
+  const sameInput = getByDisplayValue(INPUT_FRESHNESS);
+
+  expect(sameInput.props.value).toBe(INPUT_FRESHNESS);
+  expect(() => getByDisplayValue('no value')).toThrow(
+    'Unable to find an element with displayValue: no value'
+  );
+
+  expect(queryByDisplayValue(/custom/i)).toBe(input);
+  expect(queryByDisplayValue('no value')).toBeNull();
+  expect(() => queryByDisplayValue(/fresh/i)).toThrow(
+    'Found multiple elements with display value: /fresh/i'
+  );
+});
+
+test('getByDisplayValue, queryByDisplayValue get element by default value only when value is undefined', () => {
+  const { getByDisplayValue, queryByDisplayValue } = render(<Banana />);
+  expect(() =>
+    getByDisplayValue(DEFAULT_INPUT_CHEF)
+  ).toThrowErrorMatchingInlineSnapshot(
+    `"Unable to find an element with displayValue: What did you inspect?"`
+  );
+  expect(queryByDisplayValue(DEFAULT_INPUT_CHEF)).toBeNull();
+
+  expect(() => getByDisplayValue('hello')).toThrowErrorMatchingInlineSnapshot(
+    `"Unable to find an element with displayValue: hello"`
+  );
+  expect(queryByDisplayValue('hello')).toBeNull();
+
+  expect(getByDisplayValue(DEFAULT_INPUT_CUSTOMER)).toBeTruthy();
+  expect(queryByDisplayValue(DEFAULT_INPUT_CUSTOMER)).toBeTruthy();
+});
+
+test('getAllByDisplayValue, queryAllByDisplayValue', () => {
+  const { getAllByDisplayValue, queryAllByDisplayValue } = render(<Banana />);
+  const inputs = getAllByDisplayValue(/fresh/i);
+
+  expect(inputs).toHaveLength(2);
+  expect(() => getAllByDisplayValue('no value')).toThrow(
+    'Unable to find an element with displayValue: no value'
+  );
+
+  expect(queryAllByDisplayValue(/fresh/i)).toEqual(inputs);
+  expect(queryAllByDisplayValue('no value')).toHaveLength(0);
+});
+
+test('findBy queries work asynchronously', async () => {
+  const options = { timeout: 10 }; // Short timeout so that this test runs quickly
+  const { rerender, findByDisplayValue, findAllByDisplayValue } = render(
+    <View />
+  );
+
+  await expect(
+    findByDisplayValue('Display Value', {}, options)
+  ).rejects.toBeTruthy();
+  await expect(
+    findAllByDisplayValue('Display Value', {}, options)
+  ).rejects.toBeTruthy();
+
+  setTimeout(
+    () =>
+      rerender(
+        <View>
+          <TextInput value="Display Value" />
+        </View>
+      ),
+    20
+  );
+
+  await expect(findByDisplayValue('Display Value')).resolves.toBeTruthy();
+  await expect(findAllByDisplayValue('Display Value')).resolves.toHaveLength(1);
+}, 20000);
+
+test('byDisplayValue queries support hidden option', () => {
+  const { getByDisplayValue, queryByDisplayValue } = render(
+    <TextInput value="hidden" style={{ display: 'none' }} />
+  );
+
+  expect(getByDisplayValue('hidden')).toBeTruthy();
+  expect(
+    getByDisplayValue('hidden', { includeHiddenElements: true })
+  ).toBeTruthy();
+
+  expect(
+    queryByDisplayValue('hidden', { includeHiddenElements: false })
+  ).toBeFalsy();
+  expect(() =>
+    getByDisplayValue('hidden', { includeHiddenElements: false })
+  ).toThrowErrorMatchingInlineSnapshot(
+    `"Unable to find an element with displayValue: hidden"`
+  );
+});
+
+test('byDisplayValue should return host component', () => {
+  const { getByDisplayValue } = render(<TextInput value="value" />);
+
+  expect(getByDisplayValue('value').type).toBe('TextInput');
+});