refactor: migrate to universal-text-renderer

Author: mdjastrzebski

package.json

@@ -54,7 +54,8 @@
   "peerDependencies": {
     "jest": ">=28.0.0",
     "react": ">=18.0.0",
-    "react-native": ">=0.59"
+    "react-native": ">=0.59",
+    "universal-test-renderer": "0.1.2"
   },
   "peerDependenciesMeta": {
     "jest": {
@@ -87,7 +88,8 @@
     "react-native": "0.76.0-rc.6",
     "release-it": "^17.6.0",
     "strip-ansi": "^6.0.1",
-    "typescript": "^5.5.4"
+    "typescript": "^5.5.4",
+    "universal-test-renderer": "0.1.2"
   },
   "publishConfig": {
     "registry": "https://registry.npmjs.org"

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

@@ -6,7 +6,6 @@ import {
   configureHostComponentNamesIfNeeded,
 } from '../helpers/host-component-names';
 import { act, render } from '..';
-import * as rendererModule from '../renderer/renderer';
 
 describe('getHostComponentNames', () => {
   test('returns host component names from internal config', () => {
@@ -100,26 +99,4 @@ describe('configureHostComponentNamesIfNeeded', () => {
       modal: 'banana',
     });
   });
-
-  test('throw an error when auto-detection fails', () => {
-    const renderer = rendererModule.createRenderer();
-    renderer.render(<View />);
-
-    const mockCreateRenderer = jest
-      .spyOn(rendererModule, 'createRenderer')
-      .mockReturnValue(renderer);
-    // @ts-expect-error
-    jest.spyOn(renderer, 'render').mockReturnValue(renderer.root);
-
-    expect(() => configureHostComponentNamesIfNeeded()).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."
-    `);
-
-    mockCreateRenderer.mockReset();
-  });
 });

src/__tests__/render-hook.test.tsx

@@ -1,6 +1,5 @@
 /* eslint-disable jest/no-conditional-expect */
 import React, { ReactNode } from 'react';
-import * as rendererModule from '../renderer/renderer';
 import { renderHook } from '../pure';
 
 test('gives committed result', () => {
@@ -86,22 +85,3 @@ test('props type is inferred correctly when initial props is explicitly undefine
 
   expect(result.current).toBe(6);
 });
-
-/**
- * This test makes sure that calling renderHook does
- * not try to detect host component names in any form.
- * But since there are numerous methods that could trigger that
- * we check the count of renders using React Test Renderers.
- */
-test('does render only once', () => {
-  const renderer = rendererModule.createRenderer();
-  const renderSpy = jest.spyOn(renderer, 'render');
-  jest.spyOn(rendererModule, 'createRenderer').mockReturnValue(renderer);
-
-  renderHook(() => {
-    const [state, setState] = React.useState(1);
-    return [state, setState];
-  });
-
-  expect(renderSpy).toHaveBeenCalledTimes(1);
-});

src/__tests__/render.test.tsx

@@ -1,8 +1,8 @@
 /* eslint-disable no-console */
 import * as React from 'react';
 import { Pressable, Text, TextInput, View } from 'react-native';
+import { CONTAINER_TYPE } from 'universal-test-renderer';
 import { getConfig } from '../config';
-import { CONTAINER_TYPE } from '../renderer/contants';
 import { fireEvent, render, type RenderAPI, screen, resetToDefaults } from '..';
 
 const PLACEHOLDER_FRESHNESS = 'Add custom freshness';

src/fire-event.ts

@@ -5,19 +5,19 @@ import {
   PressableProps,
   ScrollViewProps,
 } from 'react-native';
+import { HostComponent } from 'universal-test-renderer';
 import act from './act';
 import { isValidElement } from './helpers/component-tree';
 import { isHostScrollView, isHostTextInput } from './helpers/host-component-names';
 import { isPointerEventEnabled } from './helpers/pointer-events';
 import { isTextInputEditable } from './helpers/text-input';
 import { Point, StringWithAutocomplete } from './types';
 import { nativeState } from './native-state';
-import { HostElement } from './renderer/host-element';
 import { EventBuilder } from './user-event/event-builder';
 
 type EventHandler = (...args: unknown[]) => unknown;
 
-export function isTouchResponder(element: HostElement) {
+export function isTouchResponder(element: HostComponent) {
   if (!isValidElement(element)) {
     return false;
   }
@@ -57,9 +57,9 @@ const textInputEventsIgnoringEditableProp = new Set([
 ]);
 
 export function isEventEnabled(
-  element: HostElement,
+  element: HostComponent,
   eventName: string,
-  nearestTouchResponder?: HostElement,
+  nearestTouchResponder?: HostComponent,
 ) {
   if (isHostTextInput(nearestTouchResponder)) {
     return (
@@ -82,9 +82,9 @@ export function isEventEnabled(
 }
 
 function findEventHandler(
-  element: HostElement,
+  element: HostComponent,
   eventName: string,
-  nearestTouchResponder?: HostElement,
+  nearestTouchResponder?: HostComponent,
 ): EventHandler | null {
   const touchResponder = isTouchResponder(element) ? element : nearestTouchResponder;
 
@@ -101,7 +101,7 @@ function findEventHandler(
   return findEventHandler(element.parent, eventName, touchResponder);
 }
 
-function getEventHandler(element: HostElement, eventName: string) {
+function getEventHandler(element: HostComponent, eventName: string) {
   const eventHandlerName = getEventHandlerName(eventName);
   if (typeof element.props[eventHandlerName] === 'function') {
     return element.props[eventHandlerName];
@@ -131,7 +131,7 @@ type EventName = StringWithAutocomplete<
   | EventNameExtractor<ScrollViewProps>
 >;
 
-function fireEvent(element: HostElement, eventName: EventName, ...data: unknown[]) {
+function fireEvent(element: HostComponent, eventName: EventName, ...data: unknown[]) {
   setNativeStateIfNeeded(element, eventName, data[0]);
 
   const handler = findEventHandler(element, eventName);
@@ -147,7 +147,7 @@ function fireEvent(element: HostElement, eventName: EventName, ...data: unknown[
   return returnValue;
 }
 
-fireEvent.press = (element: HostElement, ...data: unknown[]) => {
+fireEvent.press = (element: HostComponent, ...data: unknown[]) => {
   const nativeData =
     data.length === 1 &&
     typeof data[0] === 'object' &&
@@ -178,10 +178,10 @@ fireEvent.press = (element: HostElement, ...data: unknown[]) => {
   fireEvent(element, 'responderRelease', responderReleaseEvent);
 };
 
-fireEvent.changeText = (element: HostElement, ...data: unknown[]) =>
+fireEvent.changeText = (element: HostComponent, ...data: unknown[]) =>
   fireEvent(element, 'changeText', ...data);
 
-fireEvent.scroll = (element: HostElement, ...data: unknown[]) =>
+fireEvent.scroll = (element: HostComponent, ...data: unknown[]) =>
   fireEvent(element, 'scroll', ...data);
 
 export default fireEvent;
@@ -194,7 +194,7 @@ const scrollEventNames = new Set([
   'momentumScrollEnd',
 ]);
 
-function setNativeStateIfNeeded(element: HostElement, eventName: string, value: unknown) {
+function setNativeStateIfNeeded(element: HostComponent, eventName: string, value: unknown) {
   if (
     eventName === 'changeText' &&
     typeof value === 'string' &&

src/helpers/accessibility.ts

@@ -5,7 +5,7 @@ import {
   Role,
   StyleSheet,
 } from 'react-native';
-import { HostElement } from '../renderer/host-element';
+import { HostComponent } from 'universal-test-renderer';
 import { getHostSiblings, getRootElement } from './component-tree';
 import {
   getHostComponentNames,
@@ -19,7 +19,7 @@ import { isTextInputEditable } from './text-input';
 import { findAllByProps } from './find-all';
 
 type IsInaccessibleOptions = {
-  cache?: WeakMap<HostElement, boolean>;
+  cache?: WeakMap<HostComponent, boolean>;
 };
 
 export const accessibilityStateKeys: (keyof AccessibilityState)[] = [
@@ -33,14 +33,14 @@ export const accessibilityStateKeys: (keyof AccessibilityState)[] = [
 export const accessibilityValueKeys: (keyof AccessibilityValue)[] = ['min', 'max', 'now', 'text'];
 
 export function isHiddenFromAccessibility(
-  element: HostElement | null,
+  element: HostComponent | null,
   { cache }: IsInaccessibleOptions = {},
 ): boolean {
   if (element == null) {
     return true;
   }
 
-  let current: HostElement | null = element;
+  let current: HostComponent | null = element;
   while (current) {
     let isCurrentSubtreeInaccessible = cache?.get(current);
 
@@ -62,7 +62,7 @@ export function isHiddenFromAccessibility(
 /** RTL-compatibility alias for `isHiddenFromAccessibility` */
 export const isInaccessible = isHiddenFromAccessibility;
 
-function isSubtreeInaccessible(element: HostElement): boolean {
+function isSubtreeInaccessible(element: HostComponent): boolean {
   // Null props can happen for React.Fragments
   if (element.props == null) {
     return false;
@@ -99,7 +99,7 @@ function isSubtreeInaccessible(element: HostElement): boolean {
   return false;
 }
 
-export function isAccessibilityElement(element: HostElement | null): boolean {
+export function isAccessibilityElement(element: HostComponent | null): boolean {
   if (element == null) {
     return false;
   }
@@ -134,7 +134,7 @@ export function isAccessibilityElement(element: HostElement | null): boolean {
  * @param element
  * @returns
  */
-export function getRole(element: HostElement): Role | AccessibilityRole {
+export function getRole(element: HostComponent): Role | AccessibilityRole {
   const explicitRole = element.props.role ?? element.props.accessibilityRole;
   if (explicitRole) {
     return normalizeRole(explicitRole);
@@ -165,11 +165,11 @@ export function normalizeRole(role: string): Role | AccessibilityRole {
   return role as Role | AccessibilityRole;
 }
 
-export function computeAriaModal(element: HostElement): boolean | undefined {
+export function computeAriaModal(element: HostComponent): boolean | undefined {
   return element.props['aria-modal'] ?? element.props.accessibilityViewIsModal;
 }
 
-export function computeAriaLabel(element: HostElement): string | undefined {
+export function computeAriaLabel(element: HostComponent): string | undefined {
   const explicitLabel = element.props['aria-label'] ?? element.props.accessibilityLabel;
   if (explicitLabel) {
     return explicitLabel;
@@ -183,17 +183,17 @@ export function computeAriaLabel(element: HostElement): string | undefined {
   return undefined;
 }
 
-export function computeAriaLabelledBy(element: HostElement): string | undefined {
+export function computeAriaLabelledBy(element: HostComponent): string | undefined {
   return element.props['aria-labelledby'] ?? element.props.accessibilityLabelledBy;
 }
 
 // See: https://github.com/callstack/react-native-testing-library/wiki/Accessibility:-State#busy-state
-export function computeAriaBusy({ props }: HostElement): boolean {
+export function computeAriaBusy({ props }: HostComponent): boolean {
   return props['aria-busy'] ?? props.accessibilityState?.busy ?? false;
 }
 
 // See: https://github.com/callstack/react-native-testing-library/wiki/Accessibility:-State#checked-state
-export function computeAriaChecked(element: HostElement): AccessibilityState['checked'] {
+export function computeAriaChecked(element: HostComponent): AccessibilityState['checked'] {
   const { props } = element;
 
   if (isHostSwitch(element)) {
@@ -209,7 +209,7 @@ export function computeAriaChecked(element: HostElement): AccessibilityState['ch
 }
 
 // See: https://github.com/callstack/react-native-testing-library/wiki/Accessibility:-State#disabled-state
-export function computeAriaDisabled(element: HostElement): boolean {
+export function computeAriaDisabled(element: HostComponent): boolean {
   if (isHostTextInput(element) && !isTextInputEditable(element)) {
     return true;
   }
@@ -219,16 +219,16 @@ export function computeAriaDisabled(element: HostElement): boolean {
 }
 
 // See: https://github.com/callstack/react-native-testing-library/wiki/Accessibility:-State#expanded-state
-export function computeAriaExpanded({ props }: HostElement): boolean | undefined {
+export function computeAriaExpanded({ props }: HostComponent): boolean | undefined {
   return props['aria-expanded'] ?? props.accessibilityState?.expanded;
 }
 
 // See: https://github.com/callstack/react-native-testing-library/wiki/Accessibility:-State#selected-state
-export function computeAriaSelected({ props }: HostElement): boolean {
+export function computeAriaSelected({ props }: HostComponent): boolean {
   return props['aria-selected'] ?? props.accessibilityState?.selected ?? false;
 }
 
-export function computeAriaValue(element: HostElement): AccessibilityValue {
+export function computeAriaValue(element: HostComponent): AccessibilityValue {
   const {
     accessibilityValue,
     'aria-valuemax': ariaValueMax,
@@ -245,7 +245,7 @@ export function computeAriaValue(element: HostElement): AccessibilityValue {
   };
 }
 
-export function computeAccessibleName(element: HostElement): string | undefined {
+export function computeAccessibleName(element: HostComponent): string | undefined {
   const label = computeAriaLabel(element);
   if (label) {
     return label;

src/helpers/component-tree.ts

@@ -1,11 +1,10 @@
-import { CONTAINER_TYPE } from '../renderer/contants';
-import { HostElement } from '../renderer/host-element';
+import { CONTAINER_TYPE, HostComponent } from 'universal-test-renderer';
 
 /**
  * Checks if the given element is a host element.
  * @param element The element to check.
  */
-export function isValidElement(element?: HostElement | null): element is HostElement {
+export function isValidElement(element?: HostComponent | null): element is HostComponent {
   return typeof element?.type === 'string' && element.type !== CONTAINER_TYPE;
 }
 
@@ -15,8 +14,8 @@ export function isValidElement(element?: HostElement | null): element is HostEle
  * @param element The element start traversing from.
  * @returns The root element of the tree (host or composite).
  */
-export function getRootElement(element: HostElement) {
-  let current: HostElement | null = element;
+export function getRootElement(element: HostComponent) {
+  let current: HostComponent | null = element;
   while (current?.parent) {
     current = current.parent;
   }
@@ -28,11 +27,11 @@ export function getRootElement(element: HostElement) {
  * Returns host siblings for given element.
  * @param element The element start traversing from.
  */
-export function getHostSiblings(element: HostElement | null): HostElement[] {
+export function getHostSiblings(element: HostComponent | null): HostComponent[] {
   const hostParent = element?.parent ?? null;
   return (
     hostParent?.children.filter(
-      (sibling): sibling is HostElement => typeof sibling === 'object' && sibling !== element,
+      (sibling): sibling is HostComponent => typeof sibling === 'object' && sibling !== element,
     ) ?? []
   );
 }

src/helpers/debug-deep.ts

@@ -1,4 +1,4 @@
-import type { JsonNode } from '../renderer/render-to-json';
+import type { JsonNode } from 'universal-test-renderer/dist/index.d.ts';
 import format, { FormatOptions } from './format';
 
 export type DebugOptions = {