From 5b214bbaf423b60cde25f6b46c1e16225d71f07f Mon Sep 17 00:00:00 2001
From: pierrezimmermann <pierrez@nam.tech>
Date: Sun, 20 Nov 2022 09:47:56 +0100
Subject: [PATCH 01/45] BREAKING CHANGE : make placeholdertext queries return
 host elements

---
 src/__tests__/config.test.ts                  |  4 ++
 src/config.ts                                 |  4 ++
 .../__tests__/placeholderText.test.tsx        | 44 ++++++++++++++++++-
 src/queries/options.ts                        | 13 ++++++
 src/queries/placeholderText.ts                | 17 +++++--
 typings/index.flow.js                         | 10 ++++-
 website/docs/API.md                           |  5 +++
 website/docs/Queries.md                       |  3 +-
 8 files changed, 93 insertions(+), 7 deletions(-)

diff --git a/src/__tests__/config.test.ts b/src/__tests__/config.test.ts
index c197b9c3a..e32ec2b5b 100644
--- a/src/__tests__/config.test.ts
+++ b/src/__tests__/config.test.ts
@@ -23,6 +23,7 @@ test('configure() overrides existing config values', () => {
     defaultDebugOptions: { message: 'debug message' },
     defaultIncludeHiddenElements: true,
     useBreakingChanges: false,
+    useLegacyQueries: false,
   });
 });
 
