feat(breaking): Return host component for all queries (#1234)

* BREAKING CHANGE : make placeholdertext queries return host elements

* BREAKING CHANGE : make displayValue queries return host elements

* BREAKING CHANGE: make text queries return host elements

* refactor: reset config to default before each test

* feat: use component names from config and add api to configure them

* feat: remove legacy option from queries

* refactor: reorganize legacy and breaking tests for queries

* feat: change error messages for mismatching host component names

* fix: do not update screen when running auto detection

* fix: typo in comment

* refactor: use an object for matchTextContent params

* tests: rewrite some tests to match repo patterns

* fix: use legacy queries by default to prevent breaking changes

* fix: remove wrong uppercase in flow typings

* docs: remove section on useLegacy queries as it wont be a public api

* docs: small improvements based on review

* fix: remove typo in error message

* refactor: rename getReactNativeHostComponentNames to detectHostComponentNames

* refactor: use useBreakingChange from internal config instead of useLegacyQueries

* fix: use fake timers in test so it doesnt take too much time

* refactor: replace type assertions by real type checking

* fix: revert change due to rebase

* fix: improvements after review

* refactor: define type to match inside matchTextContent function

* refactor: rename function to get error message

* feat: display error when auto detect of host component names throw

* fix: remove unused ts-expect-error after ts version bump

* refactor: run auto detection on render if it hasnt been run yet

* refactor: reuse type imports that had been converted to regular ones

* refactor: add comments to distinguish breaking and legacy

* refactor: move config logic into detectComponentHostNames function

* refactor: rename function to detectComponentHostNamesIfNeeded

* tests: add test on detectHostComponentNamesIfNeeded

* fix: use host component name from config for textinput in fireEvent

* refactor: run autodetection in text, displayvalue and placeholder queries rather than in render

* refactor: remove useless async declaration

* refactor: improvements for readability from review

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

* refactor: declare variable for host component names in detection function

* refactor: rename detectHostComponentNamesIfNeeded to getHostComponentNames

* feat: use getHostComponentNames in fireEvent for textinput host name

* refactor: revert refactor on matchTextContent

* refactor: add comment to indicate impossible path

* chore: simplify jest-setup files

* refactor: code review changes

Co-authored-by: pierrezimmermann <pierrez@nam.tech>
Co-authored-by: Maciej Jastrzebski <mdjastrzebski@gmail.com>

Author: 3 people

jest-setup.ts

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

jestSetup.js

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

package.json

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

src/__tests__/config.test.ts

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

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

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

src/__tests__/render-debug.test.tsx

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

src/__tests__/render.test.tsx

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

src/__tests__/waitFor.test.tsx

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

src/config.ts

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