refactor(v13): remove detect host component names (#1697)

Author: mdjastrzebski

src/__tests__/config.test.ts

@@ -1,4 +1,4 @@
-import { getConfig, configure, resetToDefaults, configureInternal } from '../config';
+import { getConfig, configure, resetToDefaults } from '../config';
 
 beforeEach(() => {
   resetToDefaults();
@@ -34,27 +34,11 @@ test('resetToDefaults() resets config to defaults', () => {
 });
 
 test('resetToDefaults() resets internal config to defaults', () => {
-  configureInternal({
-    hostComponentNames: {
-      text: 'A',
-      textInput: 'A',
-      image: 'A',
-      switch: 'A',
-      scrollView: 'A',
-      modal: 'A',
-    },
-  });
-  expect(getConfig().hostComponentNames).toEqual({
-    text: 'A',
-    textInput: 'A',
-    image: 'A',
-    switch: 'A',
-    scrollView: 'A',
-    modal: 'A',
-  });
+  configure({ asyncUtilTimeout: 2000 });
+  expect(getConfig().asyncUtilTimeout).toBe(2000);
 
   resetToDefaults();
-  expect(getConfig().hostComponentNames).toBe(undefined);
+  expect(getConfig().asyncUtilTimeout).toBe(1000);
 });
 
 test('configure handles alias option defaultHidden', () => {

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

@@ -1,123 +1,48 @@
 import * as React from 'react';
-import { View } from 'react-native';
-import TestRenderer from 'react-test-renderer';
-import { configureInternal, getConfig } from '../config';
+import { Image, Modal, ScrollView, Switch, Text, TextInput } from 'react-native';
 import {
-  getHostComponentNames,
-  configureHostComponentNamesIfNeeded,
+  isHostImage,
+  isHostModal,
+  isHostScrollView,
+  isHostSwitch,
+  isHostText,
+  isHostTextInput,
 } from '../helpers/host-component-names';
-import { act, render } from '..';
+import { render, screen } from '..';
 
-describe('getHostComponentNames', () => {
-  test('returns host component names from internal config', () => {
-    configureInternal({
-      hostComponentNames: {
-        text: 'banana',
-        textInput: 'banana',
-        image: 'banana',
-        switch: 'banana',
-        scrollView: 'banana',
-        modal: 'banana',
-      },
-    });
-
-    expect(getHostComponentNames()).toEqual({
-      text: 'banana',
-      textInput: 'banana',
-      image: 'banana',
-      switch: 'banana',
-      scrollView: 'banana',
-      modal: 'banana',
-    });
-  });
-
-  test('detects host component names if not present in internal config', () => {
-    expect(getConfig().hostComponentNames).toBeUndefined();
-
-    const hostComponentNames = getHostComponentNames();
-
-    expect(hostComponentNames).toEqual({
-      text: 'Text',
-      textInput: 'TextInput',
-      image: 'Image',
-      switch: 'RCTSwitch',
-      scrollView: 'RCTScrollView',
-      modal: 'Modal',
-    });
-    expect(getConfig().hostComponentNames).toBe(hostComponentNames);
-  });
-
-  // Repro test for case when user indirectly triggers `getHostComponentNames` calls from
-  // explicit `act` wrapper.
-  // See: https://github.com/callstack/react-native-testing-library/issues/1302
-  // and https://github.com/callstack/react-native-testing-library/issues/1305
-  test('does not throw when wrapped in act after render has been called', () => {
-    render(<View />);
-    expect(() =>
-      act(() => {
-        getHostComponentNames();
-      }),
-    ).not.toThrow();
-  });
+test('detects host Text component', () => {
+  render(<Text>Hello</Text>);
+  expect(isHostText(screen.root)).toBe(true);
 });
 
-describe('configureHostComponentNamesIfNeeded', () => {
-  test('updates internal config with host component names when they are not defined', () => {
-    expect(getConfig().hostComponentNames).toBeUndefined();
-
-    configureHostComponentNamesIfNeeded();
-
-    expect(getConfig().hostComponentNames).toEqual({
-      text: 'Text',
-      textInput: 'TextInput',
-      image: 'Image',
-      switch: 'RCTSwitch',
-      scrollView: 'RCTScrollView',
-      modal: 'Modal',
-    });
-  });
-
-  test('does not update internal config when host component names are already configured', () => {
-    configureInternal({
-      hostComponentNames: {
-        text: 'banana',
-        textInput: 'banana',
-        image: 'banana',
-        switch: 'banana',
-        scrollView: 'banana',
-        modal: 'banana',
-      },
-    });
-
-    configureHostComponentNamesIfNeeded();
-
-    expect(getConfig().hostComponentNames).toEqual({
-      text: 'banana',
-      textInput: 'banana',
-      image: 'banana',
-      switch: 'banana',
-      scrollView: 'banana',
-      modal: 'banana',
-    });
-  });
-
-  test('throw an error when auto-detection fails', () => {
-    const mockCreate = jest.spyOn(TestRenderer, 'create') as jest.Mock;
-    const renderer = TestRenderer.create(<View />);
+// Some users might use the raw RCTText component directly for performance reasons.
+// See: https://blog.theodo.com/2023/10/native-views-rn-performance/
+test('detects raw RCTText component', () => {
+  render(React.createElement('RCTText', { testID: 'text' }, 'Hello'));
+  expect(isHostText(screen.root)).toBe(true);
+});
 
-    mockCreate.mockReturnValue({
-      root: renderer.root,
-    });
+test('detects host TextInput component', () => {
+  render(<TextInput />);
+  expect(isHostTextInput(screen.root)).toBe(true);
+});
 
-    expect(() => configureHostComponentNamesIfNeeded()).toThrowErrorMatchingInlineSnapshot(`
-      "Trying to detect host component names triggered the following error:
+test('detects host Image component', () => {
+  render(<Image />);
+  expect(isHostImage(screen.root)).toBe(true);
+});
 
-      Unable to find an element with testID: text
+test('detects host Switch component', () => {
+  render(<Switch />);
+  expect(isHostSwitch(screen.root)).toBe(true);
+});
 
-      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."
-    `);
+test('detects host ScrollView component', () => {
+  render(<ScrollView />);
+  expect(isHostScrollView(screen.root)).toBe(true);
+});
 
-    mockCreate.mockReset();
-  });
+test('detects host Modal component', () => {
+  render(<Modal />);
+  expect(isHostModal(screen.root)).toBe(true);
 });

src/__tests__/render.test.tsx

@@ -1,7 +1,6 @@
 /* eslint-disable no-console */
 import * as React from 'react';
 import { Pressable, Text, TextInput, View } from 'react-native';
-import { getConfig, resetToDefaults } from '../config';
 import { fireEvent, render, RenderAPI, screen } from '..';
 
 const PLACEHOLDER_FRESHNESS = 'Add custom freshness';
@@ -234,17 +233,9 @@ test('returned output can be spread using rest operator', () => {
   expect(rest).toBeTruthy();
 });
 
-test('render calls detects host component names', () => {
-  resetToDefaults();
-  expect(getConfig().hostComponentNames).toBeUndefined();
-
-  render(<View testID="test" />);
-  expect(getConfig().hostComponentNames).not.toBeUndefined();
-});
-
 test('supports legacy rendering', () => {
   render(<View testID="test" />, { concurrentRoot: false });
-  expect(screen.root).toBeDefined();
+  expect(screen.root).toBeOnTheScreen();
 });
 
 test('supports concurrent rendering', () => {

src/config.ts

@@ -26,21 +26,7 @@ export type ConfigAliasOptions = {
   defaultHidden: boolean;
 };
 
-export type HostComponentNames = {
-  text: string;
-  textInput: string;
-  image: string;
-  switch: string;
-  scrollView: string;
-  modal: string;
-};
-
-export type InternalConfig = Config & {
-  /** Names for key React Native host components. */
-  hostComponentNames?: HostComponentNames;
-};
-
-const defaultConfig: InternalConfig = {
+const defaultConfig: Config = {
   asyncUtilTimeout: 1000,
   defaultIncludeHiddenElements: false,
   concurrentRoot: true,
@@ -66,13 +52,6 @@ export function configure(options: Partial<Config & ConfigAliasOptions>) {
   };
 }
 
-export function configureInternal(option: Partial<InternalConfig>) {
-  config = {
-    ...config,
-    ...option,
-  };
-}
-
 export function resetToDefaults() {
   config = { ...defaultConfig };
 }

src/fire-event.ts

@@ -52,7 +52,7 @@ export function isEventEnabled(
   eventName: string,
   nearestTouchResponder?: ReactTestInstance,
 ) {
-  if (isHostTextInput(nearestTouchResponder)) {
+  if (nearestTouchResponder != null && isHostTextInput(nearestTouchResponder)) {
     return (
       isTextInputEditable(nearestTouchResponder) ||
       textInputEventsIgnoringEditableProp.has(eventName)

src/helpers/accessibility.ts

@@ -7,13 +7,7 @@ import {
 } from 'react-native';
 import { ReactTestInstance } from 'react-test-renderer';
 import { getHostSiblings, getUnsafeRootElement } from './component-tree';
-import {
-  getHostComponentNames,
-  isHostImage,
-  isHostSwitch,
-  isHostText,
-  isHostTextInput,
-} from './host-component-names';
+import { isHostImage, isHostSwitch, isHostText, isHostTextInput } from './host-component-names';
 import { getTextContent } from './text-content';
 import { isTextInputEditable } from './text-input';
 
@@ -112,12 +106,7 @@ export function isAccessibilityElement(element: ReactTestInstance | null): boole
     return element.props.accessible;
   }
 
-  const hostComponentNames = getHostComponentNames();
-  return (
-    element?.type === hostComponentNames?.text ||
-    element?.type === hostComponentNames?.textInput ||
-    element?.type === hostComponentNames?.switch
-  );
+  return isHostText(element) || isHostTextInput(element) || isHostSwitch(element);
 }
 
 /**

src/helpers/host-component-names.ts

@@ -0,0 +1,57 @@
+import { ReactTestInstance } from 'react-test-renderer';
+import { HostTestInstance } from './component-tree';
+
+const HOST_TEXT_NAMES = ['Text', 'RCTText'];
+const HOST_TEXT_INPUT_NAMES = ['TextInput'];
+const HOST_IMAGE_NAMES = ['Image'];
+const HOST_SWITCH_NAMES = ['RCTSwitch'];
+const HOST_SCROLL_VIEW_NAMES = ['RCTScrollView'];
+const HOST_MODAL_NAMES = ['Modal'];
+
+/**
+ * Checks if the given element is a host Text element.
+ * @param element The element to check.
+ */
+export function isHostText(element: ReactTestInstance): element is HostTestInstance {
+  return typeof element?.type === 'string' && HOST_TEXT_NAMES.includes(element.type);
+}
+
+/**
+ * Checks if the given element is a host TextInput element.
+ * @param element The element to check.
+ */
+export function isHostTextInput(element: ReactTestInstance): element is HostTestInstance {
+  return typeof element?.type === 'string' && HOST_TEXT_INPUT_NAMES.includes(element.type);
+}
+
+/**
+ * Checks if the given element is a host Image element.
+ * @param element The element to check.
+ */
+export function isHostImage(element: ReactTestInstance): element is HostTestInstance {
+  return typeof element?.type === 'string' && HOST_IMAGE_NAMES.includes(element.type);
+}
+
+/**
+ * Checks if the given element is a host Switch element.
+ * @param element The element to check.
+ */
+export function isHostSwitch(element: ReactTestInstance): element is HostTestInstance {
+  return typeof element?.type === 'string' && HOST_SWITCH_NAMES.includes(element.type);
+}
+
+/**
+ * Checks if the given element is a host ScrollView element.
+ * @param element The element to check.
+ */
+export function isHostScrollView(element: ReactTestInstance): element is HostTestInstance {
+  return typeof element?.type === 'string' && HOST_SCROLL_VIEW_NAMES.includes(element.type);
+}
+
+/**
+ * Checks if the given element is a host Modal element.
+ * @param element The element to check.
+ */
+export function isHostModal(element: ReactTestInstance): element is HostTestInstance {
+  return typeof element?.type === 'string' && HOST_MODAL_NAMES.includes(element.type);
+}