@@ -30,13 +31,16 @@ test('resetToDefaults() resets config to defaults', () => {
   configure({
     asyncUtilTimeout: 5000,
     defaultIncludeHiddenElements: false,
+    useLegacyQueries: true,
   });
   expect(getConfig().asyncUtilTimeout).toEqual(5000);
   expect(getConfig().defaultIncludeHiddenElements).toEqual(false);
+  expect(getConfig().useLegacyQueries).toBe(true);
 
   resetToDefaults();
   expect(getConfig().asyncUtilTimeout).toEqual(1000);
   expect(getConfig().defaultIncludeHiddenElements).toEqual(true);
+  expect(getConfig().useLegacyQueries).toBe(false);
 });
 
 test('resetToDefaults() resets internal config to defaults', () => {
diff --git a/src/config.ts b/src/config.ts
index 64de13d13..26c404336 100644
--- a/src/config.ts
+++ b/src/config.ts
@@ -12,6 +12,9 @@ export type Config = {
 
   /** Default options for `debug` helper. */
   defaultDebugOptions?: Partial<DebugOptions>;
+
+  /** Option to return composite components */
+  useLegacyQueries: boolean;
 };
 
 export type ConfigAliasOptions = {
@@ -28,6 +31,7 @@ const defaultConfig: InternalConfig = {
   useBreakingChanges: false,
   asyncUtilTimeout: 1000,
   defaultIncludeHiddenElements: true,
+  useLegacyQueries: false,
 };
 
 let config = { ...defaultConfig };
diff --git a/src/queries/__tests__/placeholderText.test.tsx b/src/queries/__tests__/placeholderText.test.tsx
index ef75bfe36..f2b99f993 100644
--- a/src/queries/__tests__/placeholderText.test.tsx
+++ b/src/queries/__tests__/placeholderText.test.tsx
@@ -1,6 +1,6 @@
 import * as React from 'react';
 import { View, TextInput } from 'react-native';
-import { render } from '../..';
+import { render, configure, resetToDefaults } from '../..';
 
 const PLACEHOLDER_FRESHNESS = 'Add custom freshness';
 const PLACEHOLDER_CHEF = 'Who inspected freshness?';
@@ -8,6 +8,10 @@ const INPUT_FRESHNESS = 'Custom Freshie';
 const INPUT_CHEF = 'I inspected freshie';
 const DEFAULT_INPUT_CHEF = 'What did you inspect?';
 
+beforeEach(() => {
+  resetToDefaults();
+});
+
 const Banana = () => (
   <View>
     <TextInput
@@ -78,3 +82,41 @@ test('byPlaceholderText queries support hidden option', () => {
     `"Unable to find an element with placeholder: hidden"`
   );
 });
+
+test('byPlaceHolderText should return composite component if useLegacyQueries option is true', () => {
+  configure({ useLegacyQueries: true });
+  const { getByPlaceholderText } = render(
+    <TextInput placeholder="placeholder" />
+  );
+
+  expect(getByPlaceholderText('placeholder').type).toBe(TextInput);
+});
+
+test('byPlaceHolderText should return host component if useLegacyQueries option is false', () => {
+  const { getByPlaceholderText } = render(
+    <TextInput placeholder="placeholder" />
+  );
+
+  expect(getByPlaceholderText('placeholder').type).toBe('TextInput');
+});
+
+test('byPlaceHolderText should return composite component if legacy option is true', () => {
+  const { getByPlaceholderText } = render(
+    <TextInput placeholder="placeholder" />
+  );
+
+  expect(getByPlaceholderText('placeholder', { legacy: true }).type).toBe(
+    TextInput
+  );
+});
+
+test('byPlaceHolderText should return host component if legacy option is false', () => {
+  configure({ useLegacyQueries: true });
+  const { getByPlaceholderText } = render(
+    <TextInput placeholder="placeholder" />
+  );
+
+  expect(getByPlaceholderText('placeholder', { legacy: false }).type).toBe(
+    'TextInput'
+  );
+});
diff --git a/src/queries/options.ts b/src/queries/options.ts
index 2468723a5..cae342898 100644
--- a/src/queries/options.ts
+++ b/src/queries/options.ts
@@ -1,3 +1,4 @@
+import { getConfig } from '../config';
 import { NormalizerFn } from '../matches';
 
 export type CommonQueryOptions = {
@@ -12,3 +13,15 @@ export type TextMatchOptions = {
   exact?: boolean;
   normalizer?: NormalizerFn;
 };
+
+export type LegacyQueryOptions = {
+  legacy?: boolean;
+};
+
+export const shouldReturnCompositeComponent = (option: LegacyQueryOptions) => {
+  if (option.legacy === false) {
+    return false;
+  }
+
+  return option.legacy || getConfig().useLegacyQueries;
+};
diff --git a/src/queries/placeholderText.ts b/src/queries/placeholderText.ts
index fa232d98c..8e14e1b36 100644
--- a/src/queries/placeholderText.ts
+++ b/src/queries/placeholderText.ts
@@ -12,18 +12,27 @@ import type {
   QueryAllByQuery,
   QueryByQuery,
 } from './makeQueries';
-import type { CommonQueryOptions } from './options';
+import {
+  CommonQueryOptions,
+  LegacyQueryOptions,
+  shouldReturnCompositeComponent,
+} from './options';
 
-type ByPlaceholderTextOptions = CommonQueryOptions & TextMatchOptions;
+type ByPlaceholderTextOptions = CommonQueryOptions &
+  TextMatchOptions &
+  LegacyQueryOptions;
 
 const getTextInputNodeByPlaceholderText = (
   node: ReactTestInstance,
   placeholder: TextMatch,
-  options: TextMatchOptions = {}
+  options: TextMatchOptions & LegacyQueryOptions = {}
 ) => {
   const { exact, normalizer } = options;
+  const typeToMatch = shouldReturnCompositeComponent(options)
+    ? TextInput
+    : 'TextInput';
   return (
-    filterNodeByType(node, TextInput) &&
+    filterNodeByType(node, typeToMatch) &&
     matches(placeholder, node.props.placeholder, normalizer, exact)
   );
 };
diff --git a/typings/index.flow.js b/typings/index.flow.js
index 2bbf303c7..588ebd581 100644
--- a/typings/index.flow.js
+++ b/typings/index.flow.js
@@ -12,6 +12,11 @@ type CommonQueryOptions = {
   includeHiddenElements?: boolean,
   hidden?: boolean,
 };
+
+type LegacyQueryOptions = {
+  legacy?: boolean,
+};
+
 type TextMatch = string | RegExp;
 
 declare type NormalizerFn = (textToNormalize: string) => string;
@@ -168,7 +173,9 @@ interface ByDisplayValueQueries {
   ) => FindAllReturn;
 }
 
-type ByPlaceholderTextOptions = CommonQueryOptions & TextMatchOptions;
+type ByPlaceholderTextOptions = CommonQueryOptions &
+  TextMatchOptions &
+  LegacyQueryOptions;
 
 interface ByPlaceholderTextQueries {
   getByPlaceholderText: (
@@ -469,6 +476,7 @@ declare module '@testing-library/react-native' {
     asyncUtilTimeout: number;
     defaultIncludeHiddenElements: boolean;
     defaultDebugOptions?: $Shape<DebugOptions>;
+    useLegacyQueries: boolean;
   }
 
   declare interface ConfigAliasOptions {
diff --git a/website/docs/API.md b/website/docs/API.md
index 410f492a0..ac5265b54 100644
--- a/website/docs/API.md
+++ b/website/docs/API.md
@@ -875,6 +875,11 @@ This option is also available as `defaultHidden` alias for compatibility with [R
 
 Default [debug options](#debug) to be used when calling `debug()`. These default options will be overridden by the ones you specify directly when calling `debug()`.
 
+
+#### `useLegacyQueries` option
+
+`byText`, `byPlaceholderText` and `byDisplayValue` queries used to return composite elements (see the doc on [testing environment](./TestingEnvironment.md)) for more information on composite and host components) but they now return host components. This can break tests if you use the element returned by these queries, for instance the props may be slightly different. To keep the legacy behavior, set this option to true. 
+
 ### `resetToDefaults()`
 
 ```ts
diff --git a/website/docs/Queries.md b/website/docs/Queries.md
index 39f0748e1..363427666 100644
--- a/website/docs/Queries.md
+++ b/website/docs/Queries.md
@@ -131,7 +131,8 @@ getByPlaceholderText(
   options?: {
     exact?: boolean;
     normalizer?: (text: string) => string;
-    includeHiddenElements?: boolean;
+    hidden?: boolean;
+    legacy?: boolean;
   }
 ): ReactTestInstance;
 ```

From 88c7f93af2cfd65304fb0e0de6ad8e5f5228e31f Mon Sep 17 00:00:00 2001
From: pierrezimmermann <pierrez@nam.tech>
Date: Sun, 20 Nov 2022 09:48:18 +0100
Subject: [PATCH 02/45] BREAKING CHANGE : make displayValue queries return host
 elements

---
 src/queries/__tests__/displayValue.test.tsx | 32 ++++++++++++++++++++-
 src/queries/displayValue.ts                 | 17 ++++++++---
 typings/index.flow.js                       |  4 ++-
 website/docs/Queries.md                     |  1 +
 4 files changed, 48 insertions(+), 6 deletions(-)

diff --git a/src/queries/__tests__/displayValue.test.tsx b/src/queries/__tests__/displayValue.test.tsx
index 1ba94bff2..75a71d591 100644
--- a/src/queries/__tests__/displayValue.test.tsx
+++ b/src/queries/__tests__/displayValue.test.tsx
@@ -1,7 +1,7 @@
 import * as React from 'react';
 import { View, TextInput } from 'react-native';
 
-import { render } from '../..';
+import { render, configure, resetToDefaults } from '../..';
 
 const PLACEHOLDER_FRESHNESS = 'Add custom freshness';
 const PLACEHOLDER_CHEF = 'Who inspected freshness?';
@@ -10,6 +10,10 @@ const INPUT_CHEF = 'I inspected freshie';
 const DEFAULT_INPUT_CHEF = 'What did you inspect?';
 const DEFAULT_INPUT_CUSTOMER = 'What banana?';
 
+beforeEach(() => {
+  resetToDefaults();
+});
+
 const Banana = () => (
   <View>
     <TextInput
@@ -119,3 +123,29 @@ test('byDisplayValue queries support hidden option', () => {
     `"Unable to find an element with displayValue: hidden"`
   );
 });
+
+test('byDisplayValue should return composite component if useLegacyQueries option is true', () => {
+  configure({ useLegacyQueries: true });
+  const { getByDisplayValue } = render(<TextInput value="value" />);
+
+  expect(getByDisplayValue('value').type).toBe(TextInput);
+});
+
+test('byDisplayValue should return host component if useLegacyQueries option is false', () => {
+  const { getByDisplayValue } = render(<TextInput value="value" />);
+
+  expect(getByDisplayValue('value').type).toBe('TextInput');
+});
+
+test('byDisplayValue should return composite component if legacy option is true', () => {
+  const { getByDisplayValue } = render(<TextInput value="value" />);
+
+  expect(getByDisplayValue('value', { legacy: true }).type).toBe(TextInput);
+});
+
+test('byDisplayValue should return host component if legacy option is false', () => {
+  configure({ useLegacyQueries: true });
+  const { getByDisplayValue } = render(<TextInput value="value" />);
+
+  expect(getByDisplayValue('value', { legacy: false }).type).toBe('TextInput');
+});
diff --git a/src/queries/displayValue.ts b/src/queries/displayValue.ts
index e10b03e8d..59c40aa4e 100644
--- a/src/queries/displayValue.ts
+++ b/src/queries/displayValue.ts
@@ -12,20 +12,29 @@ import type {
   QueryAllByQuery,
   QueryByQuery,
 } from './makeQueries';
-import type { CommonQueryOptions } from './options';
+import {
+  CommonQueryOptions,
+  LegacyQueryOptions,
+  shouldReturnCompositeComponent,
+} from './options';
 
-type ByDisplayValueOptions = CommonQueryOptions & TextMatchOptions;
+type ByDisplayValueOptions = CommonQueryOptions &
+  TextMatchOptions &
+  LegacyQueryOptions;
 
 const getTextInputNodeByDisplayValue = (
   node: ReactTestInstance,
   value: TextMatch,
-  options: TextMatchOptions = {}
+  options: TextMatchOptions & LegacyQueryOptions = {}
 ) => {
   const { exact, normalizer } = options;
   const nodeValue =
     node.props.value !== undefined ? node.props.value : node.props.defaultValue;
+  const typeToMatch = shouldReturnCompositeComponent(options)
+    ? TextInput
+    : 'TextInput';
   return (
-    filterNodeByType(node, TextInput) &&
+    filterNodeByType(node, typeToMatch) &&
     matches(value, nodeValue, normalizer, exact)
   );
 };
diff --git a/typings/index.flow.js b/typings/index.flow.js
index 588ebd581..eb4eb03b9 100644
--- a/typings/index.flow.js
+++ b/typings/index.flow.js
@@ -142,7 +142,9 @@ interface ByTestIdQueries {
   ) => FindAllReturn;
 }
 
-type ByDisplayValueOptions = CommonQueryOptions & TextMatchOptions;
+type ByDisplayValueOptions = CommonQueryOptions &
+  TextMatchOptions &
+  LegacyQueryOptions;
 
 interface ByDisplayValueQueries {
   getByDisplayValue: (
diff --git a/website/docs/Queries.md b/website/docs/Queries.md
index 363427666..860db5385 100644
--- a/website/docs/Queries.md
+++ b/website/docs/Queries.md
@@ -157,6 +157,7 @@ getByDisplayValue(
     exact?: boolean;
     normalizer?: (text: string) => string;
     includeHiddenElements?: boolean;
+    legacy?: boolean;
   }
 ): ReactTestInstance;
 ```

From 0b229b6099f04a8b33cd5c188815b95cf61d8559 Mon Sep 17 00:00:00 2001
From: pierrezimmermann <pierrez@nam.tech>
Date: Sun, 20 Nov 2022 09:49:21 +0100
Subject: [PATCH 03/45] BREAKING CHANGE: make text queries return host elements

---
 src/helpers/matchers/matchTextContent.ts |  5 ++-
 src/queries/__tests__/text.test.tsx      | 38 +++++++++++++++++-
 src/queries/text.ts                      | 51 +++++++++++++++---------
 typings/index.flow.js                    |  2 +-
 website/docs/Queries.md                  |  1 +
 5 files changed, 75 insertions(+), 22 deletions(-)

diff --git a/src/helpers/matchers/matchTextContent.ts b/src/helpers/matchers/matchTextContent.ts
index 8b011b916..82ddf17a7 100644
--- a/src/helpers/matchers/matchTextContent.ts
+++ b/src/helpers/matchers/matchTextContent.ts
@@ -1,4 +1,4 @@
-import { Text } from 'react-native';
+import { ElementType } from 'react';
 import type { ReactTestInstance } from 'react-test-renderer';
 import { matches, TextMatch, TextMatchOptions } from '../../matches';
 import { filterNodeByType } from '../filterNodeByType';
@@ -7,9 +7,10 @@ import { getTextContent } from '../getTextContent';
 export function matchTextContent(
   node: ReactTestInstance,
   text: TextMatch,
+  typeToMatch: ElementType | string,
   options: TextMatchOptions = {}
 ) {
-  if (!filterNodeByType(node, Text)) {
+  if (!filterNodeByType(node, typeToMatch)) {
     return false;
   }
 
diff --git a/src/queries/__tests__/text.test.tsx b/src/queries/__tests__/text.test.tsx
index 62d0d131e..c266dce7c 100644
--- a/src/queries/__tests__/text.test.tsx
+++ b/src/queries/__tests__/text.test.tsx
@@ -7,7 +7,17 @@ import {
   Button,
   TextInput,
 } from 'react-native';
-import { render, getDefaultNormalizer, within } from '../..';
+import {
+  configure,
+  render,
+  resetToDefaults,
+  getDefaultNormalizer,
+  within,
+} from '../..';
+
+beforeEach(() => {
+  resetToDefaults();
+});
 
 test('byText matches simple text', () => {
   const { getByText } = render(<Text testID="text">Hello World</Text>);
@@ -502,3 +512,29 @@ test('byText support hidden option', () => {
     `"Unable to find an element with text: /hidden/i"`
   );
 });
+
+test('byText should return composite component if useLegacyQueries option is true', () => {
+  configure({ useLegacyQueries: true });
+  const { getByText } = render(<Text>hello</Text>);
+
+  expect(getByText('hello').type).toBe(Text);
+});
+
+test('byText should return host component if useLegacyQueries option is false', () => {
+  const { getByText } = render(<Text>hello</Text>);
+
+  expect(getByText('hello').type).toBe('Text');
+});
+
+test('byText should return composite component if legacy option is true', () => {
+  const { getByText } = render(<Text>hello</Text>);
+
+  expect(getByText('hello', { legacy: true }).type).toBe(Text);
+});
+
+test('byText should return host component if legacy option is false', () => {
+  configure({ useLegacyQueries: true });
+  const { getByText } = render(<Text>hello</Text>);
+
+  expect(getByText('hello', { legacy: false }).type).toBe('Text');
+});
diff --git a/src/queries/text.ts b/src/queries/text.ts
index c133070e8..8c8bcc8fa 100644
--- a/src/queries/text.ts
+++ b/src/queries/text.ts
@@ -1,12 +1,12 @@
 import type { ReactTestInstance } from 'react-test-renderer';
 import { Text } from 'react-native';
-import {
-  isHostElementForType,
-  getCompositeParentOfType,
-} from '../helpers/component-tree';
 import { findAll } from '../helpers/findAll';
 import { matchTextContent } from '../helpers/matchers/matchTextContent';
 import { TextMatch, TextMatchOptions } from '../matches';
+import {
+  getCompositeParentOfType,
+  isHostElementForType,
+} from '../helpers/component-tree';
 import { makeQueries } from './makeQueries';
 import type {
   FindAllByQuery,
@@ -16,29 +16,44 @@ import type {
   QueryAllByQuery,
   QueryByQuery,
 } from './makeQueries';
-import { CommonQueryOptions } from './options';
+import {
+  CommonQueryOptions,
+  LegacyQueryOptions,
+  shouldReturnCompositeComponent,
+} from './options';
 
-type ByTextOptions = CommonQueryOptions & TextMatchOptions;
+type ByTextOptions = CommonQueryOptions & TextMatchOptions & LegacyQueryOptions;
 
 const queryAllByText = (
   instance: ReactTestInstance
 ): ((text: TextMatch, options?: ByTextOptions) => Array<ReactTestInstance>) =>
-  function queryAllByTextFn(text, options) {
-    const baseInstance = isHostElementForType(instance, Text)
-      ? getCompositeParentOfType(instance, Text)
-      : instance;
+  function queryAllByTextFn(text, options = {}) {
+    if (shouldReturnCompositeComponent(options)) {
+      const baseInstance = isHostElementForType(instance, Text)
+        ? getCompositeParentOfType(instance, Text)
+        : instance;
 
-    if (!baseInstance) {
-      return [];
+      if (!baseInstance) {
+        return [];
+      }
+
+      const results = findAll(
+        baseInstance,
+        (node) => matchTextContent(node, text, Text, options),
+        { ...options, matchDeepestOnly: true }
+      );
+
+      return results;
     }
 
-    const results = findAll(
-      baseInstance,
-      (node) => matchTextContent(node, text, options),
-      { ...options, matchDeepestOnly: true }
+    return findAll(
+      instance,
+      (node) => matchTextContent(node, text, 'Text', options),
+      {
+        ...options,
+        matchDeepestOnly: true,
+      }
     );
-
-    return results;
   };
 
 const getMultipleError = (text: TextMatch) =>
diff --git a/typings/index.flow.js b/typings/index.flow.js
index eb4eb03b9..9b26f7c53 100644
--- a/typings/index.flow.js
+++ b/typings/index.flow.js
@@ -83,7 +83,7 @@ type WaitForFunction = <T = any>(
   options?: WaitForOptions
 ) => Promise<T>;
 
-type ByTextOptions = CommonQueryOptions & TextMatchOptions;
+type ByTextOptions = CommonQueryOptions & TextMatchOptions & LegacyQueryOptions;
 
 interface ByTextQueries {
   getByText: (text: TextMatch, options?: ByTextOptions) => ReactTestInstance;
diff --git a/website/docs/Queries.md b/website/docs/Queries.md
index 860db5385..367dba3c5 100644
--- a/website/docs/Queries.md
+++ b/website/docs/Queries.md
@@ -106,6 +106,7 @@ getByText(
     exact?: boolean;
     normalizer?: (text: string) => string;
     includeHiddenElements?: boolean;
+    legacy?: boolean;
   }
 ): ReactTestInstance;
 ```

From 56249844d61173c9ca9c99afdde5c0ebf9bd2e6a Mon Sep 17 00:00:00 2001
From: pierrezimmermann <pierrez@nam.tech>
Date: Sun, 20 Nov 2022 10:41:43 +0100
Subject: [PATCH 04/45] refactor: reset config to default before each test

---
 jestSetupFileAfterEnv.ts                       |  5 +++++
 package.json                                   |  1 +
 src/__tests__/config.test.ts                   |  4 ----
 src/__tests__/render-debug.test.tsx            |  3 +--
 src/__tests__/render.test.tsx                  |  6 +-----
 src/__tests__/waitFor.test.tsx                 |  6 +-----
 src/queries/__tests__/displayValue.test.tsx    |  6 +-----
 src/queries/__tests__/placeholderText.test.tsx |  6 +-----
 src/queries/__tests__/text.test.tsx            | 12 +-----------
 9 files changed, 12 insertions(+), 37 deletions(-)
 create mode 100644 jestSetupFileAfterEnv.ts

diff --git a/jestSetupFileAfterEnv.ts b/jestSetupFileAfterEnv.ts
new file mode 100644
index 000000000..f120a77e7
--- /dev/null
+++ b/jestSetupFileAfterEnv.ts
@@ -0,0 +1,5 @@
+import { resetToDefaults } from './src/pure';
+
+beforeEach(() => {
+  resetToDefaults();
+});
diff --git a/package.json b/package.json
index ee2c6f152..4a71452f6 100644
--- a/package.json
+++ b/package.json
@@ -90,6 +90,7 @@
     "setupFiles": [
       "./jestSetup.js"
     ],
+    "setupFilesAfterEnv": ["./jestSetupFileAfterEnv.ts"],
     "testPathIgnorePatterns": [
       "timerUtils",
       "examples/"
diff --git a/src/__tests__/config.test.ts b/src/__tests__/config.test.ts
index e32ec2b5b..576aeb8e5 100644
--- a/src/__tests__/config.test.ts
+++ b/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);
diff --git a/src/__tests__/render-debug.test.tsx b/src/__tests__/render-debug.test.tsx
index 6697de3da..bd6652430 100644
--- a/src/__tests__/render-debug.test.tsx
+++ b/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))) {
diff --git a/src/__tests__/render.test.tsx b/src/__tests__/render.test.tsx
index 5cd7e0f97..53a0185c8 100644
--- a/src/__tests__/render.test.tsx
+++ b/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 (
diff --git a/src/__tests__/waitFor.test.tsx b/src/__tests__/waitFor.test.tsx
index 913d76adb..15daf8ac7 100644
--- a/src/__tests__/waitFor.test.tsx
+++ b/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 };
 
diff --git a/src/queries/__tests__/displayValue.test.tsx b/src/queries/__tests__/displayValue.test.tsx
index 75a71d591..6ddf07dc7 100644
--- a/src/queries/__tests__/displayValue.test.tsx
+++ b/src/queries/__tests__/displayValue.test.tsx
@@ -1,7 +1,7 @@
 import * as React from 'react';
 import { View, TextInput } from 'react-native';
 
-import { render, configure, resetToDefaults } from '../..';
+import { render, configure } 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();
-});
-
 const Banana = () => (
   <View>
     <TextInput
diff --git a/src/queries/__tests__/placeholderText.test.tsx b/src/queries/__tests__/placeholderText.test.tsx
index f2b99f993..1933f57cd 100644
--- a/src/queries/__tests__/placeholderText.test.tsx
+++ b/src/queries/__tests__/placeholderText.test.tsx
@@ -1,6 +1,6 @@
 import * as React from 'react';
 import { View, TextInput } from 'react-native';
-import { render, configure, resetToDefaults } from '../..';
+import { render, configure } from '../..';
 
 const PLACEHOLDER_FRESHNESS = 'Add custom freshness';
 const PLACEHOLDER_CHEF = 'Who inspected freshness?';
@@ -8,10 +8,6 @@ const INPUT_FRESHNESS = 'Custom Freshie';
 const INPUT_CHEF = 'I inspected freshie';
 const DEFAULT_INPUT_CHEF = 'What did you inspect?';
 
-beforeEach(() => {
-  resetToDefaults();
-});
-
 const Banana = () => (
   <View>
     <TextInput
diff --git a/src/queries/__tests__/text.test.tsx b/src/queries/__tests__/text.test.tsx
index c266dce7c..48472041a 100644
--- a/src/queries/__tests__/text.test.tsx
+++ b/src/queries/__tests__/text.test.tsx
@@ -7,17 +7,7 @@ import {
   Button,
   TextInput,
 } from 'react-native';
-import {
-  configure,
-  render,
-  resetToDefaults,
-  getDefaultNormalizer,
-  within,
-} from '../..';
-
-beforeEach(() => {
-  resetToDefaults();
-});
+import { configure, render, getDefaultNormalizer, within } from '../..';
 
 test('byText matches simple text', () => {
   const { getByText } = render(<Text testID="text">Hello World</Text>);

From 6bbf105c90659e2c730f5907cb856a05d9c7dffa Mon Sep 17 00:00:00 2001
From: pierrezimmermann <pierrez@nam.tech>
Date: Sun, 20 Nov 2022 15:51:57 +0100
Subject: [PATCH 05/45] feat: use component names from config and add api to
 configure them

---
 src/__tests__/config.test.ts                  |  19 ++++
 src/config.ts                                 |  10 ++
 src/fireEvent.ts                              |   3 +-
 .../getReactNativeHostComponentNames.tsx      |  18 +++
 .../__tests__/host-component-names.test.tsx   | 105 ++++++++++++++++++
 src/queries/displayValue.ts                   |   4 +-
 src/queries/makeQueries.ts                    |  30 ++++-
 src/queries/placeholderText.ts                |   6 +-
 src/queries/text.ts                           |   9 +-
 typings/index.flow.js                         |   6 +
 website/docs/API.md                           |   6 +
 11 files changed, 209 insertions(+), 7 deletions(-)
 create mode 100644 src/helpers/getReactNativeHostComponentNames.tsx
 create mode 100644 src/queries/__tests__/host-component-names.test.tsx

diff --git a/src/__tests__/config.test.ts b/src/__tests__/config.test.ts
index 576aeb8e5..5e41bb1ab 100644
--- a/src/__tests__/config.test.ts
+++ b/src/__tests__/config.test.ts
@@ -20,6 +20,10 @@ test('configure() overrides existing config values', () => {
     defaultIncludeHiddenElements: true,
     useBreakingChanges: false,
     useLegacyQueries: false,
+    hostComponentNames: {
+      text: 'Text',
+      textInput: 'TextInput',
+    },
   });
 });
 
@@ -55,3 +59,18 @@ test('configure handles alias option defaultHidden', () => {
   configure({ defaultHidden: false });
   expect(getConfig().defaultIncludeHiddenElements).toEqual(false);
 });
+
+test('configure handles hostComponentNames', () => {
+  expect(getConfig().hostComponentNames).toEqual({
+    text: 'Text',
+    textInput: 'TextInput',
+  });
+
+  configure({
+    hostComponentNames: { text: 'RCText', textInput: 'RCTextInput' },
+  });
+  expect(getConfig().hostComponentNames).toEqual({
+    text: 'RCText',
+    textInput: 'RCTextInput',
+  });
+});
diff --git a/src/config.ts b/src/config.ts
index 26c404336..ee190be25 100644
--- a/src/config.ts
+++ b/src/config.ts
@@ -3,6 +3,12 @@ import { DebugOptions } from './helpers/debugDeep';
 /**
  * Global configuration options for React Native Testing Library.
  */
+
+export type HostComponentNames = {
+  text: string;
+  textInput: string;
+};
+
 export type Config = {
   /** Default timeout, in ms, for `waitFor` and `findBy*` queries. */
   asyncUtilTimeout: number;
@@ -15,6 +21,9 @@ export type Config = {
 
   /** Option to return composite components */
   useLegacyQueries: boolean;
+
+  /** Host component names used for queries */
+  hostComponentNames: HostComponentNames;
 };
 
 export type ConfigAliasOptions = {
@@ -32,6 +41,7 @@ const defaultConfig: InternalConfig = {
   asyncUtilTimeout: 1000,
   defaultIncludeHiddenElements: true,
   useLegacyQueries: false,
+  hostComponentNames: { text: 'Text', textInput: 'TextInput' },
 };
 
 let config = { ...defaultConfig };
diff --git a/src/fireEvent.ts b/src/fireEvent.ts
index f5ec35f4f..7ca1c5f99 100644
--- a/src/fireEvent.ts
+++ b/src/fireEvent.ts
@@ -14,8 +14,7 @@ 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 but since fireEvent bubbles up
   // it would trigger the parent prop without the composite component check
   return (
     filterNodeByType(element, TextInput) ||
diff --git a/src/helpers/getReactNativeHostComponentNames.tsx b/src/helpers/getReactNativeHostComponentNames.tsx
new file mode 100644
index 000000000..ac3e26345
--- /dev/null
+++ b/src/helpers/getReactNativeHostComponentNames.tsx
@@ -0,0 +1,18 @@
+import React from 'react';
+import { Text, TextInput, View } from 'react-native';
+import { HostComponentNames } from '../config';
+import render from '../render';
+
+export function getReactNativeHostComponentNames(): HostComponentNames {
+  const { getByTestId } = render(
+    <View>
+      <Text testID="text">Hello</Text>
+      <TextInput testID="textInput" />
+    </View>
+  );
+
+  return {
+    text: getByTestId('text').type as string,
+    textInput: getByTestId('textInput').type as string,
+  };
+}
diff --git a/src/queries/__tests__/host-component-names.test.tsx b/src/queries/__tests__/host-component-names.test.tsx
new file mode 100644
index 000000000..6641e33cd
--- /dev/null
+++ b/src/queries/__tests__/host-component-names.test.tsx
@@ -0,0 +1,105 @@
+import React from 'react';
+import { Text, TextInput } from 'react-native';
+import { render, screen, configure } from '../../pure';
+
+describe('host component names', () => {
+  test('byText queries should use text host name from config', () => {
+    render(<Text>hello</Text>);
+
+    expect(screen.getByText('hello')).toBeTruthy();
+
+    configure({
+      hostComponentNames: { text: 'wrongName', textInput: 'wrongName' },
+    });
+
+    expect(screen.queryByText('hello')).toBeFalsy();
+  });
+
+  test('byDisplayValue queries should use textInput host name from config', () => {
+    render(<TextInput value="email" />);
+
+    expect(screen.getByDisplayValue('email')).toBeTruthy();
+
+    configure({
+      hostComponentNames: { text: 'wrongName', textInput: 'wrongName' },
+    });
+
+    expect(screen.queryByDisplayValue('email')).toBeFalsy();
+  });
+
+  test('byPlaceholderText queries should use textInput host name from config', () => {
+    render(<TextInput placeholder="email" />);
+
+    expect(screen.getByPlaceholderText('email')).toBeTruthy();
+
+    configure({
+      hostComponentNames: { text: 'wrongName', textInput: 'wrongName' },
+    });
+
+    expect(screen.queryByPlaceholderText('email')).toBeFalsy();
+  });
+
+  it('should suggest appropriated config when a getByText query fails and wrong component names are used', () => {
+    configure({
+      hostComponentNames: { text: 'wrongName', textInput: 'wrongName' },
+    });
+
+    render(<Text>hello</Text>);
+
+    expect(() => screen.getByText('hello')).toThrowErrorMatchingInlineSnapshot(`
+      "Unable to find an element with text: hello
+
+      The wrong host component names are used. This can happen if you use a version of react native that is not compatible with your version of @testing-library/react-native
+
+      To fix this, either upgrade to a version that supports your version of react native or add the following line in a setup file :
+
+      configure({ hostComponentNames: { text: 'Text', textInput: 'TextInput' } });"
+    `);
+  });
+
+  it('should suggest appropriated config when a getByDisplayValue query fails and wrong component names are used', () => {
+    configure({
+      hostComponentNames: { text: 'wrongName', textInput: 'wrongName' },
+    });
+
+    render(<TextInput value="value" />);
+
+    expect(() => screen.getByDisplayValue('value'))
+      .toThrowErrorMatchingInlineSnapshot(`
+      "Unable to find an element with displayValue: value
+
+      The wrong host component names are used. This can happen if you use a version of react native that is not compatible with your version of @testing-library/react-native
+
+      To fix this, either upgrade to a version that supports your version of react native or add the following line in a setup file :
+
+      configure({ hostComponentNames: { text: 'Text', textInput: 'TextInput' } });"
+    `);
+  });
+
+  it('should suggest appropriated config when a getByPlaceholderText query fails and wrong component names are used', () => {
+    configure({
+      hostComponentNames: { text: 'wrongName', textInput: 'wrongName' },
+    });
+
+    render(<TextInput placeholder="placeholder" />);
+
+    expect(() => screen.getByPlaceholderText('placeholder'))
+      .toThrowErrorMatchingInlineSnapshot(`
+      "Unable to find an element with placeholder: placeholder
+
+      The wrong host component names are used. This can happen if you use a version of react native that is not compatible with your version of @testing-library/react-native
+
+      To fix this, either upgrade to a version that supports your version of react native or add the following line in a setup file :
+
+      configure({ hostComponentNames: { text: 'Text', textInput: 'TextInput' } });"
+    `);
+  });
+
+  it('should not suggest to change config when a query fails but the correct component names are used', () => {
+    render(<Text>bonjour</Text>);
+
+    expect(() => screen.getByText('hello')).toThrowErrorMatchingInlineSnapshot(
+      `"Unable to find an element with text: hello"`
+    );
+  });
+});
diff --git a/src/queries/displayValue.ts b/src/queries/displayValue.ts
index 59c40aa4e..dec77900e 100644
--- a/src/queries/displayValue.ts
+++ b/src/queries/displayValue.ts
@@ -3,6 +3,7 @@ import { TextInput } from 'react-native';
 import { filterNodeByType } from '../helpers/filterNodeByType';
 import { findAll } from '../helpers/findAll';
 import { matches, TextMatch, TextMatchOptions } from '../matches';
+import { getConfig } from '../config';
 import { makeQueries } from './makeQueries';
 import type {
   FindAllByQuery,
@@ -32,7 +33,8 @@ const getTextInputNodeByDisplayValue = (
     node.props.value !== undefined ? node.props.value : node.props.defaultValue;
   const typeToMatch = shouldReturnCompositeComponent(options)
     ? TextInput
-    : 'TextInput';
+    : getConfig().hostComponentNames.textInput;
+
   return (
     filterNodeByType(node, typeToMatch) &&
     matches(value, nodeValue, normalizer, exact)
diff --git a/src/queries/makeQueries.ts b/src/queries/makeQueries.ts
index a309d10fa..d5af2e4fe 100644
--- a/src/queries/makeQueries.ts
+++ b/src/queries/makeQueries.ts
@@ -2,6 +2,8 @@ import type { ReactTestInstance } from 'react-test-renderer';
 import { ErrorWithStack } from '../helpers/errors';
 import waitFor from '../waitFor';
 import type { WaitForOptions } from '../waitFor';
+import { getReactNativeHostComponentNames } from '../helpers/getReactNativeHostComponentNames';
+import { getConfig } from '../config';
 
 export type GetByQuery<Predicate, Options = void> = (
   predicate: Predicate,
@@ -83,6 +85,26 @@ Example:
   return waitForOptions;
 }
 
+function getWrongHostComponentNamesError(): string {
+  const reactNativeHostComponentNames = getReactNativeHostComponentNames();
+  const configHostComponentNames = getConfig().hostComponentNames;
+  if (
+    reactNativeHostComponentNames.text !== configHostComponentNames.text ||
+    reactNativeHostComponentNames.textInput !==
+      configHostComponentNames.textInput
+  ) {
+    return `
+
+The wrong host component names are used. This can happen if you use a version of react native that is not compatible with your version of @testing-library/react-native
+
+To fix this, either upgrade to a version that supports your version of react native or add the following line in a setup file :
+
+configure({ hostComponentNames: { text: '${reactNativeHostComponentNames.text}', textInput: '${reactNativeHostComponentNames.textInput}' } });`;
+  }
+
+  return '';
+}
+
 export function makeQueries<Predicate, Options>(
   queryAllByQuery: UnboundQuery<QueryAllByQuery<Predicate, Options>>,
   getMissingError: (predicate: Predicate, options?: Options) => string,
@@ -128,7 +150,13 @@ export function makeQueries<Predicate, Options>(
       }
 
       if (results.length === 0) {
-        throw new ErrorWithStack(getMissingError(predicate, options), getFn);
+        throw new ErrorWithStack(
+          `${getMissingError(
+            predicate,
+            options
+          )}${getWrongHostComponentNamesError()}`,
+          getFn
+        );
       }
 
       return results[0];
diff --git a/src/queries/placeholderText.ts b/src/queries/placeholderText.ts
index 8e14e1b36..a57c4316f 100644
--- a/src/queries/placeholderText.ts
+++ b/src/queries/placeholderText.ts
@@ -1,8 +1,9 @@
 import type { ReactTestInstance } from 'react-test-renderer';
 import { TextInput } from 'react-native';
 import { findAll } from '../helpers/findAll';
-import { filterNodeByType } from '../helpers/filterNodeByType';
 import { matches, TextMatch, TextMatchOptions } from '../matches';
+import { getConfig } from '../config';
+import { filterNodeByType } from '../helpers/filterNodeByType';
 import { makeQueries } from './makeQueries';
 import type {
   FindAllByQuery,
@@ -30,7 +31,8 @@ const getTextInputNodeByPlaceholderText = (
   const { exact, normalizer } = options;
   const typeToMatch = shouldReturnCompositeComponent(options)
     ? TextInput
-    : 'TextInput';
+    : getConfig().hostComponentNames.textInput;
+
   return (
     filterNodeByType(node, typeToMatch) &&
     matches(placeholder, node.props.placeholder, normalizer, exact)
diff --git a/src/queries/text.ts b/src/queries/text.ts
index 8c8bcc8fa..4c3286b68 100644
--- a/src/queries/text.ts
+++ b/src/queries/text.ts
@@ -7,6 +7,7 @@ import {
   getCompositeParentOfType,
   isHostElementForType,
 } from '../helpers/component-tree';
+import { getConfig } from '../config';
 import { makeQueries } from './makeQueries';
 import type {
   FindAllByQuery,
@@ -48,7 +49,13 @@ const queryAllByText = (
 
     return findAll(
       instance,
-      (node) => matchTextContent(node, text, 'Text', options),
+      (node) =>
+        matchTextContent(
+          node,
+          text,
+          getConfig().hostComponentNames.text,
+          options
+        ),
       {
         ...options,
         matchDeepestOnly: true,
diff --git a/typings/index.flow.js b/typings/index.flow.js
index 9b26f7c53..fa45e3618 100644
--- a/typings/index.flow.js
+++ b/typings/index.flow.js
@@ -474,11 +474,17 @@ declare module '@testing-library/react-native' {
 
   declare export var waitForElementToBeRemoved: WaitForElementToBeRemovedFunction;
 
+  declare interface HostComponentNames {
+    text: string;
+    textInput: string;
+  }
+
   declare interface Config {
     asyncUtilTimeout: number;
     defaultIncludeHiddenElements: boolean;
     defaultDebugOptions?: $Shape<DebugOptions>;
     useLegacyQueries: boolean;
+    HostComponentNames: HostComponentNames;
   }
 
   declare interface ConfigAliasOptions {
diff --git a/website/docs/API.md b/website/docs/API.md
index ac5265b54..f00b7c3cf 100644
--- a/website/docs/API.md
+++ b/website/docs/API.md
@@ -53,6 +53,7 @@ title: API
     - [`asyncUtilTimeout` option](#asyncutiltimeout-option)
     - [`defaultIncludeHiddenElements` option](#defaultincludehiddenelements-option)
     - [`defaultDebugOptions` option](#defaultdebugoptions-option)
+    - [`hostComponentNames` option](#hostcomponentnames-option)
   - [`resetToDefaults()`](#resettodefaults)
   - [Environment variables](#environment-variables)
     - [`RNTL_SKIP_AUTO_CLEANUP`](#rntl_skip_auto_cleanup)
@@ -854,6 +855,7 @@ type Config = {
   asyncUtilTimeout: number;
   defaultHidden: boolean;
   defaultDebugOptions: Partial<DebugOptions>;
+  hostComponentNames: { text: string; textInput: string }
 };
 
 function configure(options: Partial<Config>) {}
@@ -880,6 +882,10 @@ Default [debug options](#debug) to be used when calling `debug()`. These default
 
 `byText`, `byPlaceholderText` and `byDisplayValue` queries used to return composite elements (see the doc on [testing environment](./TestingEnvironment.md)) for more information on composite and host components) but they now return host components. This can break tests if you use the element returned by these queries, for instance the props may be slightly different. To keep the legacy behavior, set this option to true. 
 
+#### `hostComponentNames` option
+
+The internal names of `Text` and `TextInput` components used by `byText`, `byDisplayValue` and `byPlaceholderText` queries. This should only be changed if you're using a version of React Native that is not compatible with the version of @testing-library/react-native. If that's the case, then failed getBy queries should suggest the appropriate config to use.
+
 ### `resetToDefaults()`
 
 ```ts

From 80e11393882e00b3a51b6984a32692ce8f4fb9ec Mon Sep 17 00:00:00 2001
From: pierre zimmermann <pierrez@bam.tech>
Date: Mon, 28 Nov 2022 21:21:20 +0100
Subject: [PATCH 06/45] feat: remove legacy option from queries

---
 src/queries/__tests__/displayValue.test.tsx   | 13 ------------
 .../__tests__/placeholderText.test.tsx        | 21 -------------------
 src/queries/__tests__/text.test.tsx           | 13 ------------
 src/queries/displayValue.ts                   | 14 ++++---------
 src/queries/options.ts                        | 12 ++---------
 src/queries/placeholderText.ts                | 14 ++++---------
 src/queries/text.ts                           | 10 +++------
 typings/index.flow.js                         | 14 +++----------
 website/docs/Queries.md                       | 11 +++++-----
 9 files changed, 21 insertions(+), 101 deletions(-)

diff --git a/src/queries/__tests__/displayValue.test.tsx b/src/queries/__tests__/displayValue.test.tsx
index 6ddf07dc7..3eed2ddd6 100644
--- a/src/queries/__tests__/displayValue.test.tsx
+++ b/src/queries/__tests__/displayValue.test.tsx
@@ -132,16 +132,3 @@ test('byDisplayValue should return host component if useLegacyQueries option is
 
   expect(getByDisplayValue('value').type).toBe('TextInput');
 });
-
-test('byDisplayValue should return composite component if legacy option is true', () => {
-  const { getByDisplayValue } = render(<TextInput value="value" />);
-
-  expect(getByDisplayValue('value', { legacy: true }).type).toBe(TextInput);
-});
-
-test('byDisplayValue should return host component if legacy option is false', () => {
-  configure({ useLegacyQueries: true });
-  const { getByDisplayValue } = render(<TextInput value="value" />);
-
-  expect(getByDisplayValue('value', { legacy: false }).type).toBe('TextInput');
-});
diff --git a/src/queries/__tests__/placeholderText.test.tsx b/src/queries/__tests__/placeholderText.test.tsx
index 1933f57cd..7a8b1e3a0 100644
--- a/src/queries/__tests__/placeholderText.test.tsx
+++ b/src/queries/__tests__/placeholderText.test.tsx
@@ -95,24 +95,3 @@ test('byPlaceHolderText should return host component if useLegacyQueries option
 
   expect(getByPlaceholderText('placeholder').type).toBe('TextInput');
 });
-
-test('byPlaceHolderText should return composite component if legacy option is true', () => {
-  const { getByPlaceholderText } = render(
-    <TextInput placeholder="placeholder" />
-  );
-
-  expect(getByPlaceholderText('placeholder', { legacy: true }).type).toBe(
-    TextInput
-  );
-});
-
-test('byPlaceHolderText should return host component if legacy option is false', () => {
-  configure({ useLegacyQueries: true });
-  const { getByPlaceholderText } = render(
-    <TextInput placeholder="placeholder" />
-  );
-
-  expect(getByPlaceholderText('placeholder', { legacy: false }).type).toBe(
-    'TextInput'
-  );
-});
diff --git a/src/queries/__tests__/text.test.tsx b/src/queries/__tests__/text.test.tsx
index 48472041a..f38d2dd76 100644
--- a/src/queries/__tests__/text.test.tsx
+++ b/src/queries/__tests__/text.test.tsx
@@ -515,16 +515,3 @@ test('byText should return host component if useLegacyQueries option is false',
 
   expect(getByText('hello').type).toBe('Text');
 });
-
-test('byText should return composite component if legacy option is true', () => {
-  const { getByText } = render(<Text>hello</Text>);
-
-  expect(getByText('hello', { legacy: true }).type).toBe(Text);
-});
-
-test('byText should return host component if legacy option is false', () => {
-  configure({ useLegacyQueries: true });
-  const { getByText } = render(<Text>hello</Text>);
-
-  expect(getByText('hello', { legacy: false }).type).toBe('Text');
-});
diff --git a/src/queries/displayValue.ts b/src/queries/displayValue.ts
index dec77900e..16f057b37 100644
--- a/src/queries/displayValue.ts
+++ b/src/queries/displayValue.ts
@@ -13,25 +13,19 @@ import type {
   QueryAllByQuery,
   QueryByQuery,
 } from './makeQueries';
-import {
-  CommonQueryOptions,
-  LegacyQueryOptions,
-  shouldReturnCompositeComponent,
-} from './options';
+import { CommonQueryOptions, shouldReturnCompositeComponent } from './options';
 
-type ByDisplayValueOptions = CommonQueryOptions &
-  TextMatchOptions &
-  LegacyQueryOptions;
+type ByDisplayValueOptions = CommonQueryOptions & TextMatchOptions;
 
 const getTextInputNodeByDisplayValue = (
   node: ReactTestInstance,
   value: TextMatch,
-  options: TextMatchOptions & LegacyQueryOptions = {}
+  options: TextMatchOptions = {}
 ) => {
   const { exact, normalizer } = options;
   const nodeValue =
     node.props.value !== undefined ? node.props.value : node.props.defaultValue;
-  const typeToMatch = shouldReturnCompositeComponent(options)
+  const typeToMatch = shouldReturnCompositeComponent()
     ? TextInput
     : getConfig().hostComponentNames.textInput;
 
diff --git a/src/queries/options.ts b/src/queries/options.ts
index cae342898..cf5b56c12 100644
--- a/src/queries/options.ts
+++ b/src/queries/options.ts
@@ -14,14 +14,6 @@ export type TextMatchOptions = {
   normalizer?: NormalizerFn;
 };
 
-export type LegacyQueryOptions = {
-  legacy?: boolean;
-};
-
-export const shouldReturnCompositeComponent = (option: LegacyQueryOptions) => {
-  if (option.legacy === false) {
-    return false;
-  }
-
-  return option.legacy || getConfig().useLegacyQueries;
+export const shouldReturnCompositeComponent = () => {
+  return getConfig().useLegacyQueries;
 };
diff --git a/src/queries/placeholderText.ts b/src/queries/placeholderText.ts
index a57c4316f..ffa58d50d 100644
--- a/src/queries/placeholderText.ts
+++ b/src/queries/placeholderText.ts
@@ -13,23 +13,17 @@ import type {
   QueryAllByQuery,
   QueryByQuery,
 } from './makeQueries';
-import {
-  CommonQueryOptions,
-  LegacyQueryOptions,
-  shouldReturnCompositeComponent,
-} from './options';
+import { CommonQueryOptions, shouldReturnCompositeComponent } from './options';
 
-type ByPlaceholderTextOptions = CommonQueryOptions &
-  TextMatchOptions &
-  LegacyQueryOptions;
+type ByPlaceholderTextOptions = CommonQueryOptions & TextMatchOptions;
 
 const getTextInputNodeByPlaceholderText = (
   node: ReactTestInstance,
   placeholder: TextMatch,
-  options: TextMatchOptions & LegacyQueryOptions = {}
+  options: TextMatchOptions = {}
 ) => {
   const { exact, normalizer } = options;
-  const typeToMatch = shouldReturnCompositeComponent(options)
+  const typeToMatch = shouldReturnCompositeComponent()
     ? TextInput
     : getConfig().hostComponentNames.textInput;
 
diff --git a/src/queries/text.ts b/src/queries/text.ts
index 4c3286b68..5aa0628c9 100644
--- a/src/queries/text.ts
+++ b/src/queries/text.ts
@@ -17,19 +17,15 @@ import type {
   QueryAllByQuery,
   QueryByQuery,
 } from './makeQueries';
-import {
-  CommonQueryOptions,
-  LegacyQueryOptions,
-  shouldReturnCompositeComponent,
-} from './options';
+import { CommonQueryOptions, shouldReturnCompositeComponent } from './options';
 
-type ByTextOptions = CommonQueryOptions & TextMatchOptions & LegacyQueryOptions;
+type ByTextOptions = CommonQueryOptions & TextMatchOptions;
 
 const queryAllByText = (
   instance: ReactTestInstance
 ): ((text: TextMatch, options?: ByTextOptions) => Array<ReactTestInstance>) =>
   function queryAllByTextFn(text, options = {}) {
-    if (shouldReturnCompositeComponent(options)) {
+    if (shouldReturnCompositeComponent()) {
       const baseInstance = isHostElementForType(instance, Text)
         ? getCompositeParentOfType(instance, Text)
         : instance;
diff --git a/typings/index.flow.js b/typings/index.flow.js
index fa45e3618..506a6901b 100644
--- a/typings/index.flow.js
+++ b/typings/index.flow.js
@@ -13,10 +13,6 @@ type CommonQueryOptions = {
   hidden?: boolean,
 };
 
-type LegacyQueryOptions = {
-  legacy?: boolean,
-};
-
 type TextMatch = string | RegExp;
 
 declare type NormalizerFn = (textToNormalize: string) => string;
@@ -83,7 +79,7 @@ type WaitForFunction = <T = any>(
   options?: WaitForOptions
 ) => Promise<T>;
 
-type ByTextOptions = CommonQueryOptions & TextMatchOptions & LegacyQueryOptions;
+type ByTextOptions = CommonQueryOptions & TextMatchOptions;
 
 interface ByTextQueries {
   getByText: (text: TextMatch, options?: ByTextOptions) => ReactTestInstance;
@@ -142,9 +138,7 @@ interface ByTestIdQueries {
   ) => FindAllReturn;
 }
 
-type ByDisplayValueOptions = CommonQueryOptions &
-  TextMatchOptions &
-  LegacyQueryOptions;
+type ByDisplayValueOptions = CommonQueryOptions & TextMatchOptions;
 
 interface ByDisplayValueQueries {
   getByDisplayValue: (
@@ -175,9 +169,7 @@ interface ByDisplayValueQueries {
   ) => FindAllReturn;
 }
 
-type ByPlaceholderTextOptions = CommonQueryOptions &
-  TextMatchOptions &
-  LegacyQueryOptions;
+type ByPlaceholderTextOptions = CommonQueryOptions & TextMatchOptions;
 
 interface ByPlaceholderTextQueries {
   getByPlaceholderText: (
diff --git a/website/docs/Queries.md b/website/docs/Queries.md
index 367dba3c5..cb8ec55b1 100644
--- a/website/docs/Queries.md
+++ b/website/docs/Queries.md
@@ -106,7 +106,6 @@ getByText(
     exact?: boolean;
     normalizer?: (text: string) => string;
     includeHiddenElements?: boolean;
-    legacy?: boolean;
   }
 ): ReactTestInstance;
 ```
@@ -133,7 +132,6 @@ getByPlaceholderText(
     exact?: boolean;
     normalizer?: (text: string) => string;
     hidden?: boolean;
-    legacy?: boolean;
   }
 ): ReactTestInstance;
 ```
@@ -158,7 +156,6 @@ getByDisplayValue(
     exact?: boolean;
     normalizer?: (text: string) => string;
     includeHiddenElements?: boolean;
-    legacy?: boolean;
   }
 ): ReactTestInstance;
 ```
@@ -290,8 +287,8 @@ render(
   </Pressable>
 );
 const element = screen.getByRole('button');
-const element2 = screen.getByRole('button', { name: "Hello" });
-const element3 = screen.getByRole('button', { name: "Hello", disabled: true });
+const element2 = screen.getByRole('button', { name: 'Hello' });
+const element3 = screen.getByRole('button', { name: 'Hello', disabled: true });
 ```
 
 #### Options
@@ -406,7 +403,9 @@ When querying by `text` entry a string or regex might be used.
 ```jsx
 import { render, screen } from '@testing-library/react-native';
 
-render(<View accessibilityValue={{ min: 0, max: 100, now: 25, text: '25%' }} />);
+render(
+  <View accessibilityValue={{ min: 0, max: 100, now: 25, text: '25%' }} />
+);
 const element = screen.getByA11yValue({ now: 25 });
 const element2 = screen.getByA11yValue({ text: /25/ });
 ```

From 8ee699516d4e889c69d45957e10695b7897e8bb6 Mon Sep 17 00:00:00 2001
From: pierre zimmermann <pierrez@bam.tech>
Date: Mon, 28 Nov 2022 21:34:01 +0100
Subject: [PATCH 07/45] refactor: reorganize legacy and breaking tests for
 queries

---
 .../__tests__/displayValue.breaking.test.tsx  | 127 +++++
 src/queries/__tests__/displayValue.test.tsx   |  11 +-
 .../placeholderText.breaking.test.tsx         |  88 +++
 .../__tests__/placeholderText.test.tsx        |  14 +-
 src/queries/__tests__/text.breaking.test.tsx  | 510 ++++++++++++++++++
 src/queries/__tests__/text.test.tsx           |  13 +-
 6 files changed, 738 insertions(+), 25 deletions(-)
 create mode 100644 src/queries/__tests__/displayValue.breaking.test.tsx
 create mode 100644 src/queries/__tests__/placeholderText.breaking.test.tsx
 create mode 100644 src/queries/__tests__/text.breaking.test.tsx

diff --git a/src/queries/__tests__/displayValue.breaking.test.tsx b/src/queries/__tests__/displayValue.breaking.test.tsx
new file mode 100644
index 000000000..455f614b4
--- /dev/null
+++ b/src/queries/__tests__/displayValue.breaking.test.tsx
@@ -0,0 +1,127 @@
+import * as React from 'react';
+import { View, TextInput } 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';
+const DEFAULT_INPUT_CHEF = 'What did you inspect?';
+const DEFAULT_INPUT_CUSTOMER = 'What banana?';
+
+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)).toThrow();
+  expect(queryByDisplayValue(DEFAULT_INPUT_CHEF)).toBeNull();
+
+  expect(() => getByDisplayValue('hello')).toThrow();
+  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');
+});
diff --git a/src/queries/__tests__/displayValue.test.tsx b/src/queries/__tests__/displayValue.test.tsx
index 3eed2ddd6..536405903 100644
--- a/src/queries/__tests__/displayValue.test.tsx
+++ b/src/queries/__tests__/displayValue.test.tsx
@@ -10,6 +10,8 @@ const INPUT_CHEF = 'I inspected freshie';
 const DEFAULT_INPUT_CHEF = 'What did you inspect?';
 const DEFAULT_INPUT_CUSTOMER = 'What banana?';
 
+beforeEach(() => configure({ useLegacyQueries: true }));
+
 const Banana = () => (
   <View>
     <TextInput
@@ -120,15 +122,8 @@ test('byDisplayValue queries support hidden option', () => {
   );
 });
 
-test('byDisplayValue should return composite component if useLegacyQueries option is true', () => {
-  configure({ useLegacyQueries: true });
+test('byDisplayValue should return composite component', () => {
   const { getByDisplayValue } = render(<TextInput value="value" />);
 
   expect(getByDisplayValue('value').type).toBe(TextInput);
 });
-
-test('byDisplayValue should return host component if useLegacyQueries option is false', () => {
-  const { getByDisplayValue } = render(<TextInput value="value" />);
-
-  expect(getByDisplayValue('value').type).toBe('TextInput');
-});
diff --git a/src/queries/__tests__/placeholderText.breaking.test.tsx b/src/queries/__tests__/placeholderText.breaking.test.tsx
new file mode 100644
index 000000000..b62d058f3
--- /dev/null
+++ b/src/queries/__tests__/placeholderText.breaking.test.tsx
@@ -0,0 +1,88 @@
+import * as React from 'react';
+import { View, TextInput } 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';
+const DEFAULT_INPUT_CHEF = 'What did you inspect?';
+
+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}
+    />
+  </View>
+);
+
+test('getByPlaceholderText, queryByPlaceholderText', () => {
+  const { getByPlaceholderText, queryByPlaceholderText } = render(<Banana />);
+  const input = getByPlaceholderText(/custom/i);
+
+  expect(input.props.placeholder).toBe(PLACEHOLDER_FRESHNESS);
+
+  const sameInput = getByPlaceholderText(PLACEHOLDER_FRESHNESS);
+
+  expect(sameInput.props.placeholder).toBe(PLACEHOLDER_FRESHNESS);
+  expect(() => getByPlaceholderText('no placeholder')).toThrow(
+    'Unable to find an element with placeholder: no placeholder'
+  );
+
+  expect(queryByPlaceholderText(/add/i)).toBe(input);
+  expect(queryByPlaceholderText('no placeholder')).toBeNull();
+  expect(() => queryByPlaceholderText(/fresh/)).toThrow(
+    'Found multiple elements with placeholder: /fresh/ '
+  );
+});
+
+test('getAllByPlaceholderText, queryAllByPlaceholderText', () => {
+  const { getAllByPlaceholderText, queryAllByPlaceholderText } = render(
+    <Banana />
+  );
+  const inputs = getAllByPlaceholderText(/fresh/i);
+
+  expect(inputs).toHaveLength(2);
+  expect(() => getAllByPlaceholderText('no placeholder')).toThrow(
+    'Unable to find an element with placeholder: no placeholder'
+  );
+
+  expect(queryAllByPlaceholderText(/fresh/i)).toEqual(inputs);
+  expect(queryAllByPlaceholderText('no placeholder')).toHaveLength(0);
+});
+
+test('byPlaceholderText queries support hidden option', () => {
+  const { getByPlaceholderText, queryByPlaceholderText } = render(
+    <TextInput placeholder="hidden" style={{ display: 'none' }} />
+  );
+
+  expect(getByPlaceholderText('hidden')).toBeTruthy();
+  expect(
+    getByPlaceholderText('hidden', { includeHiddenElements: true })
+  ).toBeTruthy();
+
+  expect(
+    queryByPlaceholderText('hidden', { includeHiddenElements: false })
+  ).toBeFalsy();
+  expect(() =>
+    getByPlaceholderText('hidden', { includeHiddenElements: false })
+  ).toThrowErrorMatchingInlineSnapshot(
+    `"Unable to find an element with placeholder: hidden"`
+  );
+});
+
+test('byPlaceHolderText should return host component', () => {
+  const { getByPlaceholderText } = render(
+    <TextInput placeholder="placeholder" />
+  );
+
+  expect(getByPlaceholderText('placeholder').type).toBe('TextInput');
+});
diff --git a/src/queries/__tests__/placeholderText.test.tsx b/src/queries/__tests__/placeholderText.test.tsx
index 7a8b1e3a0..fdc605c61 100644
--- a/src/queries/__tests__/placeholderText.test.tsx
+++ b/src/queries/__tests__/placeholderText.test.tsx
@@ -8,6 +8,10 @@ const INPUT_FRESHNESS = 'Custom Freshie';
 const INPUT_CHEF = 'I inspected freshie';
 const DEFAULT_INPUT_CHEF = 'What did you inspect?';
 
+beforeEach(() => {
+  configure({ useLegacyQueries: true });
+});
+
 const Banana = () => (
   <View>
     <TextInput
@@ -79,7 +83,7 @@ test('byPlaceholderText queries support hidden option', () => {
   );
 });
 
-test('byPlaceHolderText should return composite component if useLegacyQueries option is true', () => {
+test('byPlaceHolderText should return composite component', () => {
   configure({ useLegacyQueries: true });
   const { getByPlaceholderText } = render(
     <TextInput placeholder="placeholder" />
@@ -87,11 +91,3 @@ test('byPlaceHolderText should return composite component if useLegacyQueries op
 
   expect(getByPlaceholderText('placeholder').type).toBe(TextInput);
 });
-
-test('byPlaceHolderText should return host component if useLegacyQueries option is false', () => {
-  const { getByPlaceholderText } = render(
-    <TextInput placeholder="placeholder" />
-  );
-
-  expect(getByPlaceholderText('placeholder').type).toBe('TextInput');
-});
diff --git a/src/queries/__tests__/text.breaking.test.tsx b/src/queries/__tests__/text.breaking.test.tsx
new file mode 100644
index 000000000..bce828104
--- /dev/null
+++ b/src/queries/__tests__/text.breaking.test.tsx
@@ -0,0 +1,510 @@
+import * as React from 'react';
+import {
+  View,
+  Text,
+  TouchableOpacity,
+  Image,
+  Button,
+  TextInput,
+} from 'react-native';
+import { render, getDefaultNormalizer, within } from '../..';
+
+test('byText matches simple text', () => {
+  const { getByText } = render(<Text testID="text">Hello World</Text>);
+  expect(getByText('Hello World').props.testID).toBe('text');
+});
+
+test('byText matches inner nested text', () => {
+  const { getByText } = render(
+    <Text testID="outer">
+      <Text testID="inner">Hello World</Text>
+    </Text>
+  );
+  expect(getByText('Hello World').props.testID).toBe('inner');
+});
+
+test('byText matches accross multiple texts', () => {
+  const { getByText } = render(
+    <Text testID="outer">
+      <Text testID="inner-1">Hello</Text> <Text testID="inner-2">World</Text>
+    </Text>
+  );
+  expect(getByText('Hello World').props.testID).toBe('outer');
+});
+
+type MyButtonProps = {
+  children: React.ReactNode;
+  onPress: () => void;
+};
+const MyButton = ({ children, onPress }: MyButtonProps) => (
+  <TouchableOpacity onPress={onPress}>
+    <Text>{children}</Text>
+  </TouchableOpacity>
+);
+
+const Banana = () => {
+  const test = 0;
+  return (
+    <View>
+      <Text>Is the banana fresh?</Text>
+      <Text testID="bananaFresh">not fresh</Text>
+
+      <MyButton onPress={jest.fn()}>Change freshness!</MyButton>
+      <Text testID="duplicateText">First Text</Text>
+      <Text testID="duplicateText">Second Text</Text>
+      <Text>{test}</Text>
+    </View>
+  );
+};
+
+type ChildrenProps = { children: React.ReactNode };
+
+test('getByText, queryByText', () => {
+  const { getByText, queryByText } = render(<Banana />);
+  const button = getByText(/change/i);
+
+  expect(button.props.children).toBe('Change freshness!');
+
+  const sameButton = getByText('not fresh');
+
+  expect(sameButton.props.children).toBe('not fresh');
+  expect(() => getByText('InExistent')).toThrow(
+    'Unable to find an element with text: InExistent'
+  );
+
+  const zeroText = getByText('0');
+
+  expect(queryByText(/change/i)).toBe(button);
+  expect(queryByText('InExistent')).toBeNull();
+  expect(() => queryByText(/fresh/)).toThrow(
+    'Found multiple elements with text: /fresh/'
+  );
+  expect(queryByText('0')).toBe(zeroText);
+});
+
+test('getByText, queryByText with children as Array', () => {
+  type BananaCounterProps = { numBananas: number };
+  const BananaCounter = ({ numBananas }: BananaCounterProps) => (
+    <Text>There are {numBananas} bananas in the bunch</Text>
+  );
+
+  const BananaStore = () => (
+    <View>
+      <BananaCounter numBananas={3} />
+      <BananaCounter numBananas={6} />
+      <BananaCounter numBananas={5} />
+    </View>
+  );
+
+  const { getByText } = render(<BananaStore />);
+
+  const threeBananaBunch = getByText('There are 3 bananas in the bunch');
+  expect(threeBananaBunch.props.children).toEqual([
+    'There are ',
+    3,
+    ' bananas in the bunch',
+  ]);
+});
+
+test('getAllByText, queryAllByText', () => {
+  const { getAllByText, queryAllByText } = render(<Banana />);
+  const buttons = getAllByText(/fresh/i);
+
+  expect(buttons).toHaveLength(3);
+  expect(() => getAllByText('InExistent')).toThrow(
+    'Unable to find an element with text: InExistent'
+  );
+
+  expect(queryAllByText(/fresh/i)).toEqual(buttons);
+  expect(queryAllByText('InExistent')).toHaveLength(0);
+});
+
+test('findByText queries work asynchronously', async () => {
+  const options = { timeout: 10 }; // Short timeout so that this test runs quickly
+  const { rerender, findByText, findAllByText } = render(<View />);
+  await expect(findByText('Some Text', {}, options)).rejects.toBeTruthy();
+  await expect(findAllByText('Some Text', {}, options)).rejects.toBeTruthy();
+
+  setTimeout(
+    () =>
+      rerender(
+        <View>
+          <Text>Some Text</Text>
+        </View>
+      ),
+    20
+  );
+
+  await expect(findByText('Some Text')).resolves.toBeTruthy();
+  await expect(findAllByText('Some Text')).resolves.toHaveLength(1);
+}, 20000);
+
+test('getByText works properly with custom text component', () => {
+  function BoldText({ children }: ChildrenProps) {
+    return <Text>{children}</Text>;
+  }
+
+  expect(
+    render(
+      <Text>
+        <BoldText>Hello</BoldText>
+      </Text>
+    ).getByText('Hello')
+  ).toBeTruthy();
+});
+
+test('getByText works properly with custom text container', () => {
+  function MyText({ children }: ChildrenProps) {
+    return <Text>{children}</Text>;
+  }
+  function BoldText({ children }: ChildrenProps) {
+    return <Text>{children}</Text>;
+  }
+
+  expect(
+    render(
+      <MyText>
+        <BoldText>Hello</BoldText>
+      </MyText>
+    ).getByText('Hello')
+  ).toBeTruthy();
+});
+
+test('queryByText nested <Image> in <Text> at start', () => {
+  expect(
+    render(
+      <Text>
+        <Image source={{}} />
+        Hello
+      </Text>
+    ).queryByText('Hello')
+  ).toBeTruthy();
+});
+
+test('queryByText nested <Image> in <Text> at end', () => {
+  expect(
+    render(
+      <Text>
+        Hello
+        <Image source={{}} />
+      </Text>
+    ).queryByText('Hello')
+  ).toBeTruthy();
+});
+
+test('queryByText nested <Image> in <Text> in middle', () => {
+  expect(
+    render(
+      <Text>
+        Hello
+        <Image source={{}} />
+        World
+      </Text>
+    ).queryByText('HelloWorld')
+  ).toBeTruthy();
+});
+
+test('queryByText not found', () => {
+  expect(
+    render(
+      <Text>
+        Hello
+        <Image source={{}} />
+      </Text>
+    ).queryByText('SomethingElse')
+  ).toBeFalsy();
+});
+
+test('*ByText matches text across multiple nested Text', () => {
+  const { getByText } = render(
+    <Text nativeID="1">
+      Hello{' '}
+      <Text nativeID="2">
+        World
+        <Text>!{true}</Text>
+      </Text>
+    </Text>
+  );
+
+  expect(getByText('Hello World!')).toBeTruthy();
+});
+
+test('queryByText with nested Text components return the closest Text', () => {
+  const NestedTexts = () => (
+    <Text nativeID="1">
+      <Text nativeID="2">My text</Text>
+    </Text>
+  );
+
+  const { queryByText } = render(<NestedTexts />);
+  expect(queryByText('My text', { exact: false })?.props.nativeID).toBe('2');
+});
+
+test('queryByText with nested Text components each with text return the lowest one', () => {
+  const NestedTexts = () => (
+    <Text nativeID="1">
+      bob
+      <Text nativeID="2">My text</Text>
+    </Text>
+  );
+
+  const { queryByText } = render(<NestedTexts />);
+
+  expect(queryByText('My text', { exact: false })?.props.nativeID).toBe('2');
+});
+
+test('queryByText nested deep <CustomText> in <Text>', () => {
+  const CustomText = ({ children }: ChildrenProps) => {
+    return <Text>{children}</Text>;
+  };
+
+  expect(
+    render(
+      <Text>
+        <CustomText>Hello</CustomText> <CustomText>World!</CustomText>
+      </Text>
+    ).getByText('Hello World!')
+  ).toBeTruthy();
+});
+
+test('queryByText with nested Text components: not-exact text match returns the most deeply nested common component', () => {
+  const { queryByText: queryByTextFirstCase } = render(
+    <Text nativeID="1">
+      bob
+      <Text nativeID="2">My </Text>
+      <Text nativeID="3">text</Text>
+    </Text>
+  );
+
+  const { queryByText: queryByTextSecondCase } = render(
+    <Text nativeID="1">
+      bob
+      <Text nativeID="2">My text for test</Text>
+    </Text>
+  );
+
+  expect(queryByTextFirstCase('My text')).toBe(null);
+  expect(
+    queryByTextSecondCase('My text', { exact: false })?.props.nativeID
+  ).toBe('2');
+});
+
+test('queryAllByText does not match several times the same text', () => {
+  const allMatched = render(
+    <Text nativeID="1">
+      Start
+      <Text nativeID="2">This is a long text</Text>
+    </Text>
+  ).queryAllByText('long text', { exact: false });
+  expect(allMatched.length).toBe(1);
+  expect(allMatched[0].props.nativeID).toBe('2');
+});
+
+test('queryAllByText matches all the matching nodes', () => {
+  const allMatched = render(
+    <Text nativeID="1">
+      Start
+      <Text nativeID="2">This is a long text</Text>
+      <Text nativeID="3">This is another long text</Text>
+    </Text>
+  ).queryAllByText('long text', { exact: false });
+  expect(allMatched.length).toBe(2);
+  expect(allMatched.map((node) => node.props.nativeID)).toEqual(['2', '3']);
+});
+
+describe('supports TextMatch options', () => {
+  test('getByText, getAllByText', () => {
+    const { getByText, getAllByText } = render(
+      <View>
+        <Text testID="text">Text and details</Text>
+        <Button
+          testID="button"
+          title="Button and a detail"
+          onPress={jest.fn()}
+        />
+      </View>
+    );
+
+    expect(getByText('details', { exact: false })).toBeTruthy();
+    expect(getAllByText('detail', { exact: false })).toHaveLength(2);
+  });
+
+  test('getByPlaceholderText, getAllByPlaceholderText', () => {
+    const { getByPlaceholderText, getAllByPlaceholderText } = render(
+      <View>
+        <TextInput placeholder={'Placeholder with details'} />
+        <TextInput placeholder={'Placeholder with a DETAIL'} />
+      </View>
+    );
+
+    expect(getByPlaceholderText('details', { exact: false })).toBeTruthy();
+    expect(getAllByPlaceholderText('detail', { exact: false })).toHaveLength(2);
+  });
+
+  test('getByDisplayValue, getAllByDisplayValue', () => {
+    const { getByDisplayValue, getAllByDisplayValue } = render(
+      <View>
+        <TextInput value={'Value with details'} />
+        <TextInput value={'Value with a detail'} />
+      </View>
+    );
+
+    expect(getByDisplayValue('details', { exact: false })).toBeTruthy();
+    expect(getAllByDisplayValue('detail', { exact: false })).toHaveLength(2);
+  });
+
+  test('getByTestId, getAllByTestId', () => {
+    const { getByTestId, getAllByTestId } = render(
+      <View>
+        <View testID="test" />
+        <View testID="tests id" />
+      </View>
+    );
+    expect(getByTestId('id', { exact: false })).toBeTruthy();
+    expect(getAllByTestId('test', { exact: false })).toHaveLength(2);
+  });
+
+  test('with TextMatch option exact === false text search is NOT case sensitive', () => {
+    const { getByText, getAllByText } = render(
+      <View>
+        <Text testID="text">Text and details</Text>
+        <Button
+          testID="button"
+          title="Button and a DeTAil"
+          onPress={jest.fn()}
+        />
+      </View>
+    );
+
+    expect(getByText('DeTaIlS', { exact: false })).toBeTruthy();
+    expect(getAllByText('detail', { exact: false })).toHaveLength(2);
+  });
+});
+
+describe('Supports normalization', () => {
+  test('trims and collapses whitespace by default', () => {
+    const { getByText } = render(
+      <View>
+        <Text>{`  Text     and
+
+        whitespace`}</Text>
+      </View>
+    );
+
+    expect(getByText('Text and whitespace')).toBeTruthy();
+  });
+
+  test('trim and collapseWhitespace is customizable by getDefaultNormalizer param', () => {
+    const testTextWithWhitespace = `  Text     and
+
+        whitespace`;
+    const { getByText } = render(
+      <View>
+        <Text>{testTextWithWhitespace}</Text>
+      </View>
+    );
+
+    expect(
+      getByText(testTextWithWhitespace, {
+        normalizer: getDefaultNormalizer({
+          trim: false,
+          collapseWhitespace: false,
+        }),
+      })
+    ).toBeTruthy();
+  });
+
+  test('normalizer function is customisable', () => {
+    const testText = 'A TO REMOVE text';
+    const normalizerFn = (textToNormalize: string) =>
+      textToNormalize.replace('TO REMOVE ', '');
+    const { getByText } = render(
+      <View>
+        <Text>{testText}</Text>
+      </View>
+    );
+
+    expect(getByText('A text', { normalizer: normalizerFn })).toBeTruthy();
+  });
+});
+
+test('getByText and queryByText work properly with text nested in React.Fragment', () => {
+  const { getByText, queryByText } = render(
+    <Text>
+      <>Hello</>
+    </Text>
+  );
+  expect(getByText('Hello')).toBeTruthy();
+  expect(queryByText('Hello')).not.toBeNull();
+});
+
+test('getByText and queryByText work properly with text partially nested in React.Fragment', () => {
+  const { getByText, queryByText } = render(
+    <Text>
+      He<>llo</>
+    </Text>
+  );
+  expect(getByText('Hello')).toBeTruthy();
+  expect(queryByText('Hello')).not.toBeNull();
+});
+
+test('getByText and queryByText work properly with multiple nested fragments', () => {
+  const { getByText, queryByText } = render(
+    <Text>
+      He
+      <>
+        l<>l</>o
+      </>
+    </Text>
+  );
+  expect(getByText('Hello')).toBeTruthy();
+  expect(queryByText('Hello')).not.toBeNull();
+});
+
+test('getByText and queryByText work with newlines', () => {
+  const textWithNewLines = 'Line 1\nLine 2';
+  const { getByText, queryByText } = render(<Text>{textWithNewLines}</Text>);
+  expect(getByText(textWithNewLines)).toBeTruthy();
+  expect(queryByText(textWithNewLines)).toBeTruthy();
+});
+
+test('getByText and queryByText work with tabs', () => {
+  const textWithTabs = 'Line 1\tLine 2';
+  const { getByText, queryByText } = render(<Text>{textWithTabs}</Text>);
+  expect(getByText(textWithTabs)).toBeTruthy();
+  expect(queryByText(textWithTabs)).toBeTruthy();
+});
+
+test('getByText searches for text within itself', () => {
+  const { getByText } = render(<Text testID="subject">Hello</Text>);
+  const textNode = within(getByText('Hello'));
+  expect(textNode.getByText('Hello')).toBeTruthy();
+});
+
+test('getByText searches for text within self host element', () => {
+  const { getByTestId } = render(<Text testID="subject">Hello</Text>);
+  const textNode = within(getByTestId('subject'));
+  expect(textNode.getByText('Hello')).toBeTruthy();
+});
+
+test('byText support hidden option', () => {
+  const { getByText, queryByText } = render(
+    <Text style={{ display: 'none' }}>Hidden from accessibility</Text>
+  );
+
+  expect(getByText(/hidden/i)).toBeTruthy();
+  expect(getByText(/hidden/i, { includeHiddenElements: true })).toBeTruthy();
+
+  expect(queryByText(/hidden/i, { includeHiddenElements: false })).toBeFalsy();
+  expect(() =>
+    getByText(/hidden/i, { includeHiddenElements: false })
+  ).toThrowErrorMatchingInlineSnapshot(
+    `"Unable to find an element with text: /hidden/i"`
+  );
+});
+
+test('byText should return host component', () => {
+  const { getByText } = render(<Text>hello</Text>);
+
+  expect(getByText('hello').type).toBe('Text');
+});
diff --git a/src/queries/__tests__/text.test.tsx b/src/queries/__tests__/text.test.tsx
index f38d2dd76..dd2e430bf 100644
--- a/src/queries/__tests__/text.test.tsx
+++ b/src/queries/__tests__/text.test.tsx
@@ -9,6 +9,10 @@ import {
 } from 'react-native';
 import { configure, render, getDefaultNormalizer, within } from '../..';
 
+beforeEach(() => {
+  configure({ useLegacyQueries: true });
+});
+
 test('byText matches simple text', () => {
   const { getByText } = render(<Text testID="text">Hello World</Text>);
   expect(getByText('Hello World').props.testID).toBe('text');
@@ -503,15 +507,8 @@ test('byText support hidden option', () => {
   );
 });
 
-test('byText should return composite component if useLegacyQueries option is true', () => {
-  configure({ useLegacyQueries: true });
+test('byText should return composite component', () => {
   const { getByText } = render(<Text>hello</Text>);
 
   expect(getByText('hello').type).toBe(Text);
 });
-
-test('byText should return host component if useLegacyQueries option is false', () => {
-  const { getByText } = render(<Text>hello</Text>);
-
-  expect(getByText('hello').type).toBe('Text');
-});

From bdcbdf2005d96d106dba1694b95e9bc71333253f Mon Sep 17 00:00:00 2001
From: pierre zimmermann <pierrez@bam.tech>
Date: Mon, 28 Nov 2022 21:44:37 +0100
Subject: [PATCH 08/45] feat: change error messages for mismatching host
 component names

---
 .../__tests__/host-component-names.test.tsx   | 33 ++++++++++++++-----
 src/queries/makeQueries.ts                    | 11 +++++--
 2 files changed, 32 insertions(+), 12 deletions(-)

diff --git a/src/queries/__tests__/host-component-names.test.tsx b/src/queries/__tests__/host-component-names.test.tsx
index 6641e33cd..0b064387d 100644
--- a/src/queries/__tests__/host-component-names.test.tsx
+++ b/src/queries/__tests__/host-component-names.test.tsx
@@ -49,11 +49,16 @@ describe('host component names', () => {
     expect(() => screen.getByText('hello')).toThrowErrorMatchingInlineSnapshot(`
       "Unable to find an element with text: hello
 
-      The wrong host component names are used. This can happen if you use a version of react native that is not compatible with your version of @testing-library/react-native
+      You configuration contains invalid host component names. This can happen if you use a version of React Native that is not compatible with your version of @testing-library/react-native
 
-      To fix this, either upgrade to a version that supports your version of react native or add the following line in a setup file :
+      To fix this add following line in a Jest setup file :
 
-      configure({ hostComponentNames: { text: 'Text', textInput: 'TextInput' } });"
+      configure({ 
+        hostComponentNames: { 
+          text: 'Text',
+          textInput: 'TextInput',
+        }
+      });"
     `);
   });
 
@@ -68,11 +73,16 @@ describe('host component names', () => {
       .toThrowErrorMatchingInlineSnapshot(`
       "Unable to find an element with displayValue: value
 
-      The wrong host component names are used. This can happen if you use a version of react native that is not compatible with your version of @testing-library/react-native
+      You configuration contains invalid host component names. This can happen if you use a version of React Native that is not compatible with your version of @testing-library/react-native
 
-      To fix this, either upgrade to a version that supports your version of react native or add the following line in a setup file :
+      To fix this add following line in a Jest setup file :
 
-      configure({ hostComponentNames: { text: 'Text', textInput: 'TextInput' } });"
+      configure({ 
+        hostComponentNames: { 
+          text: 'Text',
+          textInput: 'TextInput',
+        }
+      });"
     `);
   });
 
@@ -87,11 +97,16 @@ describe('host component names', () => {
       .toThrowErrorMatchingInlineSnapshot(`
       "Unable to find an element with placeholder: placeholder
 
-      The wrong host component names are used. This can happen if you use a version of react native that is not compatible with your version of @testing-library/react-native
+      You configuration contains invalid host component names. This can happen if you use a version of React Native that is not compatible with your version of @testing-library/react-native
 
-      To fix this, either upgrade to a version that supports your version of react native or add the following line in a setup file :
+      To fix this add following line in a Jest setup file :
 
-      configure({ hostComponentNames: { text: 'Text', textInput: 'TextInput' } });"
+      configure({ 
+        hostComponentNames: { 
+          text: 'Text',
+          textInput: 'TextInput',
+        }
+      });"
     `);
   });
 
diff --git a/src/queries/makeQueries.ts b/src/queries/makeQueries.ts
index d5af2e4fe..da003bdef 100644
--- a/src/queries/makeQueries.ts
+++ b/src/queries/makeQueries.ts
@@ -95,11 +95,16 @@ function getWrongHostComponentNamesError(): string {
   ) {
     return `
 
-The wrong host component names are used. This can happen if you use a version of react native that is not compatible with your version of @testing-library/react-native
+You configuration contains invalid host component names. This can happen if you use a version of React Native that is not compatible with your version of @testing-library/react-native
 
-To fix this, either upgrade to a version that supports your version of react native or add the following line in a setup file :
+To fix this add following line in a Jest setup file :
 
-configure({ hostComponentNames: { text: '${reactNativeHostComponentNames.text}', textInput: '${reactNativeHostComponentNames.textInput}' } });`;
+configure({ 
+  hostComponentNames: { 
+    text: '${reactNativeHostComponentNames.text}',
+    textInput: '${reactNativeHostComponentNames.textInput}',
+  }
+});`;
   }
 
   return '';

From f34d77d7da3ef5c0484a12ceae981a7e1f705120 Mon Sep 17 00:00:00 2001
From: pierre zimmermann <pierrez@bam.tech>
Date: Mon, 28 Nov 2022 21:54:41 +0100
Subject: [PATCH 09/45] fix: do not update screen when running auto detection

---
 .../getReactNativeHostComponentNames.tsx      |  6 +++--
 .../__tests__/host-component-names.test.tsx   | 25 ++++++++++++++++++-
 2 files changed, 28 insertions(+), 3 deletions(-)

diff --git a/src/helpers/getReactNativeHostComponentNames.tsx b/src/helpers/getReactNativeHostComponentNames.tsx
index ac3e26345..159f871e3 100644
--- a/src/helpers/getReactNativeHostComponentNames.tsx
+++ b/src/helpers/getReactNativeHostComponentNames.tsx
@@ -1,15 +1,17 @@
 import React from 'react';
 import { Text, TextInput, View } from 'react-native';
+import TestRenderer from 'react-test-renderer';
 import { HostComponentNames } from '../config';
-import render from '../render';
+import { getQueriesForElement } from '../within';
 
 export function getReactNativeHostComponentNames(): HostComponentNames {
-  const { getByTestId } = render(
+  const renderer = TestRenderer.create(
     <View>
       <Text testID="text">Hello</Text>
       <TextInput testID="textInput" />
     </View>
   );
+  const { getByTestId } = getQueriesForElement(renderer.root);
 
   return {
     text: getByTestId('text').type as string,
diff --git a/src/queries/__tests__/host-component-names.test.tsx b/src/queries/__tests__/host-component-names.test.tsx
index 0b064387d..7395c5ba1 100644
--- a/src/queries/__tests__/host-component-names.test.tsx
+++ b/src/queries/__tests__/host-component-names.test.tsx
@@ -1,4 +1,4 @@
-import React from 'react';
+import React, { useEffect, useState } from 'react';
 import { Text, TextInput } from 'react-native';
 import { render, screen, configure } from '../../pure';
 
@@ -117,4 +117,27 @@ describe('host component names', () => {
       `"Unable to find an element with text: hello"`
     );
   });
+
+  it('should not update screen object when running detection', async () => {
+    const TestComponent = () => {
+      const [shouldDisplayHello, setShouldDisplayHello] = useState(false);
+
+      useEffect(() => {
+        setTimeout(() => {
+          setShouldDisplayHello(true);
+        }, 500);
+      }, []);
+
+      if (shouldDisplayHello) {
+        return <Text>hello</Text>;
+      }
+
+      return null;
+    };
+
+    render(<TestComponent />);
+
+    expect(await screen.findByText('hello')).toBeTruthy();
+    expect(screen.getByText('hello')).toBeTruthy();
+  });
 });

From 5795c41c2923a0b74debee2f3637ad90b89a0d3a Mon Sep 17 00:00:00 2001
From: pierre zimmermann <pierrez@bam.tech>
Date: Mon, 28 Nov 2022 21:58:01 +0100
Subject: [PATCH 10/45] fix: typo in comment

---
 src/fireEvent.ts | 2 +-
 1 file changed, 1 insertion(+), 1 deletion(-)

diff --git a/src/fireEvent.ts b/src/fireEvent.ts
index 7ca1c5f99..49fbb93e8 100644
--- a/src/fireEvent.ts
+++ b/src/fireEvent.ts
@@ -14,7 +14,7 @@ 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 return host but 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) ||

From 6648c5cdeea3dc1b03c9af01d236c9e7334ed442 Mon Sep 17 00:00:00 2001
From: pierre zimmermann <pierrez@bam.tech>
Date: Mon, 28 Nov 2022 22:00:02 +0100
Subject: [PATCH 11/45] refactor: use an object for matchTextContent params

---
 src/helpers/matchers/matchTextContent.ts | 19 +++++++++++++------
 src/queries/text.ts                      | 10 +++++-----
 2 files changed, 18 insertions(+), 11 deletions(-)

diff --git a/src/helpers/matchers/matchTextContent.ts b/src/helpers/matchers/matchTextContent.ts
index 82ddf17a7..c9f7f7c9c 100644
--- a/src/helpers/matchers/matchTextContent.ts
+++ b/src/helpers/matchers/matchTextContent.ts
@@ -4,12 +4,19 @@ import { matches, TextMatch, TextMatchOptions } from '../../matches';
 import { filterNodeByType } from '../filterNodeByType';
 import { getTextContent } from '../getTextContent';
 
-export function matchTextContent(
-  node: ReactTestInstance,
-  text: TextMatch,
-  typeToMatch: ElementType | string,
-  options: TextMatchOptions = {}
-) {
+type MatchTextContentParams = {
+  node: ReactTestInstance;
+  text: TextMatch;
+  typeToMatch: ElementType | string;
+  options?: TextMatchOptions;
+};
+
+export function matchTextContent({
+  node,
+  text,
+  typeToMatch,
+  options = {},
+}: MatchTextContentParams) {
   if (!filterNodeByType(node, typeToMatch)) {
     return false;
   }
diff --git a/src/queries/text.ts b/src/queries/text.ts
index 5aa0628c9..72fc62755 100644
--- a/src/queries/text.ts
+++ b/src/queries/text.ts
@@ -36,7 +36,7 @@ const queryAllByText = (
 
       const results = findAll(
         baseInstance,
-        (node) => matchTextContent(node, text, Text, options),
+        (node) => matchTextContent({ node, text, typeToMatch: Text, options }),
         { ...options, matchDeepestOnly: true }
       );
 
@@ -46,12 +46,12 @@ const queryAllByText = (
     return findAll(
       instance,
       (node) =>
-        matchTextContent(
+        matchTextContent({
           node,
           text,
-          getConfig().hostComponentNames.text,
-          options
-        ),
+          typeToMatch: getConfig().hostComponentNames.text,
+          options,
+        }),
       {
         ...options,
         matchDeepestOnly: true,

From 6314f59a811f90a3d7590dbab63cf92c59146a35 Mon Sep 17 00:00:00 2001
From: pierre zimmermann <pierrez@bam.tech>
Date: Mon, 28 Nov 2022 22:05:35 +0100
Subject: [PATCH 12/45] tests: rewrite some tests to match repo patterns

---
 .../__tests__/host-component-names.test.tsx   | 136 +++++++++---------
 1 file changed, 67 insertions(+), 69 deletions(-)

diff --git a/src/queries/__tests__/host-component-names.test.tsx b/src/queries/__tests__/host-component-names.test.tsx
index 7395c5ba1..494e26e00 100644
--- a/src/queries/__tests__/host-component-names.test.tsx
+++ b/src/queries/__tests__/host-component-names.test.tsx
@@ -2,51 +2,50 @@ import React, { useEffect, useState } from 'react';
 import { Text, TextInput } from 'react-native';
 import { render, screen, configure } from '../../pure';
 
-describe('host component names', () => {
-  test('byText queries should use text host name from config', () => {
-    render(<Text>hello</Text>);
+test('byText queries should use text host name from config', () => {
+  render(<Text>hello</Text>);
 
-    expect(screen.getByText('hello')).toBeTruthy();
+  expect(screen.getByText('hello')).toBeTruthy();
 
-    configure({
-      hostComponentNames: { text: 'wrongName', textInput: 'wrongName' },
-    });
-
-    expect(screen.queryByText('hello')).toBeFalsy();
+  configure({
+    hostComponentNames: { text: 'wrongName', textInput: 'wrongName' },
   });
 
-  test('byDisplayValue queries should use textInput host name from config', () => {
-    render(<TextInput value="email" />);
+  expect(screen.queryByText('hello')).toBeFalsy();
+});
 
-    expect(screen.getByDisplayValue('email')).toBeTruthy();
+test('byDisplayValue queries should use textInput host name from config', () => {
+  render(<TextInput value="email" />);
 
-    configure({
-      hostComponentNames: { text: 'wrongName', textInput: 'wrongName' },
-    });
+  expect(screen.getByDisplayValue('email')).toBeTruthy();
 
-    expect(screen.queryByDisplayValue('email')).toBeFalsy();
+  configure({
+    hostComponentNames: { text: 'wrongName', textInput: 'wrongName' },
   });
 
-  test('byPlaceholderText queries should use textInput host name from config', () => {
-    render(<TextInput placeholder="email" />);
+  expect(screen.queryByDisplayValue('email')).toBeFalsy();
+});
 
-    expect(screen.getByPlaceholderText('email')).toBeTruthy();
+test('byPlaceholderText queries should use textInput host name from config', () => {
+  render(<TextInput placeholder="email" />);
 
-    configure({
-      hostComponentNames: { text: 'wrongName', textInput: 'wrongName' },
-    });
+  expect(screen.getByPlaceholderText('email')).toBeTruthy();
 
-    expect(screen.queryByPlaceholderText('email')).toBeFalsy();
+  configure({
+    hostComponentNames: { text: 'wrongName', textInput: 'wrongName' },
   });
 
-  it('should suggest appropriated config when a getByText query fails and wrong component names are used', () => {
-    configure({
-      hostComponentNames: { text: 'wrongName', textInput: 'wrongName' },
-    });
+  expect(screen.queryByPlaceholderText('email')).toBeFalsy();
+});
 
-    render(<Text>hello</Text>);
+test('suggests appropriate config when a getByText query fails and wrong component names are used', () => {
+  configure({
+    hostComponentNames: { text: 'wrongName', textInput: 'wrongName' },
+  });
 
-    expect(() => screen.getByText('hello')).toThrowErrorMatchingInlineSnapshot(`
+  render(<Text>hello</Text>);
+
+  expect(() => screen.getByText('hello')).toThrowErrorMatchingInlineSnapshot(`
       "Unable to find an element with text: hello
 
       You configuration contains invalid host component names. This can happen if you use a version of React Native that is not compatible with your version of @testing-library/react-native
@@ -60,17 +59,17 @@ describe('host component names', () => {
         }
       });"
     `);
-  });
+});
 
-  it('should suggest appropriated config when a getByDisplayValue query fails and wrong component names are used', () => {
-    configure({
-      hostComponentNames: { text: 'wrongName', textInput: 'wrongName' },
-    });
+test('suggests appropriate config when a getByDisplayValue query fails and wrong component names are used', () => {
+  configure({
+    hostComponentNames: { text: 'wrongName', textInput: 'wrongName' },
+  });
 
-    render(<TextInput value="value" />);
+  render(<TextInput value="value" />);
 
-    expect(() => screen.getByDisplayValue('value'))
-      .toThrowErrorMatchingInlineSnapshot(`
+  expect(() => screen.getByDisplayValue('value'))
+    .toThrowErrorMatchingInlineSnapshot(`
       "Unable to find an element with displayValue: value
 
       You configuration contains invalid host component names. This can happen if you use a version of React Native that is not compatible with your version of @testing-library/react-native
@@ -84,17 +83,17 @@ describe('host component names', () => {
         }
       });"
     `);
-  });
+});
 
-  it('should suggest appropriated config when a getByPlaceholderText query fails and wrong component names are used', () => {
-    configure({
-      hostComponentNames: { text: 'wrongName', textInput: 'wrongName' },
-    });
+test('suggests appropriate config when a getByPlaceholderText query fails and wrong component names are used', () => {
+  configure({
+    hostComponentNames: { text: 'wrongName', textInput: 'wrongName' },
+  });
 
-    render(<TextInput placeholder="placeholder" />);
+  render(<TextInput placeholder="placeholder" />);
 
-    expect(() => screen.getByPlaceholderText('placeholder'))
-      .toThrowErrorMatchingInlineSnapshot(`
+  expect(() => screen.getByPlaceholderText('placeholder'))
+    .toThrowErrorMatchingInlineSnapshot(`
       "Unable to find an element with placeholder: placeholder
 
       You configuration contains invalid host component names. This can happen if you use a version of React Native that is not compatible with your version of @testing-library/react-native
@@ -108,36 +107,35 @@ describe('host component names', () => {
         }
       });"
     `);
-  });
+});
 
-  it('should not suggest to change config when a query fails but the correct component names are used', () => {
-    render(<Text>bonjour</Text>);
+test('does not suggest to change config when a query fails but the correct component names are used', () => {
+  render(<Text>bonjour</Text>);
 
-    expect(() => screen.getByText('hello')).toThrowErrorMatchingInlineSnapshot(
-      `"Unable to find an element with text: hello"`
-    );
-  });
+  expect(() => screen.getByText('hello')).toThrowErrorMatchingInlineSnapshot(
+    `"Unable to find an element with text: hello"`
+  );
+});
 
-  it('should not update screen object when running detection', async () => {
-    const TestComponent = () => {
-      const [shouldDisplayHello, setShouldDisplayHello] = useState(false);
+test('does not update screen object when running detection', async () => {
+  const TestComponent = () => {
+    const [shouldDisplayHello, setShouldDisplayHello] = useState(false);
 
-      useEffect(() => {
-        setTimeout(() => {
-          setShouldDisplayHello(true);
-        }, 500);
-      }, []);
+    useEffect(() => {
+      setTimeout(() => {
+        setShouldDisplayHello(true);
+      }, 500);
+    }, []);
 
-      if (shouldDisplayHello) {
-        return <Text>hello</Text>;
-      }
+    if (shouldDisplayHello) {
+      return <Text>hello</Text>;
+    }
 
-      return null;
-    };
+    return null;
+  };
 
-    render(<TestComponent />);
+  render(<TestComponent />);
 
-    expect(await screen.findByText('hello')).toBeTruthy();
-    expect(screen.getByText('hello')).toBeTruthy();
-  });
+  expect(await screen.findByText('hello')).toBeTruthy();
+  expect(screen.getByText('hello')).toBeTruthy();
 });

From 34eb57a3b7b2ffe0d3e5fe2731049bf545ebc466 Mon Sep 17 00:00:00 2001
From: pierre zimmermann <pierrez@bam.tech>
Date: Mon, 28 Nov 2022 22:12:00 +0100
Subject: [PATCH 13/45] fix: use legacy queries by default to prevent breaking
 changes

---
 src/__tests__/config.test.ts                              | 8 ++++----
 src/config.ts                                             | 2 +-
 src/queries/__tests__/displayValue.breaking.test.tsx      | 4 +++-
 src/queries/__tests__/displayValue.test.tsx               | 4 +---
 ...es.test.tsx => host-component-names.breaking.test.tsx} | 2 ++
 src/queries/__tests__/placeholderText.breaking.test.tsx   | 6 +++++-
 src/queries/__tests__/placeholderText.test.tsx            | 7 +------
 src/queries/__tests__/text.breaking.test.tsx              | 6 +++++-
 src/queries/__tests__/text.test.tsx                       | 6 +-----
 src/queries/makeQueries.ts                                | 4 ++++
 10 files changed, 27 insertions(+), 22 deletions(-)
 rename src/queries/__tests__/{host-component-names.test.tsx => host-component-names.breaking.test.tsx} (98%)

diff --git a/src/__tests__/config.test.ts b/src/__tests__/config.test.ts
index 5e41bb1ab..c946693b5 100644
--- a/src/__tests__/config.test.ts
+++ b/src/__tests__/config.test.ts
@@ -19,7 +19,7 @@ test('configure() overrides existing config values', () => {
     defaultDebugOptions: { message: 'debug message' },
     defaultIncludeHiddenElements: true,
     useBreakingChanges: false,
-    useLegacyQueries: false,
+    useLegacyQueries: true,
     hostComponentNames: {
       text: 'Text',
       textInput: 'TextInput',
@@ -31,16 +31,16 @@ test('resetToDefaults() resets config to defaults', () => {
   configure({
     asyncUtilTimeout: 5000,
     defaultIncludeHiddenElements: false,
-    useLegacyQueries: true,
+    useLegacyQueries: false,
   });
   expect(getConfig().asyncUtilTimeout).toEqual(5000);
   expect(getConfig().defaultIncludeHiddenElements).toEqual(false);
-  expect(getConfig().useLegacyQueries).toBe(true);
+  expect(getConfig().useLegacyQueries).toBe(false);
 
   resetToDefaults();
   expect(getConfig().asyncUtilTimeout).toEqual(1000);
   expect(getConfig().defaultIncludeHiddenElements).toEqual(true);
-  expect(getConfig().useLegacyQueries).toBe(false);
+  expect(getConfig().useLegacyQueries).toBe(true);
 });
 
 test('resetToDefaults() resets internal config to defaults', () => {
diff --git a/src/config.ts b/src/config.ts
index ee190be25..febcf55b9 100644
--- a/src/config.ts
+++ b/src/config.ts
@@ -40,7 +40,7 @@ const defaultConfig: InternalConfig = {
   useBreakingChanges: false,
   asyncUtilTimeout: 1000,
   defaultIncludeHiddenElements: true,
-  useLegacyQueries: false,
+  useLegacyQueries: true,
   hostComponentNames: { text: 'Text', textInput: 'TextInput' },
 };
 
diff --git a/src/queries/__tests__/displayValue.breaking.test.tsx b/src/queries/__tests__/displayValue.breaking.test.tsx
index 455f614b4..30ccccc47 100644
--- a/src/queries/__tests__/displayValue.breaking.test.tsx
+++ b/src/queries/__tests__/displayValue.breaking.test.tsx
@@ -1,7 +1,7 @@
 import * as React from 'react';
 import { View, TextInput } from 'react-native';
 
-import { render } from '../..';
+import { configure, render } from '../..';
 
 const PLACEHOLDER_FRESHNESS = 'Add custom freshness';
 const PLACEHOLDER_CHEF = 'Who inspected freshness?';
@@ -10,6 +10,8 @@ const INPUT_CHEF = 'I inspected freshie';
 const DEFAULT_INPUT_CHEF = 'What did you inspect?';
 const DEFAULT_INPUT_CUSTOMER = 'What banana?';
 
+beforeEach(() => configure({ useLegacyQueries: false }));
+
 const Banana = () => (
   <View>
     <TextInput
diff --git a/src/queries/__tests__/displayValue.test.tsx b/src/queries/__tests__/displayValue.test.tsx
index 536405903..220acfc48 100644
--- a/src/queries/__tests__/displayValue.test.tsx
+++ b/src/queries/__tests__/displayValue.test.tsx
@@ -1,7 +1,7 @@
 import * as React from 'react';
 import { View, TextInput } from 'react-native';
 
-import { render, configure } from '../..';
+import { render } from '../..';
 
 const PLACEHOLDER_FRESHNESS = 'Add custom freshness';
 const PLACEHOLDER_CHEF = 'Who inspected freshness?';
@@ -10,8 +10,6 @@ const INPUT_CHEF = 'I inspected freshie';
 const DEFAULT_INPUT_CHEF = 'What did you inspect?';
 const DEFAULT_INPUT_CUSTOMER = 'What banana?';
 
-beforeEach(() => configure({ useLegacyQueries: true }));
-
 const Banana = () => (
   <View>
     <TextInput
diff --git a/src/queries/__tests__/host-component-names.test.tsx b/src/queries/__tests__/host-component-names.breaking.test.tsx
similarity index 98%
rename from src/queries/__tests__/host-component-names.test.tsx
rename to src/queries/__tests__/host-component-names.breaking.test.tsx
index 494e26e00..d36567b06 100644
--- a/src/queries/__tests__/host-component-names.test.tsx
+++ b/src/queries/__tests__/host-component-names.breaking.test.tsx
@@ -2,6 +2,8 @@ import React, { useEffect, useState } from 'react';
 import { Text, TextInput } from 'react-native';
 import { render, screen, configure } from '../../pure';
 
+beforeEach(() => configure({ useLegacyQueries: false }));
+
 test('byText queries should use text host name from config', () => {
   render(<Text>hello</Text>);
 
diff --git a/src/queries/__tests__/placeholderText.breaking.test.tsx b/src/queries/__tests__/placeholderText.breaking.test.tsx
index b62d058f3..830f79429 100644
--- a/src/queries/__tests__/placeholderText.breaking.test.tsx
+++ b/src/queries/__tests__/placeholderText.breaking.test.tsx
@@ -1,6 +1,6 @@
 import * as React from 'react';
 import { View, TextInput } from 'react-native';
-import { render } from '../..';
+import { configure, render } from '../..';
 
 const PLACEHOLDER_FRESHNESS = 'Add custom freshness';
 const PLACEHOLDER_CHEF = 'Who inspected freshness?';
@@ -8,6 +8,10 @@ const INPUT_FRESHNESS = 'Custom Freshie';
 const INPUT_CHEF = 'I inspected freshie';
 const DEFAULT_INPUT_CHEF = 'What did you inspect?';
 
+beforeEach(() => {
+  configure({ useLegacyQueries: false });
+});
+
 const Banana = () => (
   <View>
     <TextInput
diff --git a/src/queries/__tests__/placeholderText.test.tsx b/src/queries/__tests__/placeholderText.test.tsx
index fdc605c61..c16cf1f59 100644
--- a/src/queries/__tests__/placeholderText.test.tsx
+++ b/src/queries/__tests__/placeholderText.test.tsx
@@ -1,6 +1,6 @@
 import * as React from 'react';
 import { View, TextInput } from 'react-native';
-import { render, configure } from '../..';
+import { render } from '../..';
 
 const PLACEHOLDER_FRESHNESS = 'Add custom freshness';
 const PLACEHOLDER_CHEF = 'Who inspected freshness?';
@@ -8,10 +8,6 @@ const INPUT_FRESHNESS = 'Custom Freshie';
 const INPUT_CHEF = 'I inspected freshie';
 const DEFAULT_INPUT_CHEF = 'What did you inspect?';
 
-beforeEach(() => {
-  configure({ useLegacyQueries: true });
-});
-
 const Banana = () => (
   <View>
     <TextInput
@@ -84,7 +80,6 @@ test('byPlaceholderText queries support hidden option', () => {
 });
 
 test('byPlaceHolderText should return composite component', () => {
-  configure({ useLegacyQueries: true });
   const { getByPlaceholderText } = render(
     <TextInput placeholder="placeholder" />
   );
diff --git a/src/queries/__tests__/text.breaking.test.tsx b/src/queries/__tests__/text.breaking.test.tsx
index bce828104..fa57e1bb6 100644
--- a/src/queries/__tests__/text.breaking.test.tsx
+++ b/src/queries/__tests__/text.breaking.test.tsx
@@ -7,7 +7,11 @@ import {
   Button,
   TextInput,
 } from 'react-native';
-import { render, getDefaultNormalizer, within } from '../..';
+import { configure, render, getDefaultNormalizer, within } from '../..';
+
+beforeEach(() => {
+  configure({ useLegacyQueries: false });
+});
 
 test('byText matches simple text', () => {
   const { getByText } = render(<Text testID="text">Hello World</Text>);
diff --git a/src/queries/__tests__/text.test.tsx b/src/queries/__tests__/text.test.tsx
index dd2e430bf..00cabbd26 100644
--- a/src/queries/__tests__/text.test.tsx
+++ b/src/queries/__tests__/text.test.tsx
@@ -7,11 +7,7 @@ import {
   Button,
   TextInput,
 } from 'react-native';
-import { configure, render, getDefaultNormalizer, within } from '../..';
-
-beforeEach(() => {
-  configure({ useLegacyQueries: true });
-});
+import { render, getDefaultNormalizer, within } from '../..';
 
 test('byText matches simple text', () => {
   const { getByText } = render(<Text testID="text">Hello World</Text>);
diff --git a/src/queries/makeQueries.ts b/src/queries/makeQueries.ts
index da003bdef..323d0d5d7 100644
--- a/src/queries/makeQueries.ts
+++ b/src/queries/makeQueries.ts
@@ -86,6 +86,10 @@ Example:
 }
 
 function getWrongHostComponentNamesError(): string {
+  if (getConfig().useLegacyQueries) {
+    return '';
+  }
+
   const reactNativeHostComponentNames = getReactNativeHostComponentNames();
   const configHostComponentNames = getConfig().hostComponentNames;
   if (

From d09a7386595a121270d334771eb3f0b4ab4df9cd Mon Sep 17 00:00:00 2001
From: pierre zimmermann <pierrez@bam.tech>
Date: Mon, 28 Nov 2022 22:17:12 +0100
Subject: [PATCH 14/45] fix: remove wrong uppercase in flow typings

---
 typings/index.flow.js | 2 +-
 1 file changed, 1 insertion(+), 1 deletion(-)

diff --git a/typings/index.flow.js b/typings/index.flow.js
index 506a6901b..7f73d4015 100644
--- a/typings/index.flow.js
+++ b/typings/index.flow.js
@@ -476,7 +476,7 @@ declare module '@testing-library/react-native' {
     defaultIncludeHiddenElements: boolean;
     defaultDebugOptions?: $Shape<DebugOptions>;
     useLegacyQueries: boolean;
-    HostComponentNames: HostComponentNames;
+    hostComponentNames: HostComponentNames;
   }
 
   declare interface ConfigAliasOptions {

From fd5c3420f382ce44be5036b7c6dafe4a24627cbf Mon Sep 17 00:00:00 2001
From: pierre zimmermann <pierrez@bam.tech>
Date: Mon, 28 Nov 2022 22:18:23 +0100
Subject: [PATCH 15/45] docs: remove section on useLegacy queries as it wont be
 a public api

---
 website/docs/API.md | 11 +++--------
 1 file changed, 3 insertions(+), 8 deletions(-)

diff --git a/website/docs/API.md b/website/docs/API.md
index f00b7c3cf..702fdf800 100644
--- a/website/docs/API.md
+++ b/website/docs/API.md
@@ -855,7 +855,7 @@ type Config = {
   asyncUtilTimeout: number;
   defaultHidden: boolean;
   defaultDebugOptions: Partial<DebugOptions>;
-  hostComponentNames: { text: string; textInput: string }
+  hostComponentNames: { text: string; textInput: string };
 };
 
 function configure(options: Partial<Config>) {}
@@ -877,11 +877,6 @@ This option is also available as `defaultHidden` alias for compatibility with [R
 
 Default [debug options](#debug) to be used when calling `debug()`. These default options will be overridden by the ones you specify directly when calling `debug()`.
 
-
-#### `useLegacyQueries` option
-
-`byText`, `byPlaceholderText` and `byDisplayValue` queries used to return composite elements (see the doc on [testing environment](./TestingEnvironment.md)) for more information on composite and host components) but they now return host components. This can break tests if you use the element returned by these queries, for instance the props may be slightly different. To keep the legacy behavior, set this option to true. 
-
 #### `hostComponentNames` option
 
 The internal names of `Text` and `TextInput` components used by `byText`, `byDisplayValue` and `byPlaceholderText` queries. This should only be changed if you're using a version of React Native that is not compatible with the version of @testing-library/react-native. If that's the case, then failed getBy queries should suggest the appropriate config to use.
@@ -922,10 +917,10 @@ function isHiddenFromAccessibility(
 
 Also available as `isInaccessible()` alias for React Testing Library compatibility.
 
-Checks if given element is hidden from assistive technology, e.g. screen readers. 
+Checks if given element is hidden from assistive technology, e.g. screen readers.
 
 :::note
-Like [`isInaccessible`](https://testing-library.com/docs/dom-testing-library/api-accessibility/#isinaccessible) function from DOM Testing Library this function considers both accessibility elements and presentational elements (regular `View`s) to be accessible, unless they are hidden in terms of host platform. 
+Like [`isInaccessible`](https://testing-library.com/docs/dom-testing-library/api-accessibility/#isinaccessible) function from DOM Testing Library this function considers both accessibility elements and presentational elements (regular `View`s) to be accessible, unless they are hidden in terms of host platform.
 
 This covers only part of [ARIA notion of Accessiblity Tree](https://www.w3.org/TR/wai-aria-1.2/#tree_exclusion), as ARIA excludes both hidden and presentational elements from the Accessibility Tree.
 :::

From 17e42a62d39ea78b83ae3d2fe544201bfdcc0a61 Mon Sep 17 00:00:00 2001
From: pierre zimmermann <pierrez@bam.tech>
Date: Mon, 28 Nov 2022 22:21:28 +0100
Subject: [PATCH 16/45] docs: small improvements based on review

---
 website/docs/API.md | 2 +-
 1 file changed, 1 insertion(+), 1 deletion(-)

diff --git a/website/docs/API.md b/website/docs/API.md
index 702fdf800..12fccea95 100644
--- a/website/docs/API.md
+++ b/website/docs/API.md
@@ -879,7 +879,7 @@ Default [debug options](#debug) to be used when calling `debug()`. These default
 
 #### `hostComponentNames` option
 
-The internal names of `Text` and `TextInput` components used by `byText`, `byDisplayValue` and `byPlaceholderText` queries. This should only be changed if you're using a version of React Native that is not compatible with the version of @testing-library/react-native. If that's the case, then failed getBy queries should suggest the appropriate config to use.
+The internal names of the components `Text` and `TextInput` used by `byText`, `byDisplayValue` and `byPlaceholderText` queries. This should only be changed if you're using a version of React Native that is not compatible with the version of @testing-library/react-native. If that's the case, then failed getBy and findBy queries should suggest the appropriate config to use.
 
 ### `resetToDefaults()`
 

From 568981ee6b4d27d27dca5e5fa9f76822df3e43b7 Mon Sep 17 00:00:00 2001
From: pierrezimmermann <pierrez@nam.tech>
Date: Sun, 4 Dec 2022 18:23:59 +0100
Subject: [PATCH 17/45] fix: remove typo in error message

---
 .../host-component-names.breaking.test.tsx    | 60 +++++++++----------
 src/queries/makeQueries.ts                    |  2 +-
 2 files changed, 31 insertions(+), 31 deletions(-)

diff --git a/src/queries/__tests__/host-component-names.breaking.test.tsx b/src/queries/__tests__/host-component-names.breaking.test.tsx
index d36567b06..21890a942 100644
--- a/src/queries/__tests__/host-component-names.breaking.test.tsx
+++ b/src/queries/__tests__/host-component-names.breaking.test.tsx
@@ -48,19 +48,19 @@ test('suggests appropriate config when a getByText query fails and wrong compone
   render(<Text>hello</Text>);
 
   expect(() => screen.getByText('hello')).toThrowErrorMatchingInlineSnapshot(`
-      "Unable to find an element with text: hello
+    "Unable to find an element with text: hello
 
-      You configuration contains invalid host component names. This can happen if you use a version of React Native that is not compatible with your version of @testing-library/react-native
+    Your configuration contains invalid host component names. This can happen if you use a version of React Native that is not compatible with your version of @testing-library/react-native
 
-      To fix this add following line in a Jest setup file :
+    To fix this add following line in a Jest setup file :
 
-      configure({ 
-        hostComponentNames: { 
-          text: 'Text',
-          textInput: 'TextInput',
-        }
-      });"
-    `);
+    configure({ 
+      hostComponentNames: { 
+        text: 'Text',
+        textInput: 'TextInput',
+      }
+    });"
+  `);
 });
 
 test('suggests appropriate config when a getByDisplayValue query fails and wrong component names are used', () => {
@@ -72,19 +72,19 @@ test('suggests appropriate config when a getByDisplayValue query fails and wrong
 
   expect(() => screen.getByDisplayValue('value'))
     .toThrowErrorMatchingInlineSnapshot(`
-      "Unable to find an element with displayValue: value
+    "Unable to find an element with displayValue: value
 
-      You configuration contains invalid host component names. This can happen if you use a version of React Native that is not compatible with your version of @testing-library/react-native
+    Your configuration contains invalid host component names. This can happen if you use a version of React Native that is not compatible with your version of @testing-library/react-native
 
-      To fix this add following line in a Jest setup file :
+    To fix this add following line in a Jest setup file :
 
-      configure({ 
-        hostComponentNames: { 
-          text: 'Text',
-          textInput: 'TextInput',
-        }
-      });"
-    `);
+    configure({ 
+      hostComponentNames: { 
+        text: 'Text',
+        textInput: 'TextInput',
+      }
+    });"
+  `);
 });
 
 test('suggests appropriate config when a getByPlaceholderText query fails and wrong component names are used', () => {
@@ -96,19 +96,19 @@ test('suggests appropriate config when a getByPlaceholderText query fails and wr
 
   expect(() => screen.getByPlaceholderText('placeholder'))
     .toThrowErrorMatchingInlineSnapshot(`
-      "Unable to find an element with placeholder: placeholder
+    "Unable to find an element with placeholder: placeholder
 
-      You configuration contains invalid host component names. This can happen if you use a version of React Native that is not compatible with your version of @testing-library/react-native
+    Your configuration contains invalid host component names. This can happen if you use a version of React Native that is not compatible with your version of @testing-library/react-native
 
-      To fix this add following line in a Jest setup file :
+    To fix this add following line in a Jest setup file :
 
-      configure({ 
-        hostComponentNames: { 
-          text: 'Text',
-          textInput: 'TextInput',
-        }
-      });"
-    `);
+    configure({ 
+      hostComponentNames: { 
+        text: 'Text',
+        textInput: 'TextInput',
+      }
+    });"
+  `);
 });
 
 test('does not suggest to change config when a query fails but the correct component names are used', () => {
diff --git a/src/queries/makeQueries.ts b/src/queries/makeQueries.ts
index 323d0d5d7..83c65cecb 100644
--- a/src/queries/makeQueries.ts
+++ b/src/queries/makeQueries.ts
@@ -99,7 +99,7 @@ function getWrongHostComponentNamesError(): string {
   ) {
     return `
 
-You configuration contains invalid host component names. This can happen if you use a version of React Native that is not compatible with your version of @testing-library/react-native
+Your configuration contains invalid host component names. This can happen if you use a version of React Native that is not compatible with your version of @testing-library/react-native
 
 To fix this add following line in a Jest setup file :
 

From 46c70a4964c860cdbcc755ea0c357fd2f94023d1 Mon Sep 17 00:00:00 2001
From: pierrezimmermann <pierrez@nam.tech>
Date: Sun, 4 Dec 2022 18:26:50 +0100
Subject: [PATCH 18/45] refactor: rename getReactNativeHostComponentNames to
 detectHostComponentNames

---
 ...iveHostComponentNames.tsx => detectHostComponentNames.tsx} | 2 +-
 src/queries/makeQueries.ts                                    | 4 ++--
 2 files changed, 3 insertions(+), 3 deletions(-)
 rename src/helpers/{getReactNativeHostComponentNames.tsx => detectHostComponentNames.tsx} (88%)

diff --git a/src/helpers/getReactNativeHostComponentNames.tsx b/src/helpers/detectHostComponentNames.tsx
similarity index 88%
rename from src/helpers/getReactNativeHostComponentNames.tsx
rename to src/helpers/detectHostComponentNames.tsx
index 159f871e3..19e5ea882 100644
--- a/src/helpers/getReactNativeHostComponentNames.tsx
+++ b/src/helpers/detectHostComponentNames.tsx
@@ -4,7 +4,7 @@ import TestRenderer from 'react-test-renderer';
 import { HostComponentNames } from '../config';
 import { getQueriesForElement } from '../within';
 
-export function getReactNativeHostComponentNames(): HostComponentNames {
+export function detectHostComponentNames(): HostComponentNames {
   const renderer = TestRenderer.create(
     <View>
       <Text testID="text">Hello</Text>
diff --git a/src/queries/makeQueries.ts b/src/queries/makeQueries.ts
index 83c65cecb..15389147c 100644
--- a/src/queries/makeQueries.ts
+++ b/src/queries/makeQueries.ts
@@ -2,7 +2,7 @@ import type { ReactTestInstance } from 'react-test-renderer';
 import { ErrorWithStack } from '../helpers/errors';
 import waitFor from '../waitFor';
 import type { WaitForOptions } from '../waitFor';
-import { getReactNativeHostComponentNames } from '../helpers/getReactNativeHostComponentNames';
+import { detectHostComponentNames } from '../helpers/detectHostComponentNames';
 import { getConfig } from '../config';
 
 export type GetByQuery<Predicate, Options = void> = (
@@ -90,7 +90,7 @@ function getWrongHostComponentNamesError(): string {
     return '';
   }
 
-  const reactNativeHostComponentNames = getReactNativeHostComponentNames();
+  const reactNativeHostComponentNames = detectHostComponentNames();
   const configHostComponentNames = getConfig().hostComponentNames;
   if (
     reactNativeHostComponentNames.text !== configHostComponentNames.text ||

From eb30f96e5a58c86eb924ca5917174b5c75717f12 Mon Sep 17 00:00:00 2001
From: pierrezimmermann <pierrez@nam.tech>
Date: Sun, 4 Dec 2022 18:44:14 +0100
Subject: [PATCH 19/45] refactor: use useBreakingChange from internal config
 instead of useLegacyQueries

---
 src/__tests__/config.test.ts                                 | 4 ----
 src/config.ts                                                | 4 ----
 src/queries/__tests__/displayValue.breaking.test.tsx         | 5 +++--
 src/queries/__tests__/host-component-names.breaking.test.tsx | 3 ++-
 src/queries/__tests__/placeholderText.breaking.test.tsx      | 5 +++--
 src/queries/__tests__/text.breaking.test.tsx                 | 5 +++--
 src/queries/makeQueries.ts                                   | 2 +-
 src/queries/options.ts                                       | 2 +-
 typings/index.flow.js                                        | 1 -
 9 files changed, 13 insertions(+), 18 deletions(-)

diff --git a/src/__tests__/config.test.ts b/src/__tests__/config.test.ts
index c946693b5..fe9bebe0e 100644
--- a/src/__tests__/config.test.ts
+++ b/src/__tests__/config.test.ts
@@ -19,7 +19,6 @@ test('configure() overrides existing config values', () => {
     defaultDebugOptions: { message: 'debug message' },
     defaultIncludeHiddenElements: true,
     useBreakingChanges: false,
-    useLegacyQueries: true,
     hostComponentNames: {
       text: 'Text',
       textInput: 'TextInput',
@@ -31,16 +30,13 @@ test('resetToDefaults() resets config to defaults', () => {
   configure({
     asyncUtilTimeout: 5000,
     defaultIncludeHiddenElements: false,
-    useLegacyQueries: false,
   });
   expect(getConfig().asyncUtilTimeout).toEqual(5000);
   expect(getConfig().defaultIncludeHiddenElements).toEqual(false);
-  expect(getConfig().useLegacyQueries).toBe(false);
 
   resetToDefaults();
   expect(getConfig().asyncUtilTimeout).toEqual(1000);
   expect(getConfig().defaultIncludeHiddenElements).toEqual(true);
-  expect(getConfig().useLegacyQueries).toBe(true);
 });
 
 test('resetToDefaults() resets internal config to defaults', () => {
diff --git a/src/config.ts b/src/config.ts
index febcf55b9..d3945ee6b 100644
--- a/src/config.ts
+++ b/src/config.ts
@@ -19,9 +19,6 @@ export type Config = {
   /** Default options for `debug` helper. */
   defaultDebugOptions?: Partial<DebugOptions>;
 
-  /** Option to return composite components */
-  useLegacyQueries: boolean;
-
   /** Host component names used for queries */
   hostComponentNames: HostComponentNames;
 };
@@ -40,7 +37,6 @@ const defaultConfig: InternalConfig = {
   useBreakingChanges: false,
   asyncUtilTimeout: 1000,
   defaultIncludeHiddenElements: true,
-  useLegacyQueries: true,
   hostComponentNames: { text: 'Text', textInput: 'TextInput' },
 };
 
diff --git a/src/queries/__tests__/displayValue.breaking.test.tsx b/src/queries/__tests__/displayValue.breaking.test.tsx
index 30ccccc47..f0ecb61ea 100644
--- a/src/queries/__tests__/displayValue.breaking.test.tsx
+++ b/src/queries/__tests__/displayValue.breaking.test.tsx
@@ -1,7 +1,8 @@
 import * as React from 'react';
 import { View, TextInput } from 'react-native';
 
-import { configure, render } from '../..';
+import { render } from '../..';
+import { configureInternal } from '../../config';
 
 const PLACEHOLDER_FRESHNESS = 'Add custom freshness';
 const PLACEHOLDER_CHEF = 'Who inspected freshness?';
@@ -10,7 +11,7 @@ const INPUT_CHEF = 'I inspected freshie';
 const DEFAULT_INPUT_CHEF = 'What did you inspect?';
 const DEFAULT_INPUT_CUSTOMER = 'What banana?';
 
-beforeEach(() => configure({ useLegacyQueries: false }));
+beforeEach(() => configureInternal({ useBreakingChanges: true }));
 
 const Banana = () => (
   <View>
diff --git a/src/queries/__tests__/host-component-names.breaking.test.tsx b/src/queries/__tests__/host-component-names.breaking.test.tsx
index 21890a942..daad52cc8 100644
--- a/src/queries/__tests__/host-component-names.breaking.test.tsx
+++ b/src/queries/__tests__/host-component-names.breaking.test.tsx
@@ -1,8 +1,9 @@
 import React, { useEffect, useState } from 'react';
 import { Text, TextInput } from 'react-native';
+import { configureInternal } from '../../config';
 import { render, screen, configure } from '../../pure';
 
-beforeEach(() => configure({ useLegacyQueries: false }));
+beforeEach(() => configureInternal({ useBreakingChanges: true }));
 
 test('byText queries should use text host name from config', () => {
   render(<Text>hello</Text>);
diff --git a/src/queries/__tests__/placeholderText.breaking.test.tsx b/src/queries/__tests__/placeholderText.breaking.test.tsx
index 830f79429..c3a35fb0d 100644
--- a/src/queries/__tests__/placeholderText.breaking.test.tsx
+++ b/src/queries/__tests__/placeholderText.breaking.test.tsx
@@ -1,6 +1,7 @@
 import * as React from 'react';
 import { View, TextInput } from 'react-native';
-import { configure, render } from '../..';
+import { render } from '../..';
+import { configureInternal } from '../../config';
 
 const PLACEHOLDER_FRESHNESS = 'Add custom freshness';
 const PLACEHOLDER_CHEF = 'Who inspected freshness?';
@@ -9,7 +10,7 @@ const INPUT_CHEF = 'I inspected freshie';
 const DEFAULT_INPUT_CHEF = 'What did you inspect?';
 
 beforeEach(() => {
-  configure({ useLegacyQueries: false });
+  configureInternal({ useBreakingChanges: true });
 });
 
 const Banana = () => (
diff --git a/src/queries/__tests__/text.breaking.test.tsx b/src/queries/__tests__/text.breaking.test.tsx
index fa57e1bb6..322588ad7 100644
--- a/src/queries/__tests__/text.breaking.test.tsx
+++ b/src/queries/__tests__/text.breaking.test.tsx
@@ -7,10 +7,11 @@ import {
   Button,
   TextInput,
 } from 'react-native';
-import { configure, render, getDefaultNormalizer, within } from '../..';
+import { render, getDefaultNormalizer, within } from '../..';
+import { configureInternal } from '../../config';
 
 beforeEach(() => {
-  configure({ useLegacyQueries: false });
+  configureInternal({ useBreakingChanges: true });
 });
 
 test('byText matches simple text', () => {
diff --git a/src/queries/makeQueries.ts b/src/queries/makeQueries.ts
index 15389147c..9051301d5 100644
--- a/src/queries/makeQueries.ts
+++ b/src/queries/makeQueries.ts
@@ -86,7 +86,7 @@ Example:
 }
 
 function getWrongHostComponentNamesError(): string {
-  if (getConfig().useLegacyQueries) {
+  if (!getConfig().useBreakingChanges) {
     return '';
   }
 
diff --git a/src/queries/options.ts b/src/queries/options.ts
index cf5b56c12..e119e3234 100644
--- a/src/queries/options.ts
+++ b/src/queries/options.ts
@@ -15,5 +15,5 @@ export type TextMatchOptions = {
 };
 
 export const shouldReturnCompositeComponent = () => {
-  return getConfig().useLegacyQueries;
+  return !getConfig().useBreakingChanges;
 };
diff --git a/typings/index.flow.js b/typings/index.flow.js
index 7f73d4015..463068ce6 100644
--- a/typings/index.flow.js
+++ b/typings/index.flow.js
@@ -475,7 +475,6 @@ declare module '@testing-library/react-native' {
     asyncUtilTimeout: number;
     defaultIncludeHiddenElements: boolean;
     defaultDebugOptions?: $Shape<DebugOptions>;
-    useLegacyQueries: boolean;
     hostComponentNames: HostComponentNames;
   }
 

From 2245bd87c65058d1861f7299bfa1ee2718caa437 Mon Sep 17 00:00:00 2001
From: pierrezimmermann <pierrez@nam.tech>
Date: Sun, 4 Dec 2022 18:51:53 +0100
Subject: [PATCH 20/45] fix: use fake timers in test so it doesnt take too much
 time

---
 src/queries/__tests__/host-component-names.breaking.test.tsx | 4 ++++
 1 file changed, 4 insertions(+)

diff --git a/src/queries/__tests__/host-component-names.breaking.test.tsx b/src/queries/__tests__/host-component-names.breaking.test.tsx
index daad52cc8..02c126822 100644
--- a/src/queries/__tests__/host-component-names.breaking.test.tsx
+++ b/src/queries/__tests__/host-component-names.breaking.test.tsx
@@ -121,6 +121,8 @@ test('does not suggest to change config when a query fails but the correct compo
 });
 
 test('does not update screen object when running detection', async () => {
+  jest.useFakeTimers();
+
   const TestComponent = () => {
     const [shouldDisplayHello, setShouldDisplayHello] = useState(false);
 
@@ -141,4 +143,6 @@ test('does not update screen object when running detection', async () => {
 
   expect(await screen.findByText('hello')).toBeTruthy();
   expect(screen.getByText('hello')).toBeTruthy();
+
+  jest.useRealTimers();
 });

From c19a7db0de5af559ff11aee3c62ac12f6fe316cb Mon Sep 17 00:00:00 2001
From: pierrezimmermann <pierrez@nam.tech>
Date: Sun, 4 Dec 2022 19:03:15 +0100
Subject: [PATCH 21/45] refactor: replace type assertions by real type checking

---
 src/helpers/detectHostComponentNames.tsx | 40 +++++++++++++++++-------
 src/queries/makeQueries.ts               |  4 +++
 2 files changed, 32 insertions(+), 12 deletions(-)

diff --git a/src/helpers/detectHostComponentNames.tsx b/src/helpers/detectHostComponentNames.tsx
index 19e5ea882..85677a599 100644
--- a/src/helpers/detectHostComponentNames.tsx
+++ b/src/helpers/detectHostComponentNames.tsx
@@ -4,17 +4,33 @@ import TestRenderer from 'react-test-renderer';
 import { HostComponentNames } from '../config';
 import { getQueriesForElement } from '../within';
 
-export function detectHostComponentNames(): HostComponentNames {
-  const renderer = TestRenderer.create(
-    <View>
-      <Text testID="text">Hello</Text>
-      <TextInput testID="textInput" />
-    </View>
-  );
-  const { getByTestId } = getQueriesForElement(renderer.root);
+export function detectHostComponentNames():
+  | HostComponentNames
+  | { text: null; textInput: null } {
+  try {
+    const renderer = TestRenderer.create(
+      <View>
+        <Text testID="text">Hello</Text>
+        <TextInput testID="textInput" />
+      </View>
+    );
+    const { getByTestId } = getQueriesForElement(renderer.root);
 
-  return {
-    text: getByTestId('text').type as string,
-    textInput: getByTestId('textInput').type as string,
-  };
+    const textHostName = getByTestId('text').type;
+    const textInputHostName = getByTestId('textInput').type;
+
+    if (
+      typeof textHostName === 'string' &&
+      typeof textInputHostName === 'string'
+    ) {
+      return {
+        text: textHostName,
+        textInput: textInputHostName,
+      };
+    }
+
+    return { text: null, textInput: null };
+  } catch (error) {
+    return { text: null, textInput: null };
+  }
 }
diff --git a/src/queries/makeQueries.ts b/src/queries/makeQueries.ts
index 9051301d5..3a7d8b9a0 100644
--- a/src/queries/makeQueries.ts
+++ b/src/queries/makeQueries.ts
@@ -91,6 +91,10 @@ function getWrongHostComponentNamesError(): string {
   }
 
   const reactNativeHostComponentNames = detectHostComponentNames();
+  if (!reactNativeHostComponentNames.text) {
+    return '';
+  }
+
   const configHostComponentNames = getConfig().hostComponentNames;
   if (
     reactNativeHostComponentNames.text !== configHostComponentNames.text ||

From 78724f3f5d8ea7099faad97e1ac1b860e3962d14 Mon Sep 17 00:00:00 2001
From: pierrezimmermann <pierrez@nam.tech>
Date: Mon, 5 Dec 2022 13:53:07 +0100
Subject: [PATCH 22/45] fix: revert change due to rebase

---
 website/docs/Queries.md | 2 +-
 1 file changed, 1 insertion(+), 1 deletion(-)

diff --git a/website/docs/Queries.md b/website/docs/Queries.md
index cb8ec55b1..979038f81 100644
--- a/website/docs/Queries.md
+++ b/website/docs/Queries.md
@@ -131,7 +131,7 @@ getByPlaceholderText(
   options?: {
     exact?: boolean;
     normalizer?: (text: string) => string;
-    hidden?: boolean;
+    includeHiddenElements?: boolean;
   }
 ): ReactTestInstance;
 ```

From e91193257fe6d3ba600ec0f1b6dbce66d810ae9e Mon Sep 17 00:00:00 2001
From: pierrezimmermann <pierrez@nam.tech>
Date: Mon, 5 Dec 2022 14:12:57 +0100
Subject: [PATCH 23/45] fix: improvements after review

---
 ...HostComponentNames.tsx => host-component-names.tsx} |  0
 src/queries/__tests__/displayValue.breaking.test.tsx   | 10 ++++++++--
 src/queries/__tests__/displayValue.test.tsx            |  2 +-
 src/queries/__tests__/text.test.tsx                    |  2 +-
 src/queries/displayValue.ts                            |  9 +++++----
 src/queries/makeQueries.ts                             |  2 +-
 src/queries/options.ts                                 |  5 -----
 src/queries/placeholderText.ts                         |  9 +++++----
 src/queries/text.ts                                    |  5 +++--
 website/docs/API.md                                    |  4 +++-
 10 files changed, 27 insertions(+), 21 deletions(-)
 rename src/helpers/{detectHostComponentNames.tsx => host-component-names.tsx} (100%)

diff --git a/src/helpers/detectHostComponentNames.tsx b/src/helpers/host-component-names.tsx
similarity index 100%
rename from src/helpers/detectHostComponentNames.tsx
rename to src/helpers/host-component-names.tsx
diff --git a/src/queries/__tests__/displayValue.breaking.test.tsx b/src/queries/__tests__/displayValue.breaking.test.tsx
index f0ecb61ea..1bcb79b88 100644
--- a/src/queries/__tests__/displayValue.breaking.test.tsx
+++ b/src/queries/__tests__/displayValue.breaking.test.tsx
@@ -53,10 +53,16 @@ test('getByDisplayValue, queryByDisplayValue', () => {
 
 test('getByDisplayValue, queryByDisplayValue get element by default value only when value is undefined', () => {
   const { getByDisplayValue, queryByDisplayValue } = render(<Banana />);
-  expect(() => getByDisplayValue(DEFAULT_INPUT_CHEF)).toThrow();
+  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')).toThrow();
+  expect(() => getByDisplayValue('hello')).toThrowErrorMatchingInlineSnapshot(
+    `"Unable to find an element with displayValue: hello"`
+  );
   expect(queryByDisplayValue('hello')).toBeNull();
 
   expect(getByDisplayValue(DEFAULT_INPUT_CUSTOMER)).toBeTruthy();
diff --git a/src/queries/__tests__/displayValue.test.tsx b/src/queries/__tests__/displayValue.test.tsx
index 220acfc48..e8f351c2b 100644
--- a/src/queries/__tests__/displayValue.test.tsx
+++ b/src/queries/__tests__/displayValue.test.tsx
@@ -120,7 +120,7 @@ test('byDisplayValue queries support hidden option', () => {
   );
 });
 
-test('byDisplayValue should return composite component', () => {
+test('byDisplayValue should return composite TextInput', () => {
   const { getByDisplayValue } = render(<TextInput value="value" />);
 
   expect(getByDisplayValue('value').type).toBe(TextInput);
diff --git a/src/queries/__tests__/text.test.tsx b/src/queries/__tests__/text.test.tsx
index 00cabbd26..a7d280d32 100644
--- a/src/queries/__tests__/text.test.tsx
+++ b/src/queries/__tests__/text.test.tsx
@@ -503,7 +503,7 @@ test('byText support hidden option', () => {
   );
 });
 
-test('byText should return composite component', () => {
+test('byText should return composite Text', () => {
   const { getByText } = render(<Text>hello</Text>);
 
   expect(getByText('hello').type).toBe(Text);
diff --git a/src/queries/displayValue.ts b/src/queries/displayValue.ts
index 16f057b37..9b3d337cd 100644
--- a/src/queries/displayValue.ts
+++ b/src/queries/displayValue.ts
@@ -13,7 +13,7 @@ import type {
   QueryAllByQuery,
   QueryByQuery,
 } from './makeQueries';
-import { CommonQueryOptions, shouldReturnCompositeComponent } from './options';
+import { CommonQueryOptions } from './options';
 
 type ByDisplayValueOptions = CommonQueryOptions & TextMatchOptions;
 
@@ -25,9 +25,10 @@ const getTextInputNodeByDisplayValue = (
   const { exact, normalizer } = options;
   const nodeValue =
     node.props.value !== undefined ? node.props.value : node.props.defaultValue;
-  const typeToMatch = shouldReturnCompositeComponent()
-    ? TextInput
-    : getConfig().hostComponentNames.textInput;
+  const shouldReturnHostTextInput = getConfig().useBreakingChanges;
+  const typeToMatch = shouldReturnHostTextInput
+    ? getConfig().hostComponentNames.textInput
+    : TextInput;
 
   return (
     filterNodeByType(node, typeToMatch) &&
diff --git a/src/queries/makeQueries.ts b/src/queries/makeQueries.ts
index 3a7d8b9a0..d9e328310 100644
--- a/src/queries/makeQueries.ts
+++ b/src/queries/makeQueries.ts
@@ -2,7 +2,7 @@ import type { ReactTestInstance } from 'react-test-renderer';
 import { ErrorWithStack } from '../helpers/errors';
 import waitFor from '../waitFor';
 import type { WaitForOptions } from '../waitFor';
-import { detectHostComponentNames } from '../helpers/detectHostComponentNames';
+import { detectHostComponentNames } from '../helpers/host-component-names';
 import { getConfig } from '../config';
 
 export type GetByQuery<Predicate, Options = void> = (
diff --git a/src/queries/options.ts b/src/queries/options.ts
index e119e3234..2468723a5 100644
--- a/src/queries/options.ts
+++ b/src/queries/options.ts
@@ -1,4 +1,3 @@
-import { getConfig } from '../config';
 import { NormalizerFn } from '../matches';
 
 export type CommonQueryOptions = {
@@ -13,7 +12,3 @@ export type TextMatchOptions = {
   exact?: boolean;
   normalizer?: NormalizerFn;
 };
-
-export const shouldReturnCompositeComponent = () => {
-  return !getConfig().useBreakingChanges;
-};
diff --git a/src/queries/placeholderText.ts b/src/queries/placeholderText.ts
index ffa58d50d..642a33e9d 100644
--- a/src/queries/placeholderText.ts
+++ b/src/queries/placeholderText.ts
@@ -13,7 +13,7 @@ import type {
   QueryAllByQuery,
   QueryByQuery,
 } from './makeQueries';
-import { CommonQueryOptions, shouldReturnCompositeComponent } from './options';
+import { CommonQueryOptions } from './options';
 
 type ByPlaceholderTextOptions = CommonQueryOptions & TextMatchOptions;
 
@@ -23,9 +23,10 @@ const getTextInputNodeByPlaceholderText = (
   options: TextMatchOptions = {}
 ) => {
   const { exact, normalizer } = options;
-  const typeToMatch = shouldReturnCompositeComponent()
-    ? TextInput
-    : getConfig().hostComponentNames.textInput;
+  const shouldReturnHostTextInput = getConfig().useBreakingChanges;
+  const typeToMatch = shouldReturnHostTextInput
+    ? getConfig().hostComponentNames.textInput
+    : TextInput;
 
   return (
     filterNodeByType(node, typeToMatch) &&
diff --git a/src/queries/text.ts b/src/queries/text.ts
index 72fc62755..9a1fef3b5 100644
--- a/src/queries/text.ts
+++ b/src/queries/text.ts
@@ -17,7 +17,7 @@ import type {
   QueryAllByQuery,
   QueryByQuery,
 } from './makeQueries';
-import { CommonQueryOptions, shouldReturnCompositeComponent } from './options';
+import { CommonQueryOptions } from './options';
 
 type ByTextOptions = CommonQueryOptions & TextMatchOptions;
 
@@ -25,7 +25,8 @@ const queryAllByText = (
   instance: ReactTestInstance
 ): ((text: TextMatch, options?: ByTextOptions) => Array<ReactTestInstance>) =>
   function queryAllByTextFn(text, options = {}) {
-    if (shouldReturnCompositeComponent()) {
+    const shouldReturnHostText = getConfig().useBreakingChanges;
+    if (!shouldReturnHostText) {
       const baseInstance = isHostElementForType(instance, Text)
         ? getCompositeParentOfType(instance, Text)
         : instance;
diff --git a/website/docs/API.md b/website/docs/API.md
index 12fccea95..5c257a66f 100644
--- a/website/docs/API.md
+++ b/website/docs/API.md
@@ -879,7 +879,9 @@ Default [debug options](#debug) to be used when calling `debug()`. These default
 
 #### `hostComponentNames` option
 
-The internal names of the components `Text` and `TextInput` used by `byText`, `byDisplayValue` and `byPlaceholderText` queries. This should only be changed if you're using a version of React Native that is not compatible with the version of @testing-library/react-native. If that's the case, then failed getBy and findBy queries should suggest the appropriate config to use.
+Specifies the host component names RNTL expects React Native to use when rendering some built-in component types (e.g. `Text` and `TextInput`).
+
+You normally won't need to change this option. In the rare occasion when React Native would change the relevant host components names, RNTL will show you a warning suggesting proper values to use.
 
 ### `resetToDefaults()`
 

From f627ad4e58cca3cfa56437b9e5a1ee6f6c10f586 Mon Sep 17 00:00:00 2001
From: pierrezimmermann <pierrez@nam.tech>
Date: Fri, 9 Dec 2022 12:58:04 +0100
Subject: [PATCH 24/45] refactor: define type to match inside matchTextContent
 function

---
 src/helpers/matchers/matchTextContent.ts | 8 +++++---
 src/queries/text.ts                      | 3 +--
 2 files changed, 6 insertions(+), 5 deletions(-)

diff --git a/src/helpers/matchers/matchTextContent.ts b/src/helpers/matchers/matchTextContent.ts
index c9f7f7c9c..ed6ed6422 100644
--- a/src/helpers/matchers/matchTextContent.ts
+++ b/src/helpers/matchers/matchTextContent.ts
@@ -1,5 +1,6 @@
-import { ElementType } from 'react';
+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';
@@ -7,16 +8,17 @@ import { getTextContent } from '../getTextContent';
 type MatchTextContentParams = {
   node: ReactTestInstance;
   text: TextMatch;
-  typeToMatch: ElementType | string;
   options?: TextMatchOptions;
 };
 
 export function matchTextContent({
   node,
   text,
-  typeToMatch,
   options = {},
 }: MatchTextContentParams) {
+  const typeToMatch = getConfig().useBreakingChanges
+    ? getConfig().hostComponentNames.text
+    : Text;
   if (!filterNodeByType(node, typeToMatch)) {
     return false;
   }
diff --git a/src/queries/text.ts b/src/queries/text.ts
index 9a1fef3b5..12b9bb8c3 100644
--- a/src/queries/text.ts
+++ b/src/queries/text.ts
@@ -37,7 +37,7 @@ const queryAllByText = (
 
       const results = findAll(
         baseInstance,
-        (node) => matchTextContent({ node, text, typeToMatch: Text, options }),
+        (node) => matchTextContent({ node, text, options }),
         { ...options, matchDeepestOnly: true }
       );
 
@@ -50,7 +50,6 @@ const queryAllByText = (
         matchTextContent({
           node,
           text,
-          typeToMatch: getConfig().hostComponentNames.text,
           options,
         }),
       {

From 9eb4dc44b6fa4a69fe6c8a03f384fdb89c4aca57 Mon Sep 17 00:00:00 2001
From: pierrezimmermann <pierrez@nam.tech>
Date: Fri, 9 Dec 2022 13:07:21 +0100
Subject: [PATCH 25/45] refactor: rename function to get error message

---
 src/queries/makeQueries.ts | 11 +++++------
 1 file changed, 5 insertions(+), 6 deletions(-)

diff --git a/src/queries/makeQueries.ts b/src/queries/makeQueries.ts
index d9e328310..32245a387 100644
--- a/src/queries/makeQueries.ts
+++ b/src/queries/makeQueries.ts
@@ -85,9 +85,9 @@ Example:
   return waitForOptions;
 }
 
-function getWrongHostComponentNamesError(): string {
+function formatIncorrectHostComponentNamesError(): string | null {
   if (!getConfig().useBreakingChanges) {
-    return '';
+    return null;
   }
 
   const reactNativeHostComponentNames = detectHostComponentNames();
@@ -164,10 +164,9 @@ export function makeQueries<Predicate, Options>(
 
       if (results.length === 0) {
         throw new ErrorWithStack(
-          `${getMissingError(
-            predicate,
-            options
-          )}${getWrongHostComponentNamesError()}`,
+          `${getMissingError(predicate, options)}${
+            formatIncorrectHostComponentNamesError() || ''
+          }`,
           getFn
         );
       }

From 57b704e1ed737ac13f5a2ed40308b32f02497f00 Mon Sep 17 00:00:00 2001
From: pierrezimmermann <pierrez@nam.tech>
Date: Fri, 9 Dec 2022 14:06:19 +0100
Subject: [PATCH 26/45] feat: display error when auto detect of host component
 names throw

---
 src/helpers/host-component-names.tsx | 25 ++++++++++++++++++++-----
 src/queries/makeQueries.ts           |  8 +++++++-
 2 files changed, 27 insertions(+), 6 deletions(-)

diff --git a/src/helpers/host-component-names.tsx b/src/helpers/host-component-names.tsx
index 85677a599..cedc4511d 100644
--- a/src/helpers/host-component-names.tsx
+++ b/src/helpers/host-component-names.tsx
@@ -4,9 +4,12 @@ import TestRenderer from 'react-test-renderer';
 import { HostComponentNames } from '../config';
 import { getQueriesForElement } from '../within';
 
+const defaultErrorMessage =
+  'There seems to be an issue with your configuration that prevents the library from working correctly. Please ensure that you have a version of react native compatible with the library';
+
 export function detectHostComponentNames():
-  | HostComponentNames
-  | { text: null; textInput: null } {
+  | (HostComponentNames & { errorMessage?: never })
+  | { errorMessage: string; text?: never; textInput?: never } {
   try {
     const renderer = TestRenderer.create(
       <View>
@@ -15,7 +18,6 @@ export function detectHostComponentNames():
       </View>
     );
     const { getByTestId } = getQueriesForElement(renderer.root);
-
     const textHostName = getByTestId('text').type;
     const textInputHostName = getByTestId('textInput').type;
 
@@ -29,8 +31,21 @@ export function detectHostComponentNames():
       };
     }
 
-    return { text: null, textInput: null };
+    return { errorMessage: defaultErrorMessage };
   } catch (error) {
-    return { text: null, textInput: null };
+    const errorMessage =
+      error && typeof error === 'object' && 'message' in error
+        ? // @ts-expect-error ts doesnt correctly narrow the type of error
+          error.message
+        : null;
+
+    return {
+      errorMessage: `Trying to detect host component names triggered the following error:
+    
+${errorMessage}
+    
+${defaultErrorMessage}
+`,
+    };
   }
 }
diff --git a/src/queries/makeQueries.ts b/src/queries/makeQueries.ts
index 32245a387..844234b27 100644
--- a/src/queries/makeQueries.ts
+++ b/src/queries/makeQueries.ts
@@ -91,6 +91,12 @@ function formatIncorrectHostComponentNamesError(): string | null {
   }
 
   const reactNativeHostComponentNames = detectHostComponentNames();
+  if (reactNativeHostComponentNames.errorMessage) {
+    return `
+    
+${reactNativeHostComponentNames.errorMessage}`;
+  }
+
   if (!reactNativeHostComponentNames.text) {
     return '';
   }
@@ -115,7 +121,7 @@ configure({
 });`;
   }
 
-  return '';
+  return null;
 }
 
 export function makeQueries<Predicate, Options>(

From 751af46975e56abc909f8638ec5eadbfa284ba33 Mon Sep 17 00:00:00 2001
From: pierrezimmermann <pierrez@nam.tech>
Date: Fri, 6 Jan 2023 13:20:47 +0100
Subject: [PATCH 27/45] fix: remove unused ts-expect-error after ts version
 bump

---
 src/helpers/host-component-names.tsx | 3 +--
 1 file changed, 1 insertion(+), 2 deletions(-)

diff --git a/src/helpers/host-component-names.tsx b/src/helpers/host-component-names.tsx
index cedc4511d..0103ccef4 100644
--- a/src/helpers/host-component-names.tsx
+++ b/src/helpers/host-component-names.tsx
@@ -35,8 +35,7 @@ export function detectHostComponentNames():
   } catch (error) {
     const errorMessage =
       error && typeof error === 'object' && 'message' in error
-        ? // @ts-expect-error ts doesnt correctly narrow the type of error
-          error.message
+        ? error.message
         : null;
 
     return {

From 366f08f2bd610fbc10939dc2dadc807626da9a29 Mon Sep 17 00:00:00 2001
From: pierrezimmermann <pierrez@nam.tech>
Date: Sun, 8 Jan 2023 18:22:43 +0100
Subject: [PATCH 28/45] refactor: run auto detection on render if it hasnt been
 run yet

---
 src/__tests__/config.test.ts                  |  19 ---
 src/config.ts                                 |   7 +-
 src/helpers/host-component-names.tsx          |  16 +-
 src/helpers/matchers/matchTextContent.ts      |   2 +-
 .../host-component-names.breaking.test.tsx    | 148 ------------------
 src/queries/displayValue.ts                   |   2 +-
 src/queries/makeQueries.ts                    |  50 +-----
 src/queries/placeholderText.ts                |   2 +-
 src/render.tsx                                |   8 +-
 typings/index.flow.js                         |   6 -
 website/docs/API.md                           |   8 -
 11 files changed, 21 insertions(+), 247 deletions(-)
 delete mode 100644 src/queries/__tests__/host-component-names.breaking.test.tsx

diff --git a/src/__tests__/config.test.ts b/src/__tests__/config.test.ts
index fe9bebe0e..03de47adc 100644
--- a/src/__tests__/config.test.ts
+++ b/src/__tests__/config.test.ts
@@ -19,10 +19,6 @@ test('configure() overrides existing config values', () => {
     defaultDebugOptions: { message: 'debug message' },
     defaultIncludeHiddenElements: true,
     useBreakingChanges: false,
-    hostComponentNames: {
-      text: 'Text',
-      textInput: 'TextInput',
-    },
   });
 });
 
@@ -55,18 +51,3 @@ test('configure handles alias option defaultHidden', () => {
   configure({ defaultHidden: false });
   expect(getConfig().defaultIncludeHiddenElements).toEqual(false);
 });
-
-test('configure handles hostComponentNames', () => {
-  expect(getConfig().hostComponentNames).toEqual({
-    text: 'Text',
-    textInput: 'TextInput',
-  });
-
-  configure({
-    hostComponentNames: { text: 'RCText', textInput: 'RCTextInput' },
-  });
-  expect(getConfig().hostComponentNames).toEqual({
-    text: 'RCText',
-    textInput: 'RCTextInput',
-  });
-});
diff --git a/src/config.ts b/src/config.ts
index d3945ee6b..034e18ab6 100644
--- a/src/config.ts
+++ b/src/config.ts
@@ -18,9 +18,6 @@ export type Config = {
 
   /** Default options for `debug` helper. */
   defaultDebugOptions?: Partial<DebugOptions>;
-
-  /** Host component names used for queries */
-  hostComponentNames: HostComponentNames;
 };
 
 export type ConfigAliasOptions = {
@@ -31,13 +28,15 @@ export type ConfigAliasOptions = {
 export type InternalConfig = Config & {
   /** Whether to use breaking changes intended for next major version release. */
   useBreakingChanges: boolean;
+
+  /** Host component names used for queries */
+  hostComponentNames?: HostComponentNames;
 };
 
 const defaultConfig: InternalConfig = {
   useBreakingChanges: false,
   asyncUtilTimeout: 1000,
   defaultIncludeHiddenElements: true,
-  hostComponentNames: { text: 'Text', textInput: 'TextInput' },
 };
 
 let config = { ...defaultConfig };
diff --git a/src/helpers/host-component-names.tsx b/src/helpers/host-component-names.tsx
index 0103ccef4..b641d00de 100644
--- a/src/helpers/host-component-names.tsx
+++ b/src/helpers/host-component-names.tsx
@@ -4,12 +4,10 @@ import TestRenderer from 'react-test-renderer';
 import { HostComponentNames } from '../config';
 import { getQueriesForElement } from '../within';
 
-const defaultErrorMessage =
-  'There seems to be an issue with your configuration that prevents the library from working correctly. Please ensure that you have a version of react native compatible with the library';
+const defaultErrorMessage = `There seems to be an issue with your configuration that prevents the library from working correctly.
+Please ensure that you have a version of react native compatible with the library`;
 
-export function detectHostComponentNames():
-  | (HostComponentNames & { errorMessage?: never })
-  | { errorMessage: string; text?: never; textInput?: never } {
+export function detectHostComponentNames(): HostComponentNames {
   try {
     const renderer = TestRenderer.create(
       <View>
@@ -31,20 +29,18 @@ export function detectHostComponentNames():
       };
     }
 
-    return { errorMessage: defaultErrorMessage };
+    throw new Error(defaultErrorMessage);
   } catch (error) {
     const errorMessage =
       error && typeof error === 'object' && 'message' in error
         ? error.message
         : null;
 
-    return {
-      errorMessage: `Trying to detect host component names triggered the following error:
+    throw new Error(`Trying to detect host component names triggered the following error:
     
 ${errorMessage}
     
 ${defaultErrorMessage}
-`,
-    };
+`);
   }
 }
diff --git a/src/helpers/matchers/matchTextContent.ts b/src/helpers/matchers/matchTextContent.ts
index ed6ed6422..516ce72c6 100644
--- a/src/helpers/matchers/matchTextContent.ts
+++ b/src/helpers/matchers/matchTextContent.ts
@@ -17,7 +17,7 @@ export function matchTextContent({
   options = {},
 }: MatchTextContentParams) {
   const typeToMatch = getConfig().useBreakingChanges
-    ? getConfig().hostComponentNames.text
+    ? getConfig().hostComponentNames?.text || 'Text'
     : Text;
   if (!filterNodeByType(node, typeToMatch)) {
     return false;
diff --git a/src/queries/__tests__/host-component-names.breaking.test.tsx b/src/queries/__tests__/host-component-names.breaking.test.tsx
deleted file mode 100644
index 02c126822..000000000
--- a/src/queries/__tests__/host-component-names.breaking.test.tsx
+++ /dev/null
@@ -1,148 +0,0 @@
-import React, { useEffect, useState } from 'react';
-import { Text, TextInput } from 'react-native';
-import { configureInternal } from '../../config';
-import { render, screen, configure } from '../../pure';
-
-beforeEach(() => configureInternal({ useBreakingChanges: true }));
-
-test('byText queries should use text host name from config', () => {
-  render(<Text>hello</Text>);
-
-  expect(screen.getByText('hello')).toBeTruthy();
-
-  configure({
-    hostComponentNames: { text: 'wrongName', textInput: 'wrongName' },
-  });
-
-  expect(screen.queryByText('hello')).toBeFalsy();
-});
-
-test('byDisplayValue queries should use textInput host name from config', () => {
-  render(<TextInput value="email" />);
-
-  expect(screen.getByDisplayValue('email')).toBeTruthy();
-
-  configure({
-    hostComponentNames: { text: 'wrongName', textInput: 'wrongName' },
-  });
-
-  expect(screen.queryByDisplayValue('email')).toBeFalsy();
-});
-
-test('byPlaceholderText queries should use textInput host name from config', () => {
-  render(<TextInput placeholder="email" />);
-
-  expect(screen.getByPlaceholderText('email')).toBeTruthy();
-
-  configure({
-    hostComponentNames: { text: 'wrongName', textInput: 'wrongName' },
-  });
-
-  expect(screen.queryByPlaceholderText('email')).toBeFalsy();
-});
-
-test('suggests appropriate config when a getByText query fails and wrong component names are used', () => {
-  configure({
-    hostComponentNames: { text: 'wrongName', textInput: 'wrongName' },
-  });
-
-  render(<Text>hello</Text>);
-
-  expect(() => screen.getByText('hello')).toThrowErrorMatchingInlineSnapshot(`
-    "Unable to find an element with text: hello
-
-    Your configuration contains invalid host component names. This can happen if you use a version of React Native that is not compatible with your version of @testing-library/react-native
-
-    To fix this add following line in a Jest setup file :
-
-    configure({ 
-      hostComponentNames: { 
-        text: 'Text',
-        textInput: 'TextInput',
-      }
-    });"
-  `);
-});
-
-test('suggests appropriate config when a getByDisplayValue query fails and wrong component names are used', () => {
-  configure({
-    hostComponentNames: { text: 'wrongName', textInput: 'wrongName' },
-  });
-
-  render(<TextInput value="value" />);
-
-  expect(() => screen.getByDisplayValue('value'))
-    .toThrowErrorMatchingInlineSnapshot(`
-    "Unable to find an element with displayValue: value
-
-    Your configuration contains invalid host component names. This can happen if you use a version of React Native that is not compatible with your version of @testing-library/react-native
-
-    To fix this add following line in a Jest setup file :
-
-    configure({ 
-      hostComponentNames: { 
-        text: 'Text',
-        textInput: 'TextInput',
-      }
-    });"
-  `);
-});
-
-test('suggests appropriate config when a getByPlaceholderText query fails and wrong component names are used', () => {
-  configure({
-    hostComponentNames: { text: 'wrongName', textInput: 'wrongName' },
-  });
-
-  render(<TextInput placeholder="placeholder" />);
-
-  expect(() => screen.getByPlaceholderText('placeholder'))
-    .toThrowErrorMatchingInlineSnapshot(`
-    "Unable to find an element with placeholder: placeholder
-
-    Your configuration contains invalid host component names. This can happen if you use a version of React Native that is not compatible with your version of @testing-library/react-native
-
-    To fix this add following line in a Jest setup file :
-
-    configure({ 
-      hostComponentNames: { 
-        text: 'Text',
-        textInput: 'TextInput',
-      }
-    });"
-  `);
-});
-
-test('does not suggest to change config when a query fails but the correct component names are used', () => {
-  render(<Text>bonjour</Text>);
-
-  expect(() => screen.getByText('hello')).toThrowErrorMatchingInlineSnapshot(
-    `"Unable to find an element with text: hello"`
-  );
-});
-
-test('does not update screen object when running detection', async () => {
-  jest.useFakeTimers();
-
-  const TestComponent = () => {
-    const [shouldDisplayHello, setShouldDisplayHello] = useState(false);
-
-    useEffect(() => {
-      setTimeout(() => {
-        setShouldDisplayHello(true);
-      }, 500);
-    }, []);
-
-    if (shouldDisplayHello) {
-      return <Text>hello</Text>;
-    }
-
-    return null;
-  };
-
-  render(<TestComponent />);
-
-  expect(await screen.findByText('hello')).toBeTruthy();
-  expect(screen.getByText('hello')).toBeTruthy();
-
-  jest.useRealTimers();
-});
diff --git a/src/queries/displayValue.ts b/src/queries/displayValue.ts
index 9b3d337cd..65ebae3cd 100644
--- a/src/queries/displayValue.ts
+++ b/src/queries/displayValue.ts
@@ -27,7 +27,7 @@ const getTextInputNodeByDisplayValue = (
     node.props.value !== undefined ? node.props.value : node.props.defaultValue;
   const shouldReturnHostTextInput = getConfig().useBreakingChanges;
   const typeToMatch = shouldReturnHostTextInput
-    ? getConfig().hostComponentNames.textInput
+    ? getConfig().hostComponentNames?.textInput || 'TextInput'
     : TextInput;
 
   return (
diff --git a/src/queries/makeQueries.ts b/src/queries/makeQueries.ts
index 844234b27..024a6597e 100644
--- a/src/queries/makeQueries.ts
+++ b/src/queries/makeQueries.ts
@@ -2,8 +2,6 @@ import type { ReactTestInstance } from 'react-test-renderer';
 import { ErrorWithStack } from '../helpers/errors';
 import waitFor from '../waitFor';
 import type { WaitForOptions } from '../waitFor';
-import { detectHostComponentNames } from '../helpers/host-component-names';
-import { getConfig } from '../config';
 
 export type GetByQuery<Predicate, Options = void> = (
   predicate: Predicate,
@@ -85,45 +83,6 @@ Example:
   return waitForOptions;
 }
 
-function formatIncorrectHostComponentNamesError(): string | null {
-  if (!getConfig().useBreakingChanges) {
-    return null;
-  }
-
-  const reactNativeHostComponentNames = detectHostComponentNames();
-  if (reactNativeHostComponentNames.errorMessage) {
-    return `
-    
-${reactNativeHostComponentNames.errorMessage}`;
-  }
-
-  if (!reactNativeHostComponentNames.text) {
-    return '';
-  }
-
-  const configHostComponentNames = getConfig().hostComponentNames;
-  if (
-    reactNativeHostComponentNames.text !== configHostComponentNames.text ||
-    reactNativeHostComponentNames.textInput !==
-      configHostComponentNames.textInput
-  ) {
-    return `
-
-Your configuration contains invalid host component names. This can happen if you use a version of React Native that is not compatible with your version of @testing-library/react-native
-
-To fix this add following line in a Jest setup file :
-
-configure({ 
-  hostComponentNames: { 
-    text: '${reactNativeHostComponentNames.text}',
-    textInput: '${reactNativeHostComponentNames.textInput}',
-  }
-});`;
-  }
-
-  return null;
-}
-
 export function makeQueries<Predicate, Options>(
   queryAllByQuery: UnboundQuery<QueryAllByQuery<Predicate, Options>>,
   getMissingError: (predicate: Predicate, options?: Options) => string,
@@ -169,12 +128,7 @@ export function makeQueries<Predicate, Options>(
       }
 
       if (results.length === 0) {
-        throw new ErrorWithStack(
-          `${getMissingError(predicate, options)}${
-            formatIncorrectHostComponentNamesError() || ''
-          }`,
-          getFn
-        );
+        throw new ErrorWithStack(getMissingError(predicate, options), getFn);
       }
 
       return results[0];
@@ -197,7 +151,7 @@ export function makeQueries<Predicate, Options>(
   }
 
   function findByQuery(instance: ReactTestInstance) {
-    return function findFn(
+    return async function findFn(
       predicate: Predicate,
       queryOptions?: Options & WaitForOptions,
       waitForOptions: WaitForOptions = {}
diff --git a/src/queries/placeholderText.ts b/src/queries/placeholderText.ts
index 642a33e9d..84923a0d1 100644
--- a/src/queries/placeholderText.ts
+++ b/src/queries/placeholderText.ts
@@ -25,7 +25,7 @@ const getTextInputNodeByPlaceholderText = (
   const { exact, normalizer } = options;
   const shouldReturnHostTextInput = getConfig().useBreakingChanges;
   const typeToMatch = shouldReturnHostTextInput
-    ? getConfig().hostComponentNames.textInput
+    ? getConfig().hostComponentNames?.textInput || 'TextInput'
     : TextInput;
 
   return (
diff --git a/src/render.tsx b/src/render.tsx
index a25828985..7f5e2f45f 100644
--- a/src/render.tsx
+++ b/src/render.tsx
@@ -9,7 +9,8 @@ import debugDeep, { DebugOptions } from './helpers/debugDeep';
 import { getQueriesForElement } from './within';
 import { setRenderResult, screen } from './screen';
 import { validateStringsRenderedWithinText } from './helpers/stringValidation';
-import { getConfig } from './config';
+import { configureInternal, getConfig } from './config';
+import { detectHostComponentNames } from './helpers/host-component-names';
 
 export type RenderOptions = {
   wrapper?: React.ComponentType<any>;
@@ -42,6 +43,11 @@ export default function render<T>(
     });
   }
 
+  if (!getConfig().hostComponentNames) {
+    const { text, textInput } = detectHostComponentNames();
+    configureInternal({ hostComponentNames: { text, textInput } });
+  }
+
   const wrap = (element: React.ReactElement) =>
     Wrapper ? <Wrapper>{element}</Wrapper> : element;
 
diff --git a/typings/index.flow.js b/typings/index.flow.js
index 463068ce6..112609d60 100644
--- a/typings/index.flow.js
+++ b/typings/index.flow.js
@@ -466,16 +466,10 @@ declare module '@testing-library/react-native' {
 
   declare export var waitForElementToBeRemoved: WaitForElementToBeRemovedFunction;
 
-  declare interface HostComponentNames {
-    text: string;
-    textInput: string;
-  }
-
   declare interface Config {
     asyncUtilTimeout: number;
     defaultIncludeHiddenElements: boolean;
     defaultDebugOptions?: $Shape<DebugOptions>;
-    hostComponentNames: HostComponentNames;
   }
 
   declare interface ConfigAliasOptions {
diff --git a/website/docs/API.md b/website/docs/API.md
index 5c257a66f..4b779fbd8 100644
--- a/website/docs/API.md
+++ b/website/docs/API.md
@@ -53,7 +53,6 @@ title: API
     - [`asyncUtilTimeout` option](#asyncutiltimeout-option)
     - [`defaultIncludeHiddenElements` option](#defaultincludehiddenelements-option)
     - [`defaultDebugOptions` option](#defaultdebugoptions-option)
-    - [`hostComponentNames` option](#hostcomponentnames-option)
   - [`resetToDefaults()`](#resettodefaults)
   - [Environment variables](#environment-variables)
     - [`RNTL_SKIP_AUTO_CLEANUP`](#rntl_skip_auto_cleanup)
@@ -855,7 +854,6 @@ type Config = {
   asyncUtilTimeout: number;
   defaultHidden: boolean;
   defaultDebugOptions: Partial<DebugOptions>;
-  hostComponentNames: { text: string; textInput: string };
 };
 
 function configure(options: Partial<Config>) {}
@@ -877,12 +875,6 @@ This option is also available as `defaultHidden` alias for compatibility with [R
 
 Default [debug options](#debug) to be used when calling `debug()`. These default options will be overridden by the ones you specify directly when calling `debug()`.
 
-#### `hostComponentNames` option
-
-Specifies the host component names RNTL expects React Native to use when rendering some built-in component types (e.g. `Text` and `TextInput`).
-
-You normally won't need to change this option. In the rare occasion when React Native would change the relevant host components names, RNTL will show you a warning suggesting proper values to use.
-
 ### `resetToDefaults()`
 
 ```ts

From e83c8062a3800abf738a3569ec5da340b317f703 Mon Sep 17 00:00:00 2001
From: pierrezimmermann <pierrez@nam.tech>
Date: Mon, 9 Jan 2023 20:52:05 +0100
Subject: [PATCH 29/45] refactor: reuse type imports that had been converted to
 regular ones

---
 src/queries/displayValue.ts    | 2 +-
 src/queries/placeholderText.ts | 2 +-
 src/queries/text.ts            | 2 +-
 3 files changed, 3 insertions(+), 3 deletions(-)

diff --git a/src/queries/displayValue.ts b/src/queries/displayValue.ts
index 65ebae3cd..0b653518a 100644
--- a/src/queries/displayValue.ts
+++ b/src/queries/displayValue.ts
@@ -13,7 +13,7 @@ import type {
   QueryAllByQuery,
   QueryByQuery,
 } from './makeQueries';
-import { CommonQueryOptions } from './options';
+import type { CommonQueryOptions } from './options';
 
 type ByDisplayValueOptions = CommonQueryOptions & TextMatchOptions;
 
diff --git a/src/queries/placeholderText.ts b/src/queries/placeholderText.ts
index 84923a0d1..2ebafea29 100644
--- a/src/queries/placeholderText.ts
+++ b/src/queries/placeholderText.ts
@@ -13,7 +13,7 @@ import type {
   QueryAllByQuery,
   QueryByQuery,
 } from './makeQueries';
-import { CommonQueryOptions } from './options';
+import type { CommonQueryOptions } from './options';
 
 type ByPlaceholderTextOptions = CommonQueryOptions & TextMatchOptions;
 
diff --git a/src/queries/text.ts b/src/queries/text.ts
index 12b9bb8c3..610a9940d 100644
--- a/src/queries/text.ts
+++ b/src/queries/text.ts
@@ -17,7 +17,7 @@ import type {
   QueryAllByQuery,
   QueryByQuery,
 } from './makeQueries';
-import { CommonQueryOptions } from './options';
+import type { CommonQueryOptions } from './options';
 
 type ByTextOptions = CommonQueryOptions & TextMatchOptions;
 

From 8377660af22376f9b30096b3094b2290212a6181 Mon Sep 17 00:00:00 2001
From: pierrezimmermann <pierrez@nam.tech>
Date: Mon, 9 Jan 2023 21:00:33 +0100
Subject: [PATCH 30/45] refactor: add comments to distinguish breaking and
 legacy

---
 src/queries/text.ts | 3 +++
 1 file changed, 3 insertions(+)

diff --git a/src/queries/text.ts b/src/queries/text.ts
index 610a9940d..26bef8ccf 100644
--- a/src/queries/text.ts
+++ b/src/queries/text.ts
@@ -26,6 +26,8 @@ const queryAllByText = (
 ): ((text: TextMatch, options?: ByTextOptions) => Array<ReactTestInstance>) =>
   function queryAllByTextFn(text, options = {}) {
     const shouldReturnHostText = getConfig().useBreakingChanges;
+
+    // Legacy version: return composite Text
     if (!shouldReturnHostText) {
       const baseInstance = isHostElementForType(instance, Text)
         ? getCompositeParentOfType(instance, Text)
@@ -44,6 +46,7 @@ const queryAllByText = (
       return results;
     }
 
+    // vNext version: returns host Text
     return findAll(
       instance,
       (node) =>

From 3c8fd8c9989a05c4660cf1cca68c17f4f01ffafc Mon Sep 17 00:00:00 2001
From: pierrezimmermann <pierrez@nam.tech>
Date: Mon, 9 Jan 2023 21:00:58 +0100
Subject: [PATCH 31/45] refactor: move config logic into
 detectComponentHostNames function

---
 src/config.ts                        |  2 +-
 src/helpers/host-component-names.tsx | 24 +++++++++++++++---------
 src/render.tsx                       |  7 ++-----
 3 files changed, 18 insertions(+), 15 deletions(-)

diff --git a/src/config.ts b/src/config.ts
index 034e18ab6..efcede605 100644
--- a/src/config.ts
+++ b/src/config.ts
@@ -4,7 +4,7 @@ import { DebugOptions } from './helpers/debugDeep';
  * Global configuration options for React Native Testing Library.
  */
 
-export type HostComponentNames = {
+type HostComponentNames = {
   text: string;
   textInput: string;
 };
diff --git a/src/helpers/host-component-names.tsx b/src/helpers/host-component-names.tsx
index b641d00de..0804b6253 100644
--- a/src/helpers/host-component-names.tsx
+++ b/src/helpers/host-component-names.tsx
@@ -1,13 +1,17 @@
 import React from 'react';
 import { Text, TextInput, View } from 'react-native';
 import TestRenderer from 'react-test-renderer';
-import { HostComponentNames } from '../config';
+import { configureInternal, getConfig } from '../config';
 import { getQueriesForElement } from '../within';
 
 const defaultErrorMessage = `There seems to be an issue with your configuration that prevents the library from working correctly.
 Please ensure that you have a version of react native compatible with the library`;
 
-export function detectHostComponentNames(): HostComponentNames {
+export function detectHostComponentNames(): void {
+  if (getConfig().hostComponentNames) {
+    return;
+  }
+
   try {
     const renderer = TestRenderer.create(
       <View>
@@ -20,16 +24,18 @@ export function detectHostComponentNames(): HostComponentNames {
     const textInputHostName = getByTestId('textInput').type;
 
     if (
-      typeof textHostName === 'string' &&
-      typeof textInputHostName === 'string'
+      typeof textHostName !== 'string' ||
+      typeof textInputHostName !== 'string'
     ) {
-      return {
-        text: textHostName,
-        textInput: textInputHostName,
-      };
+      throw new Error(defaultErrorMessage);
     }
 
-    throw new Error(defaultErrorMessage);
+    configureInternal({
+      hostComponentNames: {
+        text: textHostName,
+        textInput: textInputHostName,
+      },
+    });
   } catch (error) {
     const errorMessage =
       error && typeof error === 'object' && 'message' in error
diff --git a/src/render.tsx b/src/render.tsx
index 7f5e2f45f..c25bed9e1 100644
--- a/src/render.tsx
+++ b/src/render.tsx
@@ -9,7 +9,7 @@ import debugDeep, { DebugOptions } from './helpers/debugDeep';
 import { getQueriesForElement } from './within';
 import { setRenderResult, screen } from './screen';
 import { validateStringsRenderedWithinText } from './helpers/stringValidation';
-import { configureInternal, getConfig } from './config';
+import { getConfig } from './config';
 import { detectHostComponentNames } from './helpers/host-component-names';
 
 export type RenderOptions = {
@@ -43,10 +43,7 @@ export default function render<T>(
     });
   }
 
-  if (!getConfig().hostComponentNames) {
-    const { text, textInput } = detectHostComponentNames();
-    configureInternal({ hostComponentNames: { text, textInput } });
-  }
+  detectHostComponentNames();
 
   const wrap = (element: React.ReactElement) =>
     Wrapper ? <Wrapper>{element}</Wrapper> : element;

From b45474678f2106eb56236c94c9540933085406e8 Mon Sep 17 00:00:00 2001
From: pierrezimmermann <pierrez@nam.tech>
Date: Mon, 9 Jan 2023 21:02:09 +0100
Subject: [PATCH 32/45] refactor: rename function to
 detectComponentHostNamesIfNeeded

---
 src/helpers/host-component-names.tsx | 2 +-
 src/render.tsx                       | 4 ++--
 2 files changed, 3 insertions(+), 3 deletions(-)

diff --git a/src/helpers/host-component-names.tsx b/src/helpers/host-component-names.tsx
index 0804b6253..de003dc81 100644
--- a/src/helpers/host-component-names.tsx
+++ b/src/helpers/host-component-names.tsx
@@ -7,7 +7,7 @@ import { getQueriesForElement } from '../within';
 const defaultErrorMessage = `There seems to be an issue with your configuration that prevents the library from working correctly.
 Please ensure that you have a version of react native compatible with the library`;
 
-export function detectHostComponentNames(): void {
+export function detectHostComponentNamesIfNeeded(): void {
   if (getConfig().hostComponentNames) {
     return;
   }
diff --git a/src/render.tsx b/src/render.tsx
index c25bed9e1..00f1b6bf7 100644
--- a/src/render.tsx
+++ b/src/render.tsx
@@ -10,7 +10,7 @@ import { getQueriesForElement } from './within';
 import { setRenderResult, screen } from './screen';
 import { validateStringsRenderedWithinText } from './helpers/stringValidation';
 import { getConfig } from './config';
-import { detectHostComponentNames } from './helpers/host-component-names';
+import { detectHostComponentNamesIfNeeded } from './helpers/host-component-names';
 
 export type RenderOptions = {
   wrapper?: React.ComponentType<any>;
@@ -43,7 +43,7 @@ export default function render<T>(
     });
   }
 
-  detectHostComponentNames();
+  detectHostComponentNamesIfNeeded();
 
   const wrap = (element: React.ReactElement) =>
     Wrapper ? <Wrapper>{element}</Wrapper> : element;

From 81455572248b77e700c8e57f8927f51d167b0c19 Mon Sep 17 00:00:00 2001
From: pierrezimmermann <pierrez@nam.tech>
Date: Mon, 9 Jan 2023 21:14:48 +0100
Subject: [PATCH 33/45] tests: add test on detectHostComponentNamesIfNeeded

---
 src/__tests__/host-component-names.test.tsx | 49 +++++++++++++++++++++
 1 file changed, 49 insertions(+)
 create mode 100644 src/__tests__/host-component-names.test.tsx

diff --git a/src/__tests__/host-component-names.test.tsx b/src/__tests__/host-component-names.test.tsx
new file mode 100644
index 000000000..059aa8410
--- /dev/null
+++ b/src/__tests__/host-component-names.test.tsx
@@ -0,0 +1,49 @@
+import { View } from 'react-native';
+import TestRenderer from 'react-test-renderer';
+import { configureInternal, getConfig } from '../config';
+import { detectHostComponentNamesIfNeeded } from '../helpers/host-component-names';
+
+const mockCreate = jest.spyOn(TestRenderer, 'create') as jest.Mock;
+
+describe('detectHostComponentNamesIfNeeded', () => {
+  test('updates internal config with host component names when they are not defined', () => {
+    expect(getConfig().hostComponentNames).toBeUndefined();
+
+    detectHostComponentNamesIfNeeded();
+
+    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' },
+    });
+
+    detectHostComponentNamesIfNeeded();
+
+    expect(getConfig().hostComponentNames).toEqual({
+      text: 'banana',
+      textInput: 'banana',
+    });
+  });
+
+  test('throw an error when autodetection throws', () => {
+    mockCreate.mockReturnValue({
+      root: { type: View, children: [], props: {} },
+    });
+
+    expect(() => detectHostComponentNamesIfNeeded())
+      .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 the library from working correctly.
+      Please ensure that you have a version of react native compatible with the library
+      "
+    `);
+  });
+});

From 6f1fdd0894712398c964c136499d59bb9238e6ea Mon Sep 17 00:00:00 2001
From: pierrezimmermann <pierrez@nam.tech>
Date: Wed, 11 Jan 2023 22:39:10 +0100
Subject: [PATCH 34/45] fix: use host component name from config for textinput
 in fireEvent

---
 src/fireEvent.ts | 6 +++++-
 1 file changed, 5 insertions(+), 1 deletion(-)

diff --git a/src/fireEvent.ts b/src/fireEvent.ts
index 49fbb93e8..92840fc43 100644
--- a/src/fireEvent.ts
+++ b/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 { getConfig } from './config';
 
 type EventHandler = (...args: any) => unknown;
 
@@ -18,7 +19,10 @@ const isTextInput = (element?: ReactTestInstance) => {
   // it would trigger the parent prop without the composite component check
   return (
     filterNodeByType(element, TextInput) ||
-    filterNodeByType(element, 'TextInput')
+    filterNodeByType(
+      element,
+      getConfig().hostComponentNames?.textInput || 'TextInput'
+    )
   );
 };
 

From 097465c1f156fa630c6a40d969a2ae03c1862791 Mon Sep 17 00:00:00 2001
From: pierrezimmermann <pierrez@nam.tech>
Date: Wed, 11 Jan 2023 22:44:48 +0100
Subject: [PATCH 35/45] refactor: run autodetection in text, displayvalue and
 placeholder queries rather than in render

---
 src/config.ts                            |  2 +-
 src/helpers/host-component-names.tsx     | 14 ++++++++++----
 src/helpers/matchers/matchTextContent.ts |  3 ++-
 src/queries/displayValue.ts              |  3 ++-
 src/queries/placeholderText.ts           |  3 ++-
 src/render.tsx                           |  3 ---
 6 files changed, 17 insertions(+), 11 deletions(-)

diff --git a/src/config.ts b/src/config.ts
index efcede605..034e18ab6 100644
--- a/src/config.ts
+++ b/src/config.ts
@@ -4,7 +4,7 @@ import { DebugOptions } from './helpers/debugDeep';
  * Global configuration options for React Native Testing Library.
  */
 
-type HostComponentNames = {
+export type HostComponentNames = {
   text: string;
   textInput: string;
 };
diff --git a/src/helpers/host-component-names.tsx b/src/helpers/host-component-names.tsx
index de003dc81..0e706019d 100644
--- a/src/helpers/host-component-names.tsx
+++ b/src/helpers/host-component-names.tsx
@@ -1,15 +1,16 @@
 import React from 'react';
 import { Text, TextInput, View } from 'react-native';
 import TestRenderer from 'react-test-renderer';
-import { configureInternal, getConfig } from '../config';
+import { configureInternal, getConfig, HostComponentNames } from '../config';
 import { getQueriesForElement } from '../within';
 
 const defaultErrorMessage = `There seems to be an issue with your configuration that prevents the library from working correctly.
 Please ensure that you have a version of react native compatible with the library`;
 
-export function detectHostComponentNamesIfNeeded(): void {
-  if (getConfig().hostComponentNames) {
-    return;
+export function detectHostComponentNamesIfNeeded(): HostComponentNames {
+  const configHostComponentNames = getConfig().hostComponentNames;
+  if (configHostComponentNames) {
+    return configHostComponentNames;
   }
 
   try {
@@ -36,6 +37,11 @@ export function detectHostComponentNamesIfNeeded(): void {
         textInput: textInputHostName,
       },
     });
+
+    return {
+      text: textHostName,
+      textInput: textInputHostName,
+    };
   } catch (error) {
     const errorMessage =
       error && typeof error === 'object' && 'message' in error
diff --git a/src/helpers/matchers/matchTextContent.ts b/src/helpers/matchers/matchTextContent.ts
index 516ce72c6..4f4597efb 100644
--- a/src/helpers/matchers/matchTextContent.ts
+++ b/src/helpers/matchers/matchTextContent.ts
@@ -4,6 +4,7 @@ import { getConfig } from '../../config';
 import { matches, TextMatch, TextMatchOptions } from '../../matches';
 import { filterNodeByType } from '../filterNodeByType';
 import { getTextContent } from '../getTextContent';
+import { detectHostComponentNamesIfNeeded } from '../host-component-names';
 
 type MatchTextContentParams = {
   node: ReactTestInstance;
@@ -17,7 +18,7 @@ export function matchTextContent({
   options = {},
 }: MatchTextContentParams) {
   const typeToMatch = getConfig().useBreakingChanges
-    ? getConfig().hostComponentNames?.text || 'Text'
+    ? detectHostComponentNamesIfNeeded().text
     : Text;
   if (!filterNodeByType(node, typeToMatch)) {
     return false;
diff --git a/src/queries/displayValue.ts b/src/queries/displayValue.ts
index 0b653518a..fdac39164 100644
--- a/src/queries/displayValue.ts
+++ b/src/queries/displayValue.ts
@@ -4,6 +4,7 @@ import { filterNodeByType } from '../helpers/filterNodeByType';
 import { findAll } from '../helpers/findAll';
 import { matches, TextMatch, TextMatchOptions } from '../matches';
 import { getConfig } from '../config';
+import { detectHostComponentNamesIfNeeded } from '../helpers/host-component-names';
 import { makeQueries } from './makeQueries';
 import type {
   FindAllByQuery,
@@ -27,7 +28,7 @@ const getTextInputNodeByDisplayValue = (
     node.props.value !== undefined ? node.props.value : node.props.defaultValue;
   const shouldReturnHostTextInput = getConfig().useBreakingChanges;
   const typeToMatch = shouldReturnHostTextInput
-    ? getConfig().hostComponentNames?.textInput || 'TextInput'
+    ? detectHostComponentNamesIfNeeded().textInput
     : TextInput;
 
   return (
diff --git a/src/queries/placeholderText.ts b/src/queries/placeholderText.ts
index 2ebafea29..713cd7dbf 100644
--- a/src/queries/placeholderText.ts
+++ b/src/queries/placeholderText.ts
@@ -4,6 +4,7 @@ import { findAll } from '../helpers/findAll';
 import { matches, TextMatch, TextMatchOptions } from '../matches';
 import { getConfig } from '../config';
 import { filterNodeByType } from '../helpers/filterNodeByType';
+import { detectHostComponentNamesIfNeeded } from '../helpers/host-component-names';
 import { makeQueries } from './makeQueries';
 import type {
   FindAllByQuery,
@@ -25,7 +26,7 @@ const getTextInputNodeByPlaceholderText = (
   const { exact, normalizer } = options;
   const shouldReturnHostTextInput = getConfig().useBreakingChanges;
   const typeToMatch = shouldReturnHostTextInput
-    ? getConfig().hostComponentNames?.textInput || 'TextInput'
+    ? detectHostComponentNamesIfNeeded().textInput
     : TextInput;
 
   return (
diff --git a/src/render.tsx b/src/render.tsx
index 00f1b6bf7..a25828985 100644
--- a/src/render.tsx
+++ b/src/render.tsx
@@ -10,7 +10,6 @@ import { getQueriesForElement } from './within';
 import { setRenderResult, screen } from './screen';
 import { validateStringsRenderedWithinText } from './helpers/stringValidation';
 import { getConfig } from './config';
-import { detectHostComponentNamesIfNeeded } from './helpers/host-component-names';
 
 export type RenderOptions = {
   wrapper?: React.ComponentType<any>;
@@ -43,8 +42,6 @@ export default function render<T>(
     });
   }
 
-  detectHostComponentNamesIfNeeded();
-
   const wrap = (element: React.ReactElement) =>
     Wrapper ? <Wrapper>{element}</Wrapper> : element;
 

From 0568bc0a1658a9fe8edb8d5cf969d917acc8f021 Mon Sep 17 00:00:00 2001
From: pierrezimmermann <pierrez@nam.tech>
Date: Wed, 11 Jan 2023 22:45:55 +0100
Subject: [PATCH 36/45] refactor: remove useless async declaration

---
 src/queries/makeQueries.ts | 2 +-
 1 file changed, 1 insertion(+), 1 deletion(-)

diff --git a/src/queries/makeQueries.ts b/src/queries/makeQueries.ts
index 024a6597e..a309d10fa 100644
--- a/src/queries/makeQueries.ts
+++ b/src/queries/makeQueries.ts
@@ -151,7 +151,7 @@ export function makeQueries<Predicate, Options>(
   }
 
   function findByQuery(instance: ReactTestInstance) {
-    return async function findFn(
+    return function findFn(
       predicate: Predicate,
       queryOptions?: Options & WaitForOptions,
       waitForOptions: WaitForOptions = {}

From 820d164db57171aa08c6c32f14966f36c2a93d3f Mon Sep 17 00:00:00 2001
From: pierrezimmermann <pierrez@nam.tech>
Date: Wed, 11 Jan 2023 22:49:50 +0100
Subject: [PATCH 37/45] refactor: improvements for readability from review

---
 src/__tests__/host-component-names.test.tsx |  8 ++++----
 src/helpers/host-component-names.tsx        | 10 +++-------
 src/helpers/matchers/matchTextContent.ts    |  4 ++--
 src/queries/displayValue.ts                 |  4 ++--
 src/queries/placeholderText.ts              |  4 ++--
 5 files changed, 13 insertions(+), 17 deletions(-)

diff --git a/src/__tests__/host-component-names.test.tsx b/src/__tests__/host-component-names.test.tsx
index 059aa8410..ddb528612 100644
--- a/src/__tests__/host-component-names.test.tsx
+++ b/src/__tests__/host-component-names.test.tsx
@@ -38,11 +38,11 @@ describe('detectHostComponentNamesIfNeeded', () => {
     expect(() => detectHostComponentNamesIfNeeded())
       .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 the library from working correctly.
-      Please ensure that you have a version of react native compatible with the library
+
+      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.
       "
     `);
   });
diff --git a/src/helpers/host-component-names.tsx b/src/helpers/host-component-names.tsx
index 0e706019d..1cb026d8f 100644
--- a/src/helpers/host-component-names.tsx
+++ b/src/helpers/host-component-names.tsx
@@ -4,8 +4,8 @@ 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 the library from working correctly.
-Please ensure that you have a version of react native compatible with the library`;
+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 detectHostComponentNamesIfNeeded(): HostComponentNames {
   const configHostComponentNames = getConfig().hostComponentNames;
@@ -48,11 +48,7 @@ export function detectHostComponentNamesIfNeeded(): HostComponentNames {
         ? error.message
         : null;
 
-    throw new Error(`Trying to detect host component names triggered the following error:
-    
-${errorMessage}
-    
-${defaultErrorMessage}
+    throw new Error(`Trying to detect host component names triggered the following error:\n\n${errorMessage}\n\n${defaultErrorMessage}
 `);
   }
 }
diff --git a/src/helpers/matchers/matchTextContent.ts b/src/helpers/matchers/matchTextContent.ts
index 4f4597efb..a424732d7 100644
--- a/src/helpers/matchers/matchTextContent.ts
+++ b/src/helpers/matchers/matchTextContent.ts
@@ -17,10 +17,10 @@ export function matchTextContent({
   text,
   options = {},
 }: MatchTextContentParams) {
-  const typeToMatch = getConfig().useBreakingChanges
+  const textType = getConfig().useBreakingChanges
     ? detectHostComponentNamesIfNeeded().text
     : Text;
-  if (!filterNodeByType(node, typeToMatch)) {
+  if (!filterNodeByType(node, textType)) {
     return false;
   }
 
diff --git a/src/queries/displayValue.ts b/src/queries/displayValue.ts
index fdac39164..ca2b78714 100644
--- a/src/queries/displayValue.ts
+++ b/src/queries/displayValue.ts
@@ -27,12 +27,12 @@ const getTextInputNodeByDisplayValue = (
   const nodeValue =
     node.props.value !== undefined ? node.props.value : node.props.defaultValue;
   const shouldReturnHostTextInput = getConfig().useBreakingChanges;
-  const typeToMatch = shouldReturnHostTextInput
+  const textInputType = shouldReturnHostTextInput
     ? detectHostComponentNamesIfNeeded().textInput
     : TextInput;
 
   return (
-    filterNodeByType(node, typeToMatch) &&
+    filterNodeByType(node, textInputType) &&
     matches(value, nodeValue, normalizer, exact)
   );
 };
diff --git a/src/queries/placeholderText.ts b/src/queries/placeholderText.ts
index 713cd7dbf..92882b055 100644
--- a/src/queries/placeholderText.ts
+++ b/src/queries/placeholderText.ts
@@ -25,12 +25,12 @@ const getTextInputNodeByPlaceholderText = (
 ) => {
   const { exact, normalizer } = options;
   const shouldReturnHostTextInput = getConfig().useBreakingChanges;
-  const typeToMatch = shouldReturnHostTextInput
+  const textInputType = shouldReturnHostTextInput
     ? detectHostComponentNamesIfNeeded().textInput
     : TextInput;
 
   return (
-    filterNodeByType(node, typeToMatch) &&
+    filterNodeByType(node, textInputType) &&
     matches(placeholder, node.props.placeholder, normalizer, exact)
   );
 };

From ceed10e3d8446430de8b88d31dceb748d881753a Mon Sep 17 00:00:00 2001
From: Maciej Jastrzebski <mdjastrzebski@gmail.com>
Date: Thu, 12 Jan 2023 00:34:08 +0100
Subject: [PATCH 38/45] Update src/__tests__/host-component-names.test.tsx

---
 src/__tests__/host-component-names.test.tsx | 2 +-
 1 file changed, 1 insertion(+), 1 deletion(-)

diff --git a/src/__tests__/host-component-names.test.tsx b/src/__tests__/host-component-names.test.tsx
index ddb528612..2148e0167 100644
--- a/src/__tests__/host-component-names.test.tsx
+++ b/src/__tests__/host-component-names.test.tsx
@@ -30,7 +30,7 @@ describe('detectHostComponentNamesIfNeeded', () => {
     });
   });
 
-  test('throw an error when autodetection throws', () => {
+  test('throw an error when autodetection fails', () => {
     mockCreate.mockReturnValue({
       root: { type: View, children: [], props: {} },
     });

From 6b18bbeea0543ca4815edd6349713fae1ad5bf9f Mon Sep 17 00:00:00 2001
From: pierrezimmermann <pierrez@nam.tech>
Date: Sun, 15 Jan 2023 16:52:29 +0100
Subject: [PATCH 39/45] refactor: declare variable for host component names in
 detection function

---
 src/helpers/host-component-names.tsx | 14 ++++++--------
 1 file changed, 6 insertions(+), 8 deletions(-)

diff --git a/src/helpers/host-component-names.tsx b/src/helpers/host-component-names.tsx
index 1cb026d8f..9e9370d7e 100644
--- a/src/helpers/host-component-names.tsx
+++ b/src/helpers/host-component-names.tsx
@@ -31,17 +31,15 @@ export function detectHostComponentNamesIfNeeded(): HostComponentNames {
       throw new Error(defaultErrorMessage);
     }
 
-    configureInternal({
-      hostComponentNames: {
-        text: textHostName,
-        textInput: textInputHostName,
-      },
-    });
-
-    return {
+    const hostComponentNames = {
       text: textHostName,
       textInput: textInputHostName,
     };
+
+    configureInternal({
+      hostComponentNames,
+    });
+    return hostComponentNames;
   } catch (error) {
     const errorMessage =
       error && typeof error === 'object' && 'message' in error

From a7ae9e10f2cb47c15d9b49204ea9c5aa2489271a Mon Sep 17 00:00:00 2001
From: pierrezimmermann <pierrez@nam.tech>
Date: Sun, 15 Jan 2023 16:53:57 +0100
Subject: [PATCH 40/45] refactor: rename detectHostComponentNamesIfNeeded to
 getHostComponentNames

---
 src/__tests__/host-component-names.test.tsx | 11 +++++------
 src/helpers/host-component-names.tsx        |  2 +-
 src/helpers/matchers/matchTextContent.ts    |  4 ++--
 src/queries/displayValue.ts                 |  4 ++--
 src/queries/placeholderText.ts              |  4 ++--
 5 files changed, 12 insertions(+), 13 deletions(-)

diff --git a/src/__tests__/host-component-names.test.tsx b/src/__tests__/host-component-names.test.tsx
index 2148e0167..98b1cbc6d 100644
--- a/src/__tests__/host-component-names.test.tsx
+++ b/src/__tests__/host-component-names.test.tsx
@@ -1,15 +1,15 @@
 import { View } from 'react-native';
 import TestRenderer from 'react-test-renderer';
 import { configureInternal, getConfig } from '../config';
-import { detectHostComponentNamesIfNeeded } from '../helpers/host-component-names';
+import { getHostComponentNames } from '../helpers/host-component-names';
 
 const mockCreate = jest.spyOn(TestRenderer, 'create') as jest.Mock;
 
-describe('detectHostComponentNamesIfNeeded', () => {
+describe('getHostComponentNames', () => {
   test('updates internal config with host component names when they are not defined', () => {
     expect(getConfig().hostComponentNames).toBeUndefined();
 
-    detectHostComponentNamesIfNeeded();
+    getHostComponentNames();
 
     expect(getConfig().hostComponentNames).toEqual({
       text: 'Text',
@@ -22,7 +22,7 @@ describe('detectHostComponentNamesIfNeeded', () => {
       hostComponentNames: { text: 'banana', textInput: 'banana' },
     });
 
-    detectHostComponentNamesIfNeeded();
+    getHostComponentNames();
 
     expect(getConfig().hostComponentNames).toEqual({
       text: 'banana',
@@ -35,8 +35,7 @@ describe('detectHostComponentNamesIfNeeded', () => {
       root: { type: View, children: [], props: {} },
     });
 
-    expect(() => detectHostComponentNamesIfNeeded())
-      .toThrowErrorMatchingInlineSnapshot(`
+    expect(() => getHostComponentNames()).toThrowErrorMatchingInlineSnapshot(`
       "Trying to detect host component names triggered the following error:
 
       Unable to find an element with testID: text
diff --git a/src/helpers/host-component-names.tsx b/src/helpers/host-component-names.tsx
index 9e9370d7e..b76ec0d08 100644
--- a/src/helpers/host-component-names.tsx
+++ b/src/helpers/host-component-names.tsx
@@ -7,7 +7,7 @@ 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 detectHostComponentNamesIfNeeded(): HostComponentNames {
+export function getHostComponentNames(): HostComponentNames {
   const configHostComponentNames = getConfig().hostComponentNames;
   if (configHostComponentNames) {
     return configHostComponentNames;
diff --git a/src/helpers/matchers/matchTextContent.ts b/src/helpers/matchers/matchTextContent.ts
index a424732d7..cd9986efe 100644
--- a/src/helpers/matchers/matchTextContent.ts
+++ b/src/helpers/matchers/matchTextContent.ts
@@ -4,7 +4,7 @@ import { getConfig } from '../../config';
 import { matches, TextMatch, TextMatchOptions } from '../../matches';
 import { filterNodeByType } from '../filterNodeByType';
 import { getTextContent } from '../getTextContent';
-import { detectHostComponentNamesIfNeeded } from '../host-component-names';
+import { getHostComponentNames } from '../host-component-names';
 
 type MatchTextContentParams = {
   node: ReactTestInstance;
@@ -18,7 +18,7 @@ export function matchTextContent({
   options = {},
 }: MatchTextContentParams) {
   const textType = getConfig().useBreakingChanges
-    ? detectHostComponentNamesIfNeeded().text
+    ? getHostComponentNames().text
     : Text;
   if (!filterNodeByType(node, textType)) {
     return false;
diff --git a/src/queries/displayValue.ts b/src/queries/displayValue.ts
index ca2b78714..334f7d042 100644
--- a/src/queries/displayValue.ts
+++ b/src/queries/displayValue.ts
@@ -4,7 +4,7 @@ import { filterNodeByType } from '../helpers/filterNodeByType';
 import { findAll } from '../helpers/findAll';
 import { matches, TextMatch, TextMatchOptions } from '../matches';
 import { getConfig } from '../config';
-import { detectHostComponentNamesIfNeeded } from '../helpers/host-component-names';
+import { getHostComponentNames } from '../helpers/host-component-names';
 import { makeQueries } from './makeQueries';
 import type {
   FindAllByQuery,
@@ -28,7 +28,7 @@ const getTextInputNodeByDisplayValue = (
     node.props.value !== undefined ? node.props.value : node.props.defaultValue;
   const shouldReturnHostTextInput = getConfig().useBreakingChanges;
   const textInputType = shouldReturnHostTextInput
-    ? detectHostComponentNamesIfNeeded().textInput
+    ? getHostComponentNames().textInput
     : TextInput;
 
   return (
diff --git a/src/queries/placeholderText.ts b/src/queries/placeholderText.ts
index 92882b055..660f9941b 100644
--- a/src/queries/placeholderText.ts
+++ b/src/queries/placeholderText.ts
@@ -4,7 +4,7 @@ import { findAll } from '../helpers/findAll';
 import { matches, TextMatch, TextMatchOptions } from '../matches';
 import { getConfig } from '../config';
 import { filterNodeByType } from '../helpers/filterNodeByType';
-import { detectHostComponentNamesIfNeeded } from '../helpers/host-component-names';
+import { getHostComponentNames } from '../helpers/host-component-names';
 import { makeQueries } from './makeQueries';
 import type {
   FindAllByQuery,
@@ -26,7 +26,7 @@ const getTextInputNodeByPlaceholderText = (
   const { exact, normalizer } = options;
   const shouldReturnHostTextInput = getConfig().useBreakingChanges;
   const textInputType = shouldReturnHostTextInput
-    ? detectHostComponentNamesIfNeeded().textInput
+    ? getHostComponentNames().textInput
     : TextInput;
 
   return (

From b25abebbcfa89b7697ee4f7f5ad23467696a9e30 Mon Sep 17 00:00:00 2001
From: pierrezimmermann <pierrez@nam.tech>
Date: Sun, 15 Jan 2023 17:01:16 +0100
Subject: [PATCH 41/45] feat: use getHostComponentNames in fireEvent for
 textinput host name

---
 src/fireEvent.ts | 7 ++-----
 1 file changed, 2 insertions(+), 5 deletions(-)

diff --git a/src/fireEvent.ts b/src/fireEvent.ts
index 92840fc43..c4e451dc3 100644
--- a/src/fireEvent.ts
+++ b/src/fireEvent.ts
@@ -3,7 +3,7 @@ import { TextInput } from 'react-native';
 import act from './act';
 import { isHostElement } from './helpers/component-tree';
 import { filterNodeByType } from './helpers/filterNodeByType';
-import { getConfig } from './config';
+import { getHostComponentNames } from './helpers/host-component-names';
 
 type EventHandler = (...args: any) => unknown;
 
@@ -19,10 +19,7 @@ const isTextInput = (element?: ReactTestInstance) => {
   // it would trigger the parent prop without the composite component check
   return (
     filterNodeByType(element, TextInput) ||
-    filterNodeByType(
-      element,
-      getConfig().hostComponentNames?.textInput || 'TextInput'
-    )
+    filterNodeByType(element, getHostComponentNames().textInput)
   );
 };
 

From 80788c2558ab7c99a4889b639375d61ccabd3e35 Mon Sep 17 00:00:00 2001
From: pierrezimmermann <pierrez@nam.tech>
Date: Sun, 15 Jan 2023 17:03:34 +0100
Subject: [PATCH 42/45] refactor: revert refactor on matchTextContent

---
 src/helpers/matchers/matchTextContent.ts | 16 +++++-----------
 src/queries/text.ts                      | 19 +++++--------------
 2 files changed, 10 insertions(+), 25 deletions(-)

diff --git a/src/helpers/matchers/matchTextContent.ts b/src/helpers/matchers/matchTextContent.ts
index cd9986efe..cf7770e27 100644
--- a/src/helpers/matchers/matchTextContent.ts
+++ b/src/helpers/matchers/matchTextContent.ts
@@ -6,17 +6,11 @@ import { filterNodeByType } from '../filterNodeByType';
 import { getTextContent } from '../getTextContent';
 import { getHostComponentNames } from '../host-component-names';
 
-type MatchTextContentParams = {
-  node: ReactTestInstance;
-  text: TextMatch;
-  options?: TextMatchOptions;
-};
-
-export function matchTextContent({
-  node,
-  text,
-  options = {},
-}: MatchTextContentParams) {
+export function matchTextContent(
+  node: ReactTestInstance,
+  text: TextMatch,
+  options: TextMatchOptions = {}
+) {
   const textType = getConfig().useBreakingChanges
     ? getHostComponentNames().text
     : Text;
diff --git a/src/queries/text.ts b/src/queries/text.ts
index 26bef8ccf..ef34333a9 100644
--- a/src/queries/text.ts
+++ b/src/queries/text.ts
@@ -39,7 +39,7 @@ const queryAllByText = (
 
       const results = findAll(
         baseInstance,
-        (node) => matchTextContent({ node, text, options }),
+        (node) => matchTextContent(node, text, options),
         { ...options, matchDeepestOnly: true }
       );
 
@@ -47,19 +47,10 @@ const queryAllByText = (
     }
 
     // vNext version: returns host Text
-    return findAll(
-      instance,
-      (node) =>
-        matchTextContent({
-          node,
-          text,
-          options,
-        }),
-      {
-        ...options,
-        matchDeepestOnly: true,
-      }
-    );
+    return findAll(instance, (node) => matchTextContent(node, text, options), {
+      ...options,
+      matchDeepestOnly: true,
+    });
   };
 
 const getMultipleError = (text: TextMatch) =>

From def1cc49379f9b7db49007dd7b87472bb8974a1a Mon Sep 17 00:00:00 2001
From: pierrezimmermann <pierrez@nam.tech>
Date: Sun, 15 Jan 2023 17:08:07 +0100
Subject: [PATCH 43/45] refactor: add comment to indicate impossible path

---
 src/helpers/host-component-names.tsx | 1 +
 1 file changed, 1 insertion(+)

diff --git a/src/helpers/host-component-names.tsx b/src/helpers/host-component-names.tsx
index b76ec0d08..e5da3bbf3 100644
--- a/src/helpers/host-component-names.tsx
+++ b/src/helpers/host-component-names.tsx
@@ -24,6 +24,7 @@ export function getHostComponentNames(): HostComponentNames {
     const textHostName = getByTestId('text').type;
     const textInputHostName = getByTestId('textInput').type;
 
+    // this code path should not happen as getByTestId should always return a host element
     if (
       typeof textHostName !== 'string' ||
       typeof textInputHostName !== 'string'

From 7557fa3ac0ffa9f7c6fe8308dc48751e79ee2baf Mon Sep 17 00:00:00 2001
From: =?UTF-8?q?Maciej=20Jastrze=CC=A8bski?= <mdjastrzebski@gmail.com>
Date: Sun, 15 Jan 2023 22:01:18 +0000
Subject: [PATCH 44/45] chore: simplify jest-setup files

---
 jestSetupFileAfterEnv.ts => jest-setup.ts | 2 ++
 jestSetup.js                              | 1 -
 package.json                              | 5 +----
 3 files changed, 3 insertions(+), 5 deletions(-)
 rename jestSetupFileAfterEnv.ts => jest-setup.ts (57%)
 delete mode 100644 jestSetup.js

diff --git a/jestSetupFileAfterEnv.ts b/jest-setup.ts
similarity index 57%
rename from jestSetupFileAfterEnv.ts
rename to jest-setup.ts
index f120a77e7..5d2c4d5b2 100644
--- a/jestSetupFileAfterEnv.ts
+++ b/jest-setup.ts
@@ -1,5 +1,7 @@
 import { resetToDefaults } from './src/pure';
 
+jest.mock('react-native/Libraries/Animated/NativeAnimatedHelper');
+
 beforeEach(() => {
   resetToDefaults();
 });
diff --git a/jestSetup.js b/jestSetup.js
deleted file mode 100644
index 7060fd312..000000000
--- a/jestSetup.js
+++ /dev/null
@@ -1 +0,0 @@
-jest.mock('react-native/Libraries/Animated/NativeAnimatedHelper');
diff --git a/package.json b/package.json
index 4a71452f6..9112914d4 100644
--- a/package.json
+++ b/package.json
@@ -87,10 +87,7 @@
   },
   "jest": {
     "preset": "./jest-preset",
-    "setupFiles": [
-      "./jestSetup.js"
-    ],
-    "setupFilesAfterEnv": ["./jestSetupFileAfterEnv.ts"],
+    "setupFilesAfterEnv": ["./jest-setup.ts"],
     "testPathIgnorePatterns": [
       "timerUtils",
       "examples/"

From 880b7e821ae4312e48fd9f8e3a891dea138f7e6f Mon Sep 17 00:00:00 2001
From: =?UTF-8?q?Maciej=20Jastrze=CC=A8bski?= <mdjastrzebski@gmail.com>
Date: Sun, 15 Jan 2023 22:05:53 +0000
Subject: [PATCH 45/45] refactor: code review changes

---
 src/config.ts                        | 12 ++++++------
 src/helpers/host-component-names.tsx |  7 ++-----
 2 files changed, 8 insertions(+), 11 deletions(-)

diff --git a/src/config.ts b/src/config.ts
index 034e18ab6..732206e38 100644
--- a/src/config.ts
+++ b/src/config.ts
@@ -4,11 +4,6 @@ import { DebugOptions } from './helpers/debugDeep';
  * Global configuration options for React Native Testing Library.
  */
 
-export type HostComponentNames = {
-  text: string;
-  textInput: string;
-};
-
 export type Config = {
   /** Default timeout, in ms, for `waitFor` and `findBy*` queries. */
   asyncUtilTimeout: number;
@@ -25,11 +20,16 @@ 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;
 
-  /** Host component names used for queries */
+  /** Names for key React Native host components. */
   hostComponentNames?: HostComponentNames;
 };
 
diff --git a/src/helpers/host-component-names.tsx b/src/helpers/host-component-names.tsx
index e5da3bbf3..d4611702f 100644
--- a/src/helpers/host-component-names.tsx
+++ b/src/helpers/host-component-names.tsx
@@ -24,7 +24,7 @@ export function getHostComponentNames(): HostComponentNames {
     const textHostName = getByTestId('text').type;
     const textInputHostName = getByTestId('textInput').type;
 
-    // this code path should not happen as getByTestId should always return a host element
+    // This code path should not happen as getByTestId always returns host elements.
     if (
       typeof textHostName !== 'string' ||
       typeof textInputHostName !== 'string'
@@ -36,10 +36,7 @@ export function getHostComponentNames(): HostComponentNames {
       text: textHostName,
       textInput: textInputHostName,
     };
-
-    configureInternal({
-      hostComponentNames,
-    });
+    configureInternal({ hostComponentNames });
     return hostComponentNames;
   } catch (error) {
     const errorMessage =