refactor: use HostElement type in place of ReactTestInstance

Author: mdjastrzebski

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

@@ -1,6 +1,5 @@
 import * as React from 'react';
 import { View } from 'react-native';
-import TestRenderer from 'react-test-renderer';
 import { configureInternal, getConfig } from '../config';
 import {
   getHostComponentNames,

src/__tests__/render-hook.test.tsx

@@ -1,9 +1,7 @@
 /* eslint-disable jest/no-conditional-expect */
 import React, { ReactNode } from 'react';
-import TestRenderer from 'react-test-renderer';
 import * as internalRenderer from '../renderer/renderer';
 import { renderHook } from '../pure';
-import { getConfig } from '../config';
 
 test('gives committed result', () => {
   const { result } = renderHook(() => {

src/fire-event.ts

@@ -1,4 +1,3 @@
-import { ReactTestInstance } from 'react-test-renderer';
 import {
   ViewProps,
   TextProps,
@@ -13,11 +12,12 @@ 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: ReactTestInstance) {
+export function isTouchResponder(element: HostElement) {
   if (!isHostElement(element)) {
     return false;
   }
@@ -57,9 +57,9 @@ const textInputEventsIgnoringEditableProp = new Set([
 ]);
 
 export function isEventEnabled(
-  element: ReactTestInstance,
+  element: HostElement,
   eventName: string,
-  nearestTouchResponder?: ReactTestInstance,
+  nearestTouchResponder?: HostElement,
 ) {
   if (isHostTextInput(nearestTouchResponder)) {
     return (
@@ -82,9 +82,9 @@ export function isEventEnabled(
 }
 
 function findEventHandler(
-  element: ReactTestInstance,
+  element: HostElement,
   eventName: string,
-  nearestTouchResponder?: ReactTestInstance,
+  nearestTouchResponder?: HostElement,
 ): EventHandler | null {
   const touchResponder = isTouchResponder(element) ? element : nearestTouchResponder;
 
@@ -101,7 +101,7 @@ function findEventHandler(
   return findEventHandler(element.parent, eventName, touchResponder);
 }
 
-function getEventHandler(element: ReactTestInstance, eventName: string) {
+function getEventHandler(element: HostElement, 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: ReactTestInstance, eventName: EventName, ...data: unknown[]) {
+function fireEvent(element: HostElement, eventName: EventName, ...data: unknown[]) {
   setNativeStateIfNeeded(element, eventName, data[0]);
 
   const handler = findEventHandler(element, eventName);
@@ -147,7 +147,7 @@ function fireEvent(element: ReactTestInstance, eventName: EventName, ...data: un
   return returnValue;
 }
 
-fireEvent.press = (element: ReactTestInstance, ...data: unknown[]) => {
+fireEvent.press = (element: HostElement, ...data: unknown[]) => {
   const nativeData =
     data.length === 1 &&
     typeof data[0] === 'object' &&
@@ -178,10 +178,10 @@ fireEvent.press = (element: ReactTestInstance, ...data: unknown[]) => {
   fireEvent(element, 'responderRelease', responderReleaseEvent);
 };
 
-fireEvent.changeText = (element: ReactTestInstance, ...data: unknown[]) =>
+fireEvent.changeText = (element: HostElement, ...data: unknown[]) =>
   fireEvent(element, 'changeText', ...data);
 
-fireEvent.scroll = (element: ReactTestInstance, ...data: unknown[]) =>
+fireEvent.scroll = (element: HostElement, ...data: unknown[]) =>
   fireEvent(element, 'scroll', ...data);
 
 export default fireEvent;
@@ -194,7 +194,7 @@ const scrollEventNames = new Set([
   'momentumScrollEnd',
 ]);
 
-function setNativeStateIfNeeded(element: ReactTestInstance, eventName: string, value: unknown) {
+function setNativeStateIfNeeded(element: HostElement, eventName: string, value: unknown) {
   if (
     eventName === 'changeText' &&
     typeof value === 'string' &&

src/helpers/__tests__/component-tree.test.tsx

@@ -36,7 +36,7 @@ describe('getHostParent()', () => {
     const hostGrandparent = getHostParent(hostParent);
     expect(hostGrandparent).toBe(screen.getByTestId('grandparent'));
 
-    expect(getHostParent(hostGrandparent)).toBe(null);
+    expect(getHostParent(hostGrandparent)).toBe(screen.UNSAFE_root);
   });
 
   it('returns host parent for null', () => {

src/helpers/accessibility.ts

@@ -5,7 +5,7 @@ import {
   Role,
   StyleSheet,
 } from 'react-native';
-import { ReactTestInstance } from 'react-test-renderer';
+import { HostElement } from '../renderer/host-element';
 import { getHostSiblings, getUnsafeRootElement } from './component-tree';
 import {
   getHostComponentNames,
@@ -19,7 +19,7 @@ import { isTextInputEditable } from './text-input';
 import { findAllByProps } from './find-all';
 
 type IsInaccessibleOptions = {
-  cache?: WeakMap<ReactTestInstance, boolean>;
+  cache?: WeakMap<HostElement, 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: ReactTestInstance | null,
+  element: HostElement | null,
   { cache }: IsInaccessibleOptions = {},
 ): boolean {
   if (element == null) {
     return true;
   }
 
-  let current: ReactTestInstance | null = element;
+  let current: HostElement | 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: ReactTestInstance): boolean {
+function isSubtreeInaccessible(element: HostElement): boolean {
   // Null props can happen for React.Fragments
   if (element.props == null) {
     return false;
@@ -99,7 +99,7 @@ function isSubtreeInaccessible(element: ReactTestInstance): boolean {
   return false;
 }
 
-export function isAccessibilityElement(element: ReactTestInstance | null): boolean {
+export function isAccessibilityElement(element: HostElement | null): boolean {
   if (element == null) {
     return false;
   }
@@ -134,7 +134,7 @@ export function isAccessibilityElement(element: ReactTestInstance | null): boole
  * @param element
  * @returns
  */
-export function getRole(element: ReactTestInstance): Role | AccessibilityRole {
+export function getRole(element: HostElement): 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: ReactTestInstance): boolean | undefined {
+export function computeAriaModal(element: HostElement): boolean | undefined {
   return element.props['aria-modal'] ?? element.props.accessibilityViewIsModal;
 }
 
-export function computeAriaLabel(element: ReactTestInstance): string | undefined {
+export function computeAriaLabel(element: HostElement): string | undefined {
   const explicitLabel = element.props['aria-label'] ?? element.props.accessibilityLabel;
   if (explicitLabel) {
     return explicitLabel;
@@ -183,17 +183,17 @@ export function computeAriaLabel(element: ReactTestInstance): string | undefined
   return undefined;
 }
 
-export function computeAriaLabelledBy(element: ReactTestInstance): string | undefined {
+export function computeAriaLabelledBy(element: HostElement): 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 }: ReactTestInstance): boolean {
+export function computeAriaBusy({ props }: HostElement): 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: ReactTestInstance): AccessibilityState['checked'] {
+export function computeAriaChecked(element: HostElement): AccessibilityState['checked'] {
   const { props } = element;
 
   if (isHostSwitch(element)) {
@@ -209,7 +209,7 @@ export function computeAriaChecked(element: ReactTestInstance): AccessibilitySta
 }
 
 // See: https://github.com/callstack/react-native-testing-library/wiki/Accessibility:-State#disabled-state
-export function computeAriaDisabled(element: ReactTestInstance): boolean {
+export function computeAriaDisabled(element: HostElement): boolean {
   if (isHostTextInput(element) && !isTextInputEditable(element)) {
     return true;
   }
@@ -219,16 +219,16 @@ export function computeAriaDisabled(element: ReactTestInstance): boolean {
 }
 
 // See: https://github.com/callstack/react-native-testing-library/wiki/Accessibility:-State#expanded-state
-export function computeAriaExpanded({ props }: ReactTestInstance): boolean | undefined {
+export function computeAriaExpanded({ props }: HostElement): 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 }: ReactTestInstance): boolean {
+export function computeAriaSelected({ props }: HostElement): boolean {
   return props['aria-selected'] ?? props.accessibilityState?.selected ?? false;
 }
 
-export function computeAriaValue(element: ReactTestInstance): AccessibilityValue {
+export function computeAriaValue(element: HostElement): AccessibilityValue {
   const {
     accessibilityValue,
     'aria-valuemax': ariaValueMax,
@@ -245,7 +245,7 @@ export function computeAriaValue(element: ReactTestInstance): AccessibilityValue
   };
 }
 
-export function computeAccessibleName(element: ReactTestInstance): string | undefined {
+export function computeAccessibleName(element: HostElement): string | undefined {
   const label = computeAriaLabel(element);
   if (label) {
     return label;

src/helpers/component-tree.ts

@@ -1,50 +1,35 @@
-import { ReactTestInstance } from 'react-test-renderer';
-
-/**
- * ReactTestInstance referring to host element.
- */
-export type HostTestInstance = ReactTestInstance & { type: string };
+import { HostElement } from '../renderer/host-element';
 
 /**
  * Checks if the given element is a host element.
  * @param element The element to check.
  */
-export function isHostElement(element?: ReactTestInstance | null): element is HostTestInstance {
-  // @ts-expect-error element.type has incorrectly narrowed type.
+export function isHostElement(element?: HostElement | null): element is HostElement {
   return typeof element?.type === 'string' && element.type !== 'CONTAINER';
 }
 
 /**
  * Returns first host ancestor for given element.
  * @param element The element start traversing from.
  */
-export function getHostParent(element: ReactTestInstance | null): HostTestInstance | null {
+export function getHostParent(element: HostElement | null): HostElement | null {
   if (element == null) {
     return null;
   }
 
-  let current = element.parent;
-  while (current) {
-    if (isHostElement(current)) {
-      return current;
-    }
-
-    current = current.parent;
-  }
-
-  return null;
+  return element.parent;
 }
 
 /**
  * Returns host children for given element.
  * @param element The element start traversing from.
  */
-export function getHostChildren(element: ReactTestInstance | null): HostTestInstance[] {
+export function getHostChildren(element: HostElement | null): HostElement[] {
   if (element == null) {
     return [];
   }
 
-  const hostChildren: HostTestInstance[] = [];
+  const hostChildren: HostElement[] = [];
 
   element.children.forEach((child) => {
     if (typeof child !== 'object') {
@@ -68,15 +53,15 @@ export function getHostChildren(element: ReactTestInstance | null): HostTestInst
  * @returns If the passed element is a host element, it will return an array containing only that element,
  * if the passed element is a composite element, it will return an array containing its host children (zero, one or many).
  */
-export function getHostSelves(element: ReactTestInstance | null): HostTestInstance[] {
+export function getHostSelves(element: HostElement | null): HostElement[] {
   return isHostElement(element) ? [element] : getHostChildren(element);
 }
 
 /**
  * Returns host siblings for given element.
  * @param element The element start traversing from.
  */
-export function getHostSiblings(element: ReactTestInstance | null): HostTestInstance[] {
+export function getHostSiblings(element: HostElement | null): HostElement[] {
   const hostParent = getHostParent(element);
   const hostSelves = getHostSelves(element);
   return getHostChildren(hostParent).filter((sibling) => !hostSelves.includes(sibling));
@@ -88,8 +73,8 @@ export function getHostSiblings(element: ReactTestInstance | null): HostTestInst
  * @param element The element start traversing from.
  * @returns The root element of the tree (host or composite).
  */
-export function getUnsafeRootElement(element: ReactTestInstance) {
-  let current: ReactTestInstance | null = element;
+export function getUnsafeRootElement(element: HostElement) {
+  let current: HostElement | null = element;
   while (current?.parent) {
     current = current.parent;
   }

src/helpers/debug-deep.ts

@@ -1,4 +1,4 @@
-import type { ReactTestRendererJSON } from 'react-test-renderer';
+import type { JsonNode } from '../renderer/render-to-json';
 import format, { FormatOptions } from './format';
 
 export type DebugOptions = {
@@ -9,7 +9,7 @@ export type DebugOptions = {
  * Log pretty-printed deep test component instance
  */
 export default function debugDeep(
-  instance: ReactTestRendererJSON | ReactTestRendererJSON[],
+  instance: JsonNode | JsonNode[],
   options?: DebugOptions | string,
 ) {
   const message = typeof options === 'string' ? options : options?.message;

src/helpers/debug-shallow.ts

@@ -1,13 +1,13 @@
 import * as React from 'react';
-import type { ReactTestInstance } from 'react-test-renderer';
+import { HostElement } from '../renderer/host-element';
 import { shallowInternal } from '../shallow';
 import format from './format';
 
 /**
  * Log pretty-printed shallow test component instance
  */
 export default function debugShallow(
-  instance: ReactTestInstance | React.ReactElement<any>,
+  instance: HostElement | React.ReactElement<any>,
   message?: string,
 ) {
   const { output } = shallowInternal(instance);