refactor: update UTR 0.2.0

Author: mdjastrzebski

package.json

@@ -56,7 +56,7 @@
     "jest": ">=28.0.0",
     "react": ">=18.0.0",
     "react-native": ">=0.59",
-    "universal-test-renderer": "0.1.2"
+    "universal-test-renderer": "0.2.0"
   },
   "peerDependenciesMeta": {
     "jest": {
@@ -91,7 +91,7 @@
     "release-it": "^17.10.0",
     "strip-ansi": "^6.0.1",
     "typescript": "^5.6.3",
-    "universal-test-renderer": "0.1.2"
+    "universal-test-renderer": "0.2.0"
   },
   "publishConfig": {
     "registry": "https://registry.npmjs.org"

src/fire-event.ts

@@ -5,7 +5,7 @@ import {
   PressableProps,
   ScrollViewProps,
 } from 'react-native';
-import { HostComponent } from 'universal-test-renderer';
+import { HostElement } from 'universal-test-renderer';
 import act from './act';
 import { isElementMounted, isValidElement } from './helpers/component-tree';
 import { isHostScrollView, isHostTextInput } from './helpers/host-component-names';
@@ -17,7 +17,7 @@ import { EventBuilder } from './user-event/event-builder';
 
 type EventHandler = (...args: unknown[]) => unknown;
 
-export function isTouchResponder(element: HostComponent) {
+export function isTouchResponder(element: HostElement) {
   if (!isValidElement(element)) {
     return false;
   }
@@ -57,9 +57,9 @@ const textInputEventsIgnoringEditableProp = new Set([
 ]);
 
 export function isEventEnabled(
-  element: HostComponent,
+  element: HostElement,
   eventName: string,
-  nearestTouchResponder?: HostComponent,
+  nearestTouchResponder?: HostElement,
 ) {
   if (isHostTextInput(nearestTouchResponder)) {
     return (
@@ -82,9 +82,9 @@ export function isEventEnabled(
 }
 
 function findEventHandler(
-  element: HostComponent,
+  element: HostElement,
   eventName: string,
-  nearestTouchResponder?: HostComponent,
+  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: HostComponent, 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: HostComponent, eventName: EventName, ...data: unknown[]) {
+function fireEvent(element: HostElement, eventName: EventName, ...data: unknown[]) {
   if (!isElementMounted(element)) {
     return;
   }
@@ -151,7 +151,7 @@ function fireEvent(element: HostComponent, eventName: EventName, ...data: unknow
   return returnValue;
 }
 
-fireEvent.press = (element: HostComponent, ...data: unknown[]) => {
+fireEvent.press = (element: HostElement, ...data: unknown[]) => {
   const nativeData =
     data.length === 1 &&
     typeof data[0] === 'object' &&
@@ -182,10 +182,10 @@ fireEvent.press = (element: HostComponent, ...data: unknown[]) => {
   fireEvent(element, 'responderRelease', responderReleaseEvent);
 };
 
-fireEvent.changeText = (element: HostComponent, ...data: unknown[]) =>
+fireEvent.changeText = (element: HostElement, ...data: unknown[]) =>
   fireEvent(element, 'changeText', ...data);
 
-fireEvent.scroll = (element: HostComponent, ...data: unknown[]) =>
+fireEvent.scroll = (element: HostElement, ...data: unknown[]) =>
   fireEvent(element, 'scroll', ...data);
 
 export default fireEvent;
@@ -198,7 +198,7 @@ const scrollEventNames = new Set([
   'momentumScrollEnd',
 ]);
 
-function setNativeStateIfNeeded(element: HostComponent, eventName: string, value: unknown) {
+function setNativeStateIfNeeded(element: HostElement, 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 { HostComponent } from 'universal-test-renderer';
+import { HostElement } 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<HostComponent, 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: HostComponent | null,
+  element: HostElement | null,
   { cache }: IsInaccessibleOptions = {},
 ): boolean {
   if (element == null) {
     return true;
   }
 
-  let current: HostComponent | 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: HostComponent): 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: HostComponent): boolean {
   return false;
 }
 
-export function isAccessibilityElement(element: HostComponent | null): boolean {
+export function isAccessibilityElement(element: HostElement | null): boolean {
   if (element == null) {
     return false;
   }
@@ -134,7 +134,7 @@ export function isAccessibilityElement(element: HostComponent | null): boolean {
  * @param element
  * @returns
  */
-export function getRole(element: HostComponent): 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: HostComponent): boolean | undefined {
+export function computeAriaModal(element: HostElement): boolean | undefined {
   return element.props['aria-modal'] ?? element.props.accessibilityViewIsModal;
 }
 
-export function computeAriaLabel(element: HostComponent): 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: HostComponent): string | undefined {
   return undefined;
 }
 
-export function computeAriaLabelledBy(element: HostComponent): 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 }: HostComponent): 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: HostComponent): AccessibilityState['checked'] {
+export function computeAriaChecked(element: HostElement): AccessibilityState['checked'] {
   const { props } = element;
 
   if (isHostSwitch(element)) {
@@ -209,7 +209,7 @@ export function computeAriaChecked(element: HostComponent): AccessibilityState['
 }
 
 // See: https://github.com/callstack/react-native-testing-library/wiki/Accessibility:-State#disabled-state
-export function computeAriaDisabled(element: HostComponent): boolean {
+export function computeAriaDisabled(element: HostElement): boolean {
   if (isHostTextInput(element) && !isTextInputEditable(element)) {
     return true;
   }
@@ -219,16 +219,16 @@ export function computeAriaDisabled(element: HostComponent): boolean {
 }
 
 // See: https://github.com/callstack/react-native-testing-library/wiki/Accessibility:-State#expanded-state
-export function computeAriaExpanded({ props }: HostComponent): 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 }: HostComponent): boolean {
+export function computeAriaSelected({ props }: HostElement): boolean {
   return props['aria-selected'] ?? props.accessibilityState?.selected ?? false;
 }
 
-export function computeAriaValue(element: HostComponent): AccessibilityValue {
+export function computeAriaValue(element: HostElement): AccessibilityValue {
   const {
     accessibilityValue,
     'aria-valuemax': ariaValueMax,
@@ -245,7 +245,7 @@ export function computeAriaValue(element: HostComponent): AccessibilityValue {
   };
 }
 
-export function computeAccessibleName(element: HostComponent): string | undefined {
+export function computeAccessibleName(element: HostElement): string | undefined {
   const label = computeAriaLabel(element);
   if (label) {
     return label;

src/helpers/component-tree.ts

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

src/helpers/find-all.ts

@@ -1,4 +1,4 @@
-import { HostComponent } from 'universal-test-renderer';
+import { HostElement } from 'universal-test-renderer';
 import { getConfig } from '../config';
 import { isHiddenFromAccessibility } from './accessibility';
 import { isValidElement } from './component-tree';
@@ -15,10 +15,10 @@ interface FindAllOptions {
 }
 
 export function findAll(
-  root: HostComponent,
-  predicate: (element: HostComponent) => boolean,
+  root: HostElement,
+  predicate: (element: HostElement) => boolean,
   options?: FindAllOptions,
-): HostComponent[] {
+): HostElement[] {
   const results = findAllInternal(root, predicate, options);
 
   const includeHiddenElements =
@@ -28,24 +28,24 @@ export function findAll(
     return results;
   }
 
-  const cache = new WeakMap<HostComponent>();
+  const cache = new WeakMap<HostElement>();
   return results.filter((element) => !isHiddenFromAccessibility(element, { cache }));
 }
 
 // Extracted from React Test Renderer
 // src: https://github.com/facebook/react/blob/8e2bde6f2751aa6335f3cef488c05c3ea08e074a/packages/react-test-renderer/src/ReactTestRenderer.js#L402
 function findAllInternal(
-  node: HostComponent,
-  predicate: (element: HostComponent) => boolean,
+  node: HostElement,
+  predicate: (element: HostElement) => boolean,
   options?: FindAllOptions,
   indent: string = '',
-): HostComponent[] {
-  const results: HostComponent[] = [];
+): HostElement[] {
+  const results: HostElement[] = [];
 
   //console.log(`${indent} 🟢 findAllInternal`, node.type, node.props);
 
   // Match descendants first but do not add them to results yet.
-  const matchingDescendants: HostComponent[] = [];
+  const matchingDescendants: HostElement[] = [];
   node.children.forEach((child) => {
     if (typeof child === 'string') {
       return;
@@ -69,14 +69,14 @@ function findAllInternal(
 }
 
 export function findAllByProps(
-  root: HostComponent,
+  root: HostElement,
   props: { [propName: string]: any },
   options?: FindAllOptions,
-): HostComponent[] {
+): HostElement[] {
   return findAll(root, (element) => matchProps(element, props), options);
 }
 
-function matchProps(element: HostComponent, props: { [propName: string]: any }): boolean {
+function matchProps(element: HostElement, props: { [propName: string]: any }): boolean {
   for (const key in props) {
     if (props[key] !== element.props[key]) {
       return false;