diff --git a/skills/react-native-testing/references/api-reference-v14.md b/skills/react-native-testing/references/api-reference-v14.md index 55e3351c6..e796f6466 100644 --- a/skills/react-native-testing/references/api-reference-v14.md +++ b/skills/react-native-testing/references/api-reference-v14.md @@ -3,7 +3,7 @@ Complete API reference for `@testing-library/react-native` v14.x (React 19+). **Test renderer:** `test-renderer` (not `react-test-renderer`) -**Element type:** `HostElement` (not `ReactTestInstance`) +**Element type:** `TestInstance` (not `ReactTestInstance`) ## Table of Contents @@ -106,8 +106,8 @@ let screen: { unmount(): Promise; // async debug(options?: { message?: string; mapProps?: MapPropsFunction }): void; toJSON(): RendererJSON | null; - container: HostElement; // safe root host element - root: HostElement; // root host element + container: TestInstance; // safe root host element + root: TestInstance; // root host element }; ``` @@ -132,14 +132,14 @@ Each query = **variant** + **predicate** (e.g., `getByRole` = `getBy` + `ByRole` ### Query Variants -| Variant | Assertion | Return Type | Async | -| ------------- | ------------------ | ------------------------------------ | ----- | -| `getBy*` | Exactly one match | `HostElement` (throws if 0 or >1) | No | -| `getAllBy*` | At least one match | `HostElement[]` (throws if 0) | No | -| `queryBy*` | Zero or one match | `HostElement \| null` (throws if >1) | No | -| `queryAllBy*` | No assertion | `HostElement[]` (empty if 0) | No | -| `findBy*` | Exactly one match | `Promise` | Yes | -| `findAllBy*` | At least one match | `Promise` | Yes | +| Variant | Assertion | Return Type | Async | +| ------------- | ------------------ | ------------------------------------- | ----- | +| `getBy*` | Exactly one match | `TestInstance` (throws if 0 or >1) | No | +| `getAllBy*` | At least one match | `TestInstance[]` (throws if 0) | No | +| `queryBy*` | Zero or one match | `TestInstance \| null` (throws if >1) | No | +| `queryAllBy*` | No assertion | `TestInstance[]` (empty if 0) | No | +| `findBy*` | Exactly one match | `Promise` | Yes | +| `findAllBy*` | At least one match | `Promise` | Yes | `findBy*` / `findAllBy*` accept optional `waitForOptions: { timeout?, interval?, onTimeout? }`. @@ -157,7 +157,7 @@ getByRole(role: TextMatch, options?: { expanded?: boolean; value?: { min?: number; max?: number; now?: number; text?: TextMatch }; includeHiddenElements?: boolean; -}): HostElement; +}): TestInstance; ``` Matches elements by `role` or `accessibilityRole`. Element must be an accessibility element: @@ -177,7 +177,7 @@ screen.getByRole('slider', { value: { now: 50, min: 0, max: 100 } }); #### `*ByLabelText` ```ts -getByLabelText(text: TextMatch, options?: { exact?: boolean; normalizer?: Function; includeHiddenElements?: boolean }): HostElement; +getByLabelText(text: TextMatch, options?: { exact?: boolean; normalizer?: Function; includeHiddenElements?: boolean }): TestInstance; ``` Matches by `aria-label`/`accessibilityLabel` or text content of element referenced by `aria-labelledby`/`accessibilityLabelledBy`. @@ -185,7 +185,7 @@ Matches by `aria-label`/`accessibilityLabel` or text content of element referenc #### `*ByPlaceholderText` ```ts -getByPlaceholderText(text: TextMatch, options?: { exact?: boolean; normalizer?: Function; includeHiddenElements?: boolean }): HostElement; +getByPlaceholderText(text: TextMatch, options?: { exact?: boolean; normalizer?: Function; includeHiddenElements?: boolean }): TestInstance; ``` Matches `TextInput` by `placeholder` prop. @@ -193,7 +193,7 @@ Matches `TextInput` by `placeholder` prop. #### `*ByText` ```ts -getByText(text: TextMatch, options?: { exact?: boolean; normalizer?: Function; includeHiddenElements?: boolean }): HostElement; +getByText(text: TextMatch, options?: { exact?: boolean; normalizer?: Function; includeHiddenElements?: boolean }): TestInstance; ``` Matches by text content. Joins `` siblings to find matches (like RN runtime). @@ -201,7 +201,7 @@ Matches by text content. Joins `` siblings to find matches (like RN runtim #### `*ByDisplayValue` ```ts -getByDisplayValue(value: TextMatch, options?: { exact?: boolean; normalizer?: Function; includeHiddenElements?: boolean }): HostElement; +getByDisplayValue(value: TextMatch, options?: { exact?: boolean; normalizer?: Function; includeHiddenElements?: boolean }): TestInstance; ``` Matches `TextInput` by current display value. @@ -209,7 +209,7 @@ Matches `TextInput` by current display value. #### `*ByHintText` ```ts -getByHintText(hint: TextMatch, options?: { exact?: boolean; normalizer?: Function; includeHiddenElements?: boolean }): HostElement; +getByHintText(hint: TextMatch, options?: { exact?: boolean; normalizer?: Function; includeHiddenElements?: boolean }): TestInstance; ``` Matches by `accessibilityHint` prop. Also available as `getByA11yHint` / `getByAccessibilityHint`. @@ -217,7 +217,7 @@ Matches by `accessibilityHint` prop. Also available as `getByA11yHint` / `getByA #### `*ByTestId` (last resort) ```ts -getByTestId(testId: TextMatch, options?: { exact?: boolean; normalizer?: Function; includeHiddenElements?: boolean }): HostElement; +getByTestId(testId: TextMatch, options?: { exact?: boolean; normalizer?: Function; includeHiddenElements?: boolean }): TestInstance; ``` Matches by `testID` prop. Use only when other queries don't work. @@ -326,7 +326,7 @@ Use when `userEvent` doesn't support the event or when triggering events on comp ```ts async function fireEvent( - element: HostElement, + instance: TestInstance, eventName: string, ...data: unknown[] ): Promise; @@ -361,7 +361,7 @@ Available automatically with any `@testing-library/react-native` import. No setu | Matcher | Signature | Description | | --------------------- | ------------------------------------------------------------- | --------------------------- | | `toHaveTextContent()` | `(text: string \| RegExp, options?: { exact?, normalizer? })` | Text content match | -| `toContainElement()` | `(element: HostElement \| null)` | Contains child element | +| `toContainElement()` | `(instance: TestInstance \| null)` | Contains child element | | `toBeEmptyElement()` | — | No children or text content | ### Element State @@ -430,7 +430,7 @@ Waits until the queried element is removed. Element must be initially present. ### `within` ```ts -function within(element: HostElement): Queries; +function within(instance: TestInstance): Queries; ``` Scoped queries on a subtree. Useful for querying within a single `FlatList` item or a specific screen. @@ -533,7 +533,7 @@ Note: `concurrentRoot` option is removed (always on). `unstable_validateStringsR ### `isHiddenFromAccessibility` ```ts -function isHiddenFromAccessibility(element: HostElement | null): boolean; +function isHiddenFromAccessibility(instance: TestInstance | null): boolean; ``` Also available as `isInaccessible()` alias. diff --git a/src/__tests__/fire-event.test.tsx b/src/__tests__/fire-event.test.tsx index f8185a7d6..bef18dc74 100644 --- a/src/__tests__/fire-event.test.tsx +++ b/src/__tests__/fire-event.test.tsx @@ -161,7 +161,7 @@ describe('fireEvent.changeText', () => { const input = screen.getByTestId('input'); await fireEvent.changeText(input, 'new text'); expect(onChangeText).toHaveBeenCalledWith('new text'); - expect(nativeState.valueForElement.get(input)).toBe('new text'); + expect(nativeState.valueForInstance.get(input)).toBe('new text'); }); test('does not fire on non-editable TextInput', async () => { @@ -170,7 +170,7 @@ describe('fireEvent.changeText', () => { const input = screen.getByTestId('input'); await fireEvent.changeText(input, 'new text'); expect(onChangeText).not.toHaveBeenCalled(); - expect(nativeState.valueForElement.get(input)).toBeUndefined(); + expect(nativeState.valueForInstance.get(input)).toBeUndefined(); }); }); @@ -286,7 +286,7 @@ describe('fireEvent.scroll', () => { const scrollView = screen.getByTestId('scroll'); await fireEvent.scroll(scrollView, verticalScrollEvent); expect(onScroll.mock.calls[0][0]).toMatchObject(verticalScrollEvent); - expect(nativeState.contentOffsetForElement.get(scrollView)).toEqual({ x: 0, y: 200 }); + expect(nativeState.contentOffsetForInstance.get(scrollView)).toEqual({ x: 0, y: 200 }); }); test.each([ @@ -301,7 +301,7 @@ describe('fireEvent.scroll', () => { const scrollView = screen.getByTestId('scroll'); await fireEvent(scrollView, eventName, verticalScrollEvent); expect(handler).toHaveBeenCalledWith(verticalScrollEvent); - expect(nativeState.contentOffsetForElement.get(scrollView)).toEqual({ x: 0, y: 200 }); + expect(nativeState.contentOffsetForInstance.get(scrollView)).toEqual({ x: 0, y: 200 }); }); test('without contentOffset scrolls to (0, 0)', async () => { @@ -316,7 +316,7 @@ describe('fireEvent.scroll', () => { expect(onScroll.mock.calls[0][0]).toMatchObject({ nativeEvent: { contentOffset: { x: 0, y: 0 } }, }); - expect(nativeState.contentOffsetForElement.get(scrollView)).toEqual({ x: 0, y: 0 }); + expect(nativeState.contentOffsetForInstance.get(scrollView)).toEqual({ x: 0, y: 0 }); }); test('with non-finite contentOffset values uses 0', async () => { @@ -331,7 +331,7 @@ describe('fireEvent.scroll', () => { nativeEvent: { contentOffset: { y: Infinity } }, }); expect(onScroll).toHaveBeenCalled(); - expect(nativeState.contentOffsetForElement.get(scrollView)).toEqual({ x: 0, y: 0 }); + expect(nativeState.contentOffsetForInstance.get(scrollView)).toEqual({ x: 0, y: 0 }); }); test('with horizontal scroll updates native state', async () => { @@ -344,7 +344,7 @@ describe('fireEvent.scroll', () => { const scrollView = screen.getByTestId('scroll'); await fireEvent.scroll(scrollView, horizontalScrollEvent); expect(onScroll.mock.calls[0][0]).toMatchObject(horizontalScrollEvent); - expect(nativeState.contentOffsetForElement.get(scrollView)).toEqual({ x: 50, y: 0 }); + expect(nativeState.contentOffsetForInstance.get(scrollView)).toEqual({ x: 50, y: 0 }); }); test('without contentOffset via fireEvent() does not update native state', async () => { @@ -357,7 +357,7 @@ describe('fireEvent.scroll', () => { const scrollView = screen.getByTestId('scroll'); await fireEvent(scrollView, 'scroll', { nativeEvent: {} }); expect(onScroll).toHaveBeenCalled(); - expect(nativeState.contentOffsetForElement.get(scrollView)).toBeUndefined(); + expect(nativeState.contentOffsetForInstance.get(scrollView)).toBeUndefined(); }); test('with non-finite x contentOffset value uses 0', async () => { @@ -372,7 +372,7 @@ describe('fireEvent.scroll', () => { nativeEvent: { contentOffset: { x: Infinity } }, }); expect(onScroll).toHaveBeenCalled(); - expect(nativeState.contentOffsetForElement.get(scrollView)).toEqual({ x: 0, y: 0 }); + expect(nativeState.contentOffsetForInstance.get(scrollView)).toEqual({ x: 0, y: 0 }); }); }); diff --git a/src/fire-event.ts b/src/fire-event.ts index e6f733642..18897a145 100644 --- a/src/fire-event.ts +++ b/src/fire-event.ts @@ -5,21 +5,21 @@ import type { TextProps, ViewProps, } from 'react-native'; -import type { Fiber, HostElement } from 'test-renderer'; +import type { Fiber, TestInstance } from 'test-renderer'; import { act } from './act'; import { buildScrollEvent, buildTouchEvent } from './event-builder'; import type { EventHandler } from './event-handler'; import { getEventHandlerFromProps } from './event-handler'; -import { isElementMounted } from './helpers/component-tree'; +import { isInstanceMounted } from './helpers/component-tree'; import { isHostScrollView, isHostTextInput } from './helpers/host-component-names'; import { isPointerEventEnabled } from './helpers/pointer-events'; import { isEditableTextInput } from './helpers/text-input'; import { nativeState } from './native-state'; import type { Point, StringWithAutocomplete } from './types'; -function isTouchResponder(element: HostElement) { - return Boolean(element.props.onStartShouldSetResponder) || isHostTextInput(element); +function isTouchResponder(instance: TestInstance) { + return Boolean(instance.props.onStartShouldSetResponder) || isHostTextInput(instance); } /** @@ -46,9 +46,9 @@ const textInputEventsIgnoringEditableProp = new Set([ ]); function isEventEnabled( - element: HostElement, + instance: TestInstance, eventName: string, - nearestTouchResponder?: HostElement, + nearestTouchResponder?: TestInstance, ) { if (nearestTouchResponder != null && isHostTextInput(nearestTouchResponder)) { return ( @@ -57,7 +57,7 @@ function isEventEnabled( ); } - if (eventsAffectedByPointerEventsProp.has(eventName) && !isPointerEventEnabled(element)) { + if (eventsAffectedByPointerEventsProp.has(eventName) && !isPointerEventEnabled(instance)) { return false; } @@ -71,24 +71,24 @@ function isEventEnabled( } function findEventHandler( - element: HostElement, + instance: TestInstance, eventName: string, - nearestTouchResponder?: HostElement, + nearestTouchResponder?: TestInstance, ): EventHandler | null { - const touchResponder = isTouchResponder(element) ? element : nearestTouchResponder; + const touchResponder = isTouchResponder(instance) ? instance : nearestTouchResponder; const handler = - getEventHandlerFromProps(element.props, eventName, { loose: true }) ?? - findEventHandlerFromFiber(element.unstable_fiber, eventName); - if (handler && isEventEnabled(element, eventName, touchResponder)) { + getEventHandlerFromProps(instance.props, eventName, { loose: true }) ?? + findEventHandlerFromFiber(instance.unstable_fiber, eventName); + if (handler && isEventEnabled(instance, eventName, touchResponder)) { return handler; } - if (element.parent === null) { + if (instance.parent === null) { return null; } - return findEventHandler(element.parent, eventName, touchResponder); + return findEventHandler(instance.parent, eventName, touchResponder); } function findEventHandlerFromFiber(fiber: Fiber | null, eventName: string): EventHandler | null { @@ -123,14 +123,14 @@ type EventName = StringWithAutocomplete< | EventNameExtractor >; -async function fireEvent(element: HostElement, eventName: EventName, ...data: unknown[]) { - if (!isElementMounted(element)) { +async function fireEvent(instance: TestInstance, eventName: EventName, ...data: unknown[]) { + if (!isInstanceMounted(instance)) { return; } - setNativeStateIfNeeded(element, eventName, data[0]); + setNativeStateIfNeeded(instance, eventName, data[0]); - const handler = findEventHandler(element, eventName); + const handler = findEventHandler(instance, eventName); if (!handler) { return; } @@ -145,25 +145,25 @@ async function fireEvent(element: HostElement, eventName: EventName, ...data: un type EventProps = Record; -fireEvent.changeText = async (element: HostElement, text: string) => - await fireEvent(element, 'changeText', text); +fireEvent.changeText = async (instance: TestInstance, text: string) => + await fireEvent(instance, 'changeText', text); -fireEvent.press = async (element: HostElement, eventProps?: EventProps) => { +fireEvent.press = async (instance: TestInstance, eventProps?: EventProps) => { const event = buildTouchEvent(); if (eventProps) { mergeEventProps(event, eventProps); } - await fireEvent(element, 'press', event); + await fireEvent(instance, 'press', event); }; -fireEvent.scroll = async (element: HostElement, eventProps?: EventProps) => { +fireEvent.scroll = async (instance: TestInstance, eventProps?: EventProps) => { const event = buildScrollEvent(); if (eventProps) { mergeEventProps(event, eventProps); } - await fireEvent(element, 'scroll', event); + await fireEvent(instance, 'scroll', event); }; export { fireEvent }; @@ -176,15 +176,15 @@ const scrollEventNames = new Set([ 'momentumScrollEnd', ]); -function setNativeStateIfNeeded(element: HostElement, eventName: string, value: unknown) { - if (eventName === 'changeText' && typeof value === 'string' && isEditableTextInput(element)) { - nativeState.valueForElement.set(element, value); +function setNativeStateIfNeeded(instance: TestInstance, eventName: string, value: unknown) { + if (eventName === 'changeText' && typeof value === 'string' && isEditableTextInput(instance)) { + nativeState.valueForInstance.set(instance, value); } - if (scrollEventNames.has(eventName) && isHostScrollView(element)) { + if (scrollEventNames.has(eventName) && isHostScrollView(instance)) { const contentOffset = tryGetContentOffset(value); if (contentOffset) { - nativeState.contentOffsetForElement.set(element, contentOffset); + nativeState.contentOffsetForInstance.set(instance, contentOffset); } } } diff --git a/src/helpers/__tests__/component-tree.test.tsx b/src/helpers/__tests__/component-tree.test.tsx index 7b1de447f..9d1d3b82e 100644 --- a/src/helpers/__tests__/component-tree.test.tsx +++ b/src/helpers/__tests__/component-tree.test.tsx @@ -2,7 +2,7 @@ import React from 'react'; import { View } from 'react-native'; import { render, screen } from '../..'; -import { getContainerElement, getInstanceSiblings } from '../component-tree'; +import { getContainerInstance, getInstanceSiblings } from '../component-tree'; function MultipleHostChildren() { return ( @@ -38,7 +38,7 @@ describe('getHostSiblings()', () => { }); }); -describe('getContainerElement()', () => { +describe('getContainerInstance()', () => { it('returns container for mounted view', async () => { await render( @@ -47,6 +47,6 @@ describe('getContainerElement()', () => { ); const view = screen.getByTestId('view'); - expect(getContainerElement(view)).toEqual(screen.container); + expect(getContainerInstance(view)).toEqual(screen.container); }); }); diff --git a/src/helpers/accessibility.ts b/src/helpers/accessibility.ts index 14fcea554..de8fab7bf 100644 --- a/src/helpers/accessibility.ts +++ b/src/helpers/accessibility.ts @@ -1,15 +1,15 @@ import type { AccessibilityRole, AccessibilityState, AccessibilityValue, Role } from 'react-native'; import { StyleSheet } from 'react-native'; -import type { HostElement } from 'test-renderer'; +import type { TestInstance } from 'test-renderer'; -import { getContainerElement, getInstanceSiblings, isTestInstance } from './component-tree'; +import { getContainerInstance, getInstanceSiblings, isTestInstance } from './component-tree'; import { findAll } from './find-all'; import { isHostImage, isHostSwitch, isHostText, isHostTextInput } from './host-component-names'; import { getTextContent } from './text-content'; import { isEditableTextInput } from './text-input'; type IsInaccessibleOptions = { - cache?: WeakMap; + cache?: WeakMap; }; export const accessibilityStateKeys: (keyof AccessibilityState)[] = [ @@ -23,14 +23,14 @@ export const accessibilityStateKeys: (keyof AccessibilityState)[] = [ export const accessibilityValueKeys: (keyof AccessibilityValue)[] = ['min', 'max', 'now', 'text']; export function isHiddenFromAccessibility( - element: HostElement | null, + instance: TestInstance | null, { cache }: IsInaccessibleOptions = {}, ): boolean { - if (element == null) { + if (instance == null) { return true; } - let current: HostElement | null = element; + let current: TestInstance | null = instance; while (current) { let isCurrentSubtreeInaccessible = cache?.get(current); @@ -52,31 +52,31 @@ export function isHiddenFromAccessibility( /** RTL-compatibility alias for `isHiddenFromAccessibility` */ export const isInaccessible = isHiddenFromAccessibility; -function isSubtreeInaccessible(element: HostElement): boolean { +function isSubtreeInaccessible(instance: TestInstance): boolean { // See: https://reactnative.dev/docs/accessibility#aria-hidden - if (element.props['aria-hidden']) { + if (instance.props['aria-hidden']) { return true; } // iOS: accessibilityElementsHidden // See: https://reactnative.dev/docs/accessibility#accessibilityelementshidden-ios - if (element.props.accessibilityElementsHidden) { + if (instance.props.accessibilityElementsHidden) { return true; } // Android: importantForAccessibility // See: https://reactnative.dev/docs/accessibility#importantforaccessibility-android - if (element.props.importantForAccessibility === 'no-hide-descendants') { + if (instance.props.importantForAccessibility === 'no-hide-descendants') { return true; } // Note that `opacity: 0` is not treated as inaccessible on iOS - const flatStyle = StyleSheet.flatten(element.props.style) ?? {}; + const flatStyle = StyleSheet.flatten(instance.props.style) ?? {}; if (flatStyle.display === 'none') return true; // iOS: accessibilityViewIsModal or aria-modal // See: https://reactnative.dev/docs/accessibility#accessibilityviewismodal-ios - const hostSiblings = getInstanceSiblings(element); + const hostSiblings = getInstanceSiblings(instance); if (hostSiblings.some((sibling) => computeAriaModal(sibling))) { return true; } @@ -84,21 +84,21 @@ function isSubtreeInaccessible(element: HostElement): boolean { return false; } -export function isAccessibilityElement(element: HostElement | null): boolean { - if (element == null) { +export function isAccessibilityElement(instance: TestInstance | null): boolean { + if (instance == null) { return false; } // https://github.com/facebook/react-native/blob/8dabed60f456e76a9e53273b601446f34de41fb5/packages/react-native/Libraries/Image/Image.ios.js#L172 - if (isHostImage(element) && element.props.alt !== undefined) { + if (isHostImage(instance) && instance.props.alt !== undefined) { return true; } - if (element.props.accessible !== undefined) { - return element.props.accessible; + if (instance.props.accessible !== undefined) { + return instance.props.accessible; } - return isHostText(element) || isHostTextInput(element) || isHostSwitch(element); + return isHostText(instance) || isHostTextInput(instance) || isHostSwitch(instance); } /** @@ -111,16 +111,16 @@ export function isAccessibilityElement(element: HostElement | null): boolean { * * In all other cases this functions returns `none`. * - * @param element + * @param instance * @returns */ -export function getRole(element: HostElement): Role | AccessibilityRole { - const explicitRole = element.props.role ?? element.props.accessibilityRole; +export function getRole(instance: TestInstance): Role | AccessibilityRole { + const explicitRole = instance.props.role ?? instance.props.accessibilityRole; if (explicitRole) { return normalizeRole(explicitRole); } - if (isHostText(element)) { + if (isHostText(instance)) { return 'text'; } @@ -145,51 +145,52 @@ export function normalizeRole(role: string): Role | AccessibilityRole { return role as Role | AccessibilityRole; } -export function computeAriaModal(element: HostElement): boolean | undefined { - return element.props['aria-modal'] ?? element.props.accessibilityViewIsModal; +export function computeAriaModal(instance: TestInstance): boolean | undefined { + return instance.props['aria-modal'] ?? instance.props.accessibilityViewIsModal; } -export function computeAriaLabel(element: HostElement): string | undefined { - const labelElementId = element.props['aria-labelledby'] ?? element.props.accessibilityLabelledBy; +export function computeAriaLabel(instance: TestInstance): string | undefined { + const labelElementId = + instance.props['aria-labelledby'] ?? instance.props.accessibilityLabelledBy; if (labelElementId) { - const container = getContainerElement(element); - const labelElement = findAll( + const container = getContainerInstance(instance); + const labelInstance = findAll( container, (node) => isTestInstance(node) && node.props.nativeID === labelElementId, { includeHiddenElements: true }, ); - if (labelElement.length > 0) { - return getTextContent(labelElement[0]); + if (labelInstance.length > 0) { + return getTextContent(labelInstance[0]); } } - const explicitLabel = element.props['aria-label'] ?? element.props.accessibilityLabel; + const explicitLabel = instance.props['aria-label'] ?? instance.props.accessibilityLabel; if (explicitLabel) { return explicitLabel; } //https://github.com/facebook/react-native/blob/8dabed60f456e76a9e53273b601446f34de41fb5/packages/react-native/Libraries/Image/Image.ios.js#L173 - if (isHostImage(element) && element.props.alt) { - return element.props.alt; + if (isHostImage(instance) && instance.props.alt) { + return instance.props.alt; } return undefined; } // See: https://github.com/callstack/react-native-testing-library/wiki/Accessibility:-State#busy-state -export function computeAriaBusy({ props }: HostElement): boolean { +export function computeAriaBusy({ props }: TestInstance): 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'] { - const { props } = element; +export function computeAriaChecked(instance: TestInstance): AccessibilityState['checked'] { + const { props } = instance; - if (isHostSwitch(element)) { + if (isHostSwitch(instance)) { return props.value; } - const role = getRole(element); + const role = getRole(instance); if (!rolesSupportingCheckedState[role]) { return undefined; } @@ -198,14 +199,14 @@ 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 { - if (isHostTextInput(element) && !isEditableTextInput(element)) { +export function computeAriaDisabled(instance: TestInstance): boolean { + if (isHostTextInput(instance) && !isEditableTextInput(instance)) { return true; } - const { props } = element; + const { props } = instance; - if (isHostText(element) && props.disabled) { + if (isHostText(instance) && props.disabled) { return true; } @@ -213,23 +214,23 @@ 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 }: TestInstance): 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 }: TestInstance): boolean { return props['aria-selected'] ?? props.accessibilityState?.selected ?? false; } -export function computeAriaValue(element: HostElement): AccessibilityValue { +export function computeAriaValue(instance: TestInstance): AccessibilityValue { const { accessibilityValue, 'aria-valuemax': ariaValueMax, 'aria-valuemin': ariaValueMin, 'aria-valuenow': ariaValueNow, 'aria-valuetext': ariaValueText, - } = element.props; + } = instance.props; return { max: ariaValueMax ?? accessibilityValue?.max, @@ -244,20 +245,20 @@ type ComputeAccessibleNameOptions = { }; export function computeAccessibleName( - element: HostElement, + instance: TestInstance, options?: ComputeAccessibleNameOptions, ): string | undefined { - const label = computeAriaLabel(element); + const label = computeAriaLabel(instance); if (label) { return label; } - if (isHostTextInput(element) && element.props.placeholder && options?.root !== false) { - return element.props.placeholder; + if (isHostTextInput(instance) && instance.props.placeholder && options?.root !== false) { + return instance.props.placeholder; } const parts = []; - for (const child of element.children) { + for (const child of instance.children) { if (typeof child === 'string') { if (child) { parts.push(child); diff --git a/src/helpers/component-tree.ts b/src/helpers/component-tree.ts index eba3d540a..b5feb7aad 100644 --- a/src/helpers/component-tree.ts +++ b/src/helpers/component-tree.ts @@ -10,8 +10,8 @@ export function isTestInstance(node?: TestNode | null): node is TestInstance { return typeof node !== 'string' && typeof node?.type === 'string'; } -export function isElementMounted(element: TestInstance) { - return getContainerElement(element) === screen.container; +export function isInstanceMounted(instance: TestInstance) { + return getContainerInstance(instance) === screen.container; } /** @@ -36,7 +36,7 @@ export function getInstanceSiblings(instance: TestInstance): TestInstance[] { * @param instance The element start traversing from. * @returns The container element of the tree. */ -export function getContainerElement(instance: TestInstance) { +export function getContainerInstance(instance: TestInstance) { let current = instance; while (current.parent) { current = current.parent; diff --git a/src/helpers/find-all.ts b/src/helpers/find-all.ts index 00389e159..d88206821 100644 --- a/src/helpers/find-all.ts +++ b/src/helpers/find-all.ts @@ -1,4 +1,4 @@ -import type { HostElement } from 'test-renderer'; +import type { TestInstance } from 'test-renderer'; import { getConfig } from '../config'; import { isHiddenFromAccessibility } from './accessibility'; @@ -15,10 +15,10 @@ interface FindAllOptions { } export function findAll( - root: HostElement, - predicate: (element: HostElement) => boolean, + root: TestInstance, + predicate: (instance: TestInstance) => boolean, options: FindAllOptions = {}, -): HostElement[] { +): TestInstance[] { const { matchDeepestOnly } = options; const results = root.queryAll(predicate, { matchDeepestOnly }); @@ -29,6 +29,6 @@ export function findAll( return results; } - const cache = new WeakMap(); - return results.filter((element) => !isHiddenFromAccessibility(element, { cache })); + const cache = new WeakMap(); + return results.filter((instance) => !isHiddenFromAccessibility(instance, { cache })); } diff --git a/src/helpers/format-element.ts b/src/helpers/format-element.ts index 4dd33e4a3..e1c51eb84 100644 --- a/src/helpers/format-element.ts +++ b/src/helpers/format-element.ts @@ -1,6 +1,6 @@ import type { NewPlugin } from 'pretty-format'; import prettyFormat, { plugins } from 'pretty-format'; -import type { HostElement, JsonNode } from 'test-renderer'; +import type { JsonNode, TestInstance } from 'test-renderer'; import type { MapPropsFunction } from './map-props'; import { defaultMapProps } from './map-props'; @@ -17,19 +17,19 @@ export type FormatElementOptions = { }; /*** - * Format given element as a pretty-printed string. + * Format given instance as a pretty-printed string. * - * @param element Element to format. + * @param instance Instance to format. */ export function formatElement( - element: HostElement | null, + instance: TestInstance | null, { compact, highlight = true, mapProps = defaultMapProps }: FormatElementOptions = {}, ) { - if (element == null) { + if (instance == null) { return '(null)'; } - const { children, ...props } = element.props; + const { children, ...props } = instance.props; const childrenToDisplay = typeof children === 'string' ? [children] : undefined; return prettyFormat( @@ -37,7 +37,7 @@ export function formatElement( // This prop is needed persuade the prettyFormat that the element is // a JsonNode instance, so it is formatted as JSX. $$typeof: Symbol.for('react.test.json'), - type: `${element.type}`, + type: `${instance.type}`, props: mapProps ? mapProps(props) : props, children: childrenToDisplay, }, @@ -52,12 +52,12 @@ export function formatElement( ); } -export function formatElementList(elements: HostElement[], options?: FormatElementOptions) { - if (elements.length === 0) { +export function formatElementList(instances: TestInstance[], options?: FormatElementOptions) { + if (instances.length === 0) { return '(no elements)'; } - return elements.map((element) => formatElement(element, options)).join('\n'); + return instances.map((instance) => formatElement(instance, options)).join('\n'); } export function formatJson( diff --git a/src/helpers/host-component-names.ts b/src/helpers/host-component-names.ts index 4a25eae7d..2b7f59860 100644 --- a/src/helpers/host-component-names.ts +++ b/src/helpers/host-component-names.ts @@ -1,4 +1,4 @@ -import type { HostElement } from 'test-renderer'; +import type { TestInstance } from 'test-renderer'; export const HOST_TEXT_NAMES = ['Text', 'RCTText']; const HOST_TEXT_INPUT_NAMES = ['TextInput']; @@ -9,48 +9,48 @@ const HOST_MODAL_NAMES = ['Modal']; /** * Checks if the given element is a host Text element. - * @param element The element to check. + * @param instance The instance to check. */ -export function isHostText(element: HostElement | null) { - return typeof element?.type === 'string' && HOST_TEXT_NAMES.includes(element.type); +export function isHostText(instance: TestInstance | null) { + return typeof instance?.type === 'string' && HOST_TEXT_NAMES.includes(instance.type); } /** * Checks if the given element is a host TextInput element. - * @param element The element to check. + * @param instance The instance to check. */ -export function isHostTextInput(element: HostElement | null) { - return typeof element?.type === 'string' && HOST_TEXT_INPUT_NAMES.includes(element.type); +export function isHostTextInput(instance: TestInstance | null) { + return typeof instance?.type === 'string' && HOST_TEXT_INPUT_NAMES.includes(instance.type); } /** * Checks if the given element is a host Image element. - * @param element The element to check. + * @param instance The instance to check. */ -export function isHostImage(element: HostElement | null) { - return typeof element?.type === 'string' && HOST_IMAGE_NAMES.includes(element.type); +export function isHostImage(instance: TestInstance | null) { + return typeof instance?.type === 'string' && HOST_IMAGE_NAMES.includes(instance.type); } /** * Checks if the given element is a host Switch element. - * @param element The element to check. + * @param instance The instance to check. */ -export function isHostSwitch(element: HostElement | null) { - return typeof element?.type === 'string' && HOST_SWITCH_NAMES.includes(element.type); +export function isHostSwitch(instance: TestInstance | null) { + return typeof instance?.type === 'string' && HOST_SWITCH_NAMES.includes(instance.type); } /** * Checks if the given element is a host ScrollView element. - * @param element The element to check. + * @param instance The instance to check. */ -export function isHostScrollView(element: HostElement | null) { - return typeof element?.type === 'string' && HOST_SCROLL_VIEW_NAMES.includes(element.type); +export function isHostScrollView(instance: TestInstance | null) { + return typeof instance?.type === 'string' && HOST_SCROLL_VIEW_NAMES.includes(instance.type); } /** * Checks if the given element is a host Modal element. - * @param element The element to check. + * @param instance The instance to check. */ -export function isHostModal(element: HostElement | null) { - return typeof element?.type === 'string' && HOST_MODAL_NAMES.includes(element.type); +export function isHostModal(instance: TestInstance | null) { + return typeof instance?.type === 'string' && HOST_MODAL_NAMES.includes(instance.type); } diff --git a/src/helpers/matchers/match-accessibility-state.ts b/src/helpers/matchers/match-accessibility-state.ts index 896cdb1ea..bc13c35a2 100644 --- a/src/helpers/matchers/match-accessibility-state.ts +++ b/src/helpers/matchers/match-accessibility-state.ts @@ -1,4 +1,4 @@ -import type { HostElement } from 'test-renderer'; +import type { TestInstance } from 'test-renderer'; import { computeAriaBusy, @@ -20,20 +20,23 @@ export interface AccessibilityStateMatcher { expanded?: boolean; } -export function matchAccessibilityState(node: HostElement, matcher: AccessibilityStateMatcher) { - if (matcher.busy !== undefined && matcher.busy !== computeAriaBusy(node)) { +export function matchAccessibilityState( + instance: TestInstance, + matcher: AccessibilityStateMatcher, +) { + if (matcher.busy !== undefined && matcher.busy !== computeAriaBusy(instance)) { return false; } - if (matcher.checked !== undefined && matcher.checked !== computeAriaChecked(node)) { + if (matcher.checked !== undefined && matcher.checked !== computeAriaChecked(instance)) { return false; } - if (matcher.disabled !== undefined && matcher.disabled !== computeAriaDisabled(node)) { + if (matcher.disabled !== undefined && matcher.disabled !== computeAriaDisabled(instance)) { return false; } - if (matcher.expanded !== undefined && matcher.expanded !== computeAriaExpanded(node)) { + if (matcher.expanded !== undefined && matcher.expanded !== computeAriaExpanded(instance)) { return false; } - if (matcher.selected !== undefined && matcher.selected !== computeAriaSelected(node)) { + if (matcher.selected !== undefined && matcher.selected !== computeAriaSelected(instance)) { return false; } diff --git a/src/helpers/matchers/match-accessibility-value.ts b/src/helpers/matchers/match-accessibility-value.ts index 24141f205..7b5c1c8ef 100644 --- a/src/helpers/matchers/match-accessibility-value.ts +++ b/src/helpers/matchers/match-accessibility-value.ts @@ -1,4 +1,4 @@ -import type { HostElement } from 'test-renderer'; +import type { TestInstance } from 'test-renderer'; import type { TextMatch } from '../../matches'; import { computeAriaValue } from '../accessibility'; @@ -12,10 +12,10 @@ export interface AccessibilityValueMatcher { } export function matchAccessibilityValue( - node: HostElement, + instance: TestInstance, matcher: AccessibilityValueMatcher, ): boolean { - const value = computeAriaValue(node); + const value = computeAriaValue(instance); return ( (matcher.min === undefined || matcher.min === value?.min) && (matcher.max === undefined || matcher.max === value?.max) && diff --git a/src/helpers/matchers/match-label-text.ts b/src/helpers/matchers/match-label-text.ts index 22070d12a..310bc5981 100644 --- a/src/helpers/matchers/match-label-text.ts +++ b/src/helpers/matchers/match-label-text.ts @@ -1,13 +1,13 @@ -import type { HostElement } from 'test-renderer'; +import type { TestInstance } from 'test-renderer'; import type { TextMatch, TextMatchOptions } from '../../matches'; import { matches } from '../../matches'; import { computeAriaLabel } from '../accessibility'; export function matchAccessibilityLabel( - element: HostElement, + instance: TestInstance, expectedLabel: TextMatch, options?: TextMatchOptions, ) { - return matches(expectedLabel, computeAriaLabel(element), options?.normalizer, options?.exact); + return matches(expectedLabel, computeAriaLabel(instance), options?.normalizer, options?.exact); } diff --git a/src/helpers/matchers/match-text-content.ts b/src/helpers/matchers/match-text-content.ts index 8cc9d759f..04c1550b5 100644 --- a/src/helpers/matchers/match-text-content.ts +++ b/src/helpers/matchers/match-text-content.ts @@ -1,22 +1,22 @@ -import type { HostElement } from 'test-renderer'; +import type { TestInstance } from 'test-renderer'; import type { TextMatch, TextMatchOptions } from '../../matches'; import { matches } from '../../matches'; import { getTextContent } from '../text-content'; /** - * Matches the given node's text content against string or regex matcher. + * Matches the given instance's text content against string or regex matcher. * - * @param node - Node which text content will be matched + * @param instance - Instance which text content will be matched * @param text - The string or regex to match. - * @returns - Whether the node's text content matches the given string or regex. + * @returns - Whether the instance's text content matches the given string or regex. */ export function matchTextContent( - node: HostElement, + instance: TestInstance, text: TextMatch, options: TextMatchOptions = {}, ) { - const textContent = getTextContent(node); + const textContent = getTextContent(instance); const { exact, normalizer } = options; return matches(text, textContent, normalizer, exact); } diff --git a/src/helpers/pointer-events.ts b/src/helpers/pointer-events.ts index e7114c15a..1f7abe6e8 100644 --- a/src/helpers/pointer-events.ts +++ b/src/helpers/pointer-events.ts @@ -1,5 +1,5 @@ import { StyleSheet } from 'react-native'; -import type { HostElement } from 'test-renderer'; +import type { TestInstance } from 'test-renderer'; /** * pointerEvents controls whether the View can be the target of touch events. @@ -8,10 +8,10 @@ import type { HostElement } from 'test-renderer'; * 'box-none': The View is never the target of touch events but its subviews can be * 'box-only': The view can be the target of touch events but its subviews cannot be * see the official react native doc https://reactnative.dev/docs/view#pointerevents */ -export const isPointerEventEnabled = (element: HostElement, isParent?: boolean): boolean => { +export const isPointerEventEnabled = (instance: TestInstance, isParent?: boolean): boolean => { // Check both props.pointerEvents and props.style.pointerEvents const pointerEvents = - element?.props.pointerEvents ?? StyleSheet.flatten(element?.props.style)?.pointerEvents; + instance?.props.pointerEvents ?? StyleSheet.flatten(instance?.props.style)?.pointerEvents; const parentCondition = isParent ? pointerEvents === 'box-only' : pointerEvents === 'box-none'; @@ -19,9 +19,9 @@ export const isPointerEventEnabled = (element: HostElement, isParent?: boolean): return false; } - if (!element.parent) { + if (!instance.parent) { return true; } - return isPointerEventEnabled(element.parent, true); + return isPointerEventEnabled(instance.parent, true); }; diff --git a/src/helpers/text-content.ts b/src/helpers/text-content.ts index aa6277935..ee6f368ae 100644 --- a/src/helpers/text-content.ts +++ b/src/helpers/text-content.ts @@ -1,16 +1,16 @@ -import type { HostElement } from 'test-renderer'; +import type { TestInstance } from 'test-renderer'; -export function getTextContent(element: HostElement | string | null): string { - if (!element) { +export function getTextContent(instance: TestInstance | string | null): string { + if (!instance) { return ''; } - if (typeof element === 'string') { - return element; + if (typeof instance === 'string') { + return instance; } const result: string[] = []; - element.children?.forEach((child) => { + instance.children?.forEach((child) => { result.push(getTextContent(child)); }); diff --git a/src/helpers/text-input.ts b/src/helpers/text-input.ts index e33b78d89..2d8688b13 100644 --- a/src/helpers/text-input.ts +++ b/src/helpers/text-input.ts @@ -1,21 +1,21 @@ -import type { HostElement } from 'test-renderer'; +import type { TestInstance } from 'test-renderer'; import { nativeState } from '../native-state'; import { isHostTextInput } from './host-component-names'; -export function isEditableTextInput(element: HostElement) { - return isHostTextInput(element) && element.props.editable !== false; +export function isEditableTextInput(instance: TestInstance) { + return isHostTextInput(instance) && instance.props.editable !== false; } -export function getTextInputValue(element: HostElement) { - if (!isHostTextInput(element)) { - throw new Error(`Element is not a "TextInput", but it has type "${element.type}".`); +export function getTextInputValue(instance: TestInstance) { + if (!isHostTextInput(instance)) { + throw new Error(`Element is not a "TextInput", but it has type "${instance.type}".`); } return ( - element.props.value ?? - nativeState.valueForElement.get(element) ?? - element.props.defaultValue ?? + instance.props.value ?? + nativeState.valueForInstance.get(instance) ?? + instance.props.defaultValue ?? '' ); } diff --git a/src/matchers/__tests__/to-be-busy.test.tsx b/src/matchers/__tests__/to-be-busy.test.tsx index cdd00bc7d..9bf579525 100644 --- a/src/matchers/__tests__/to-be-busy.test.tsx +++ b/src/matchers/__tests__/to-be-busy.test.tsx @@ -34,9 +34,9 @@ test('toBeBusy() error messages', async () => { expect(() => expect(screen.getByTestId('busy')).not.toBeBusy()) .toThrowErrorMatchingInlineSnapshot(` - "expect(element).not.toBeBusy() + "expect(instance).not.toBeBusy() - Received element is busy: + Received instance is busy: { expect(() => expect(screen.getByTestId('busy-aria')).not.toBeBusy()) .toThrowErrorMatchingInlineSnapshot(` - "expect(element).not.toBeBusy() + "expect(instance).not.toBeBusy() - Received element is busy: + Received instance is busy: { expect(() => expect(screen.getByTestId('not-busy')).toBeBusy()) .toThrowErrorMatchingInlineSnapshot(` - "expect(element).toBeBusy() + "expect(instance).toBeBusy() - Received element is not busy: + Received instance is not busy: { expect(() => expect(screen.getByTestId('not-busy-aria')).toBeBusy()) .toThrowErrorMatchingInlineSnapshot(` - "expect(element).toBeBusy() + "expect(instance).toBeBusy() - Received element is not busy: + Received instance is not busy: { expect(() => expect(screen.getByTestId('default')).toBeBusy()) .toThrowErrorMatchingInlineSnapshot(` - "expect(element).toBeBusy() + "expect(instance).toBeBusy() - Received element is not busy: + Received instance is not busy: " diff --git a/src/matchers/__tests__/to-be-checked.test.tsx b/src/matchers/__tests__/to-be-checked.test.tsx index 4020fa450..623ef6ce9 100644 --- a/src/matchers/__tests__/to-be-checked.test.tsx +++ b/src/matchers/__tests__/to-be-checked.test.tsx @@ -47,9 +47,9 @@ test('toBeCheck() with Switch', async () => { expect(defaultView).not.toBeChecked(); expect(() => expect(checked).not.toBeChecked()).toThrowErrorMatchingInlineSnapshot(` - "expect(element).not.toBeChecked() + "expect(instance).not.toBeChecked() - Received element is checked: + Received instance is checked: { />" `); expect(() => expect(unchecked).toBeChecked()).toThrowErrorMatchingInlineSnapshot(` - "expect(element).toBeChecked() + "expect(instance).toBeChecked() - Received element is not checked: + Received instance is not checked: { />" `); expect(() => expect(defaultView).toBeChecked()).toThrowErrorMatchingInlineSnapshot(` - "expect(element).toBeChecked() + "expect(instance).toBeChecked() - Received element is not checked: + Received instance is not checked: { expect(defaultView).not.toBeChecked(); expect(() => expect(checked).not.toBeChecked()).toThrowErrorMatchingInlineSnapshot(` - "expect(element).not.toBeChecked() + "expect(instance).not.toBeChecked() - Received element is checked: + Received instance is checked: { />" `); expect(() => expect(unchecked).toBeChecked()).toThrowErrorMatchingInlineSnapshot(` - "expect(element).toBeChecked() + "expect(instance).toBeChecked() - Received element is not checked: + Received instance is not checked: { />" `); expect(() => expect(mixed).toBeChecked()).toThrowErrorMatchingInlineSnapshot(` - "expect(element).toBeChecked() + "expect(instance).toBeChecked() - Received element is not checked: + Received instance is not checked: { />" `); expect(() => expect(defaultView).toBeChecked()).toThrowErrorMatchingInlineSnapshot(` - "expect(element).toBeChecked() + "expect(instance).toBeChecked() - Received element is not checked: + Received instance is not checked: { expect(defaultView).not.toBeChecked(); expect(() => expect(checked).not.toBeChecked()).toThrowErrorMatchingInlineSnapshot(` - "expect(element).not.toBeChecked() + "expect(instance).not.toBeChecked() - Received element is checked: + Received instance is checked: { />" `); expect(() => expect(unchecked).toBeChecked()).toThrowErrorMatchingInlineSnapshot(` - "expect(element).toBeChecked() + "expect(instance).toBeChecked() - Received element is not checked: + Received instance is not checked: { />" `); expect(() => expect(defaultView).toBeChecked()).toThrowErrorMatchingInlineSnapshot(` - "expect(element).toBeChecked() + "expect(instance).toBeChecked() - Received element is not checked: + Received instance is not checked: { expect(defaultView).not.toBeChecked(); expect(() => expect(checked).not.toBeChecked()).toThrowErrorMatchingInlineSnapshot(` - "expect(element).not.toBeChecked() + "expect(instance).not.toBeChecked() - Received element is checked: + Received instance is checked: { />" `); expect(() => expect(unchecked).toBeChecked()).toThrowErrorMatchingInlineSnapshot(` - "expect(element).toBeChecked() + "expect(instance).toBeChecked() - Received element is not checked: + Received instance is not checked: { />" `); expect(() => expect(defaultView).toBeChecked()).toThrowErrorMatchingInlineSnapshot(` - "expect(element).toBeChecked() + "expect(instance).toBeChecked() - Received element is not checked: + Received instance is not checked: { const unchecked = screen.getByTestId('adjustable-unchecked'); expect(() => expect(checked).toBeChecked()).toThrowErrorMatchingInlineSnapshot( - `"toBeChecked() works only on host "Switch" elements or accessibility elements with "checkbox", "radio" or "switch" role."`, + `"toBeChecked() works only on host "Switch" instances or accessible instance with "checkbox", "radio" or "switch" role."`, ); expect(() => expect(unchecked).not.toBeChecked()).toThrowErrorMatchingInlineSnapshot( - `"toBeChecked() works only on host "Switch" elements or accessibility elements with "checkbox", "radio" or "switch" role."`, + `"toBeChecked() works only on host "Switch" instances or accessible instance with "checkbox", "radio" or "switch" role."`, ); }); @@ -273,6 +273,6 @@ test('throws error for non-accessibility element', async () => { const view = screen.getByTestId('test'); expect(() => expect(view).toBeChecked()).toThrowErrorMatchingInlineSnapshot( - `"toBeChecked() works only on host "Switch" elements or accessibility elements with "checkbox", "radio" or "switch" role."`, + `"toBeChecked() works only on host "Switch" instances or accessible instance with "checkbox", "radio" or "switch" role."`, ); }); diff --git a/src/matchers/__tests__/to-be-disabled.test.tsx b/src/matchers/__tests__/to-be-disabled.test.tsx index da7916665..ed3602acc 100644 --- a/src/matchers/__tests__/to-be-disabled.test.tsx +++ b/src/matchers/__tests__/to-be-disabled.test.tsx @@ -39,9 +39,9 @@ test('toBeDisabled()/toBeEnabled() supports basic case', async () => { expect(() => expect(screen.getByTestId('disabled-parent')).not.toBeDisabled()) .toThrowErrorMatchingInlineSnapshot(` - "expect(element).not.toBeDisabled() + "expect(instance).not.toBeDisabled() - Received element is disabled: + Received instance is disabled: { expect(() => expect(screen.getByTestId('enabled-view')).toBeDisabled()) .toThrowErrorMatchingInlineSnapshot(` - "expect(element).toBeDisabled() + "expect(instance).toBeDisabled() - Received element is not disabled: + Received instance is not disabled: " @@ -67,9 +67,9 @@ test('toBeDisabled()/toBeEnabled() supports basic case', async () => { expect(() => expect(screen.getByTestId('disabled-parent')).toBeEnabled()) .toThrowErrorMatchingInlineSnapshot(` - "expect(element).toBeEnabled() + "expect(instance).toBeEnabled() - Received element is not enabled: + Received instance is not enabled: { expect(() => expect(screen.getByTestId('enabled-view')).not.toBeEnabled()) .toThrowErrorMatchingInlineSnapshot(` - "expect(element).not.toBeEnabled() + "expect(instance).not.toBeEnabled() - Received element is enabled: + Received instance is enabled: " @@ -103,9 +103,9 @@ test('toBeDisabled()/toBeEnabled() supports Pressable with "disabled" prop', asy expect(title).not.toBeEnabled(); expect(() => expect(pressable).toBeEnabled()).toThrowErrorMatchingInlineSnapshot(` - "expect(element).toBeEnabled() + "expect(instance).toBeEnabled() - Received element is not enabled: + Received instance is not enabled: expect(pressable).not.toBeDisabled()).toThrowErrorMatchingInlineSnapshot(` - "expect(element).not.toBeDisabled() + "expect(instance).not.toBeDisabled() - Received element is disabled: + Received instance is disabled: expect(title).toBeEnabled()).toThrowErrorMatchingInlineSnapshot(` - "expect(element).toBeEnabled() + "expect(instance).toBeEnabled() - Received element is not enabled: + Received instance is not enabled: Button " `); expect(() => expect(title).not.toBeDisabled()).toThrowErrorMatchingInlineSnapshot(` - "expect(element).not.toBeDisabled() + "expect(instance).not.toBeDisabled() - Received element is disabled: + Received instance is disabled: Button " diff --git a/src/matchers/__tests__/to-be-empty-element.test.tsx b/src/matchers/__tests__/to-be-empty-element.test.tsx index 66942ab04..ef471a064 100644 --- a/src/matchers/__tests__/to-be-empty-element.test.tsx +++ b/src/matchers/__tests__/to-be-empty-element.test.tsx @@ -19,7 +19,7 @@ test('toBeEmptyElement() base case', async () => { const empty = screen.getByTestId('empty'); expect(empty).toBeEmptyElement(); expect(() => expect(empty).not.toBeEmptyElement()).toThrowErrorMatchingInlineSnapshot(` - "expect(element).not.toBeEmptyElement() + "expect(instance).not.toBeEmptyElement() Received: (no elements)" @@ -28,7 +28,7 @@ test('toBeEmptyElement() base case', async () => { const notEmpty = screen.getByTestId('not-empty'); expect(notEmpty).not.toBeEmptyElement(); expect(() => expect(notEmpty).toBeEmptyElement()).toThrowErrorMatchingInlineSnapshot(` - "expect(element).toBeEmptyElement() + "expect(instance).toBeEmptyElement() Received: { const view = screen.getByTestId('view'); expect(view).toBeEmptyElement(); expect(() => expect(view).not.toBeEmptyElement()).toThrowErrorMatchingInlineSnapshot(` - "expect(element).not.toBeEmptyElement() + "expect(instance).not.toBeEmptyElement() Received: (no elements)" @@ -62,7 +62,7 @@ test('toBeEmptyElement() on null element', () => { }).toThrowErrorMatchingInlineSnapshot(` "expect(received).toBeEmptyElement() - received value must be a host element. + received value must be a host instance. Received has value: null" `); }); diff --git a/src/matchers/__tests__/to-be-expanded.test.tsx b/src/matchers/__tests__/to-be-expanded.test.tsx index e24c77d5c..f2cbde3f1 100644 --- a/src/matchers/__tests__/to-be-expanded.test.tsx +++ b/src/matchers/__tests__/to-be-expanded.test.tsx @@ -34,9 +34,9 @@ test('toBeExpanded() error messages', async () => { expect(() => expect(screen.getByTestId('expanded')).not.toBeExpanded()) .toThrowErrorMatchingInlineSnapshot(` - "expect(element).not.toBeExpanded() + "expect(instance).not.toBeExpanded() - Received element is expanded: + Received instance is expanded: { expect(() => expect(screen.getByTestId('expanded-aria')).not.toBeExpanded()) .toThrowErrorMatchingInlineSnapshot(` - "expect(element).not.toBeExpanded() + "expect(instance).not.toBeExpanded() - Received element is expanded: + Received instance is expanded: { expect(() => expect(screen.getByTestId('not-expanded')).toBeExpanded()) .toThrowErrorMatchingInlineSnapshot(` - "expect(element).toBeExpanded() + "expect(instance).toBeExpanded() - Received element is not expanded: + Received instance is not expanded: { expect(() => expect(screen.getByTestId('not-expanded-aria')).toBeExpanded()) .toThrowErrorMatchingInlineSnapshot(` - "expect(element).toBeExpanded() + "expect(instance).toBeExpanded() - Received element is not expanded: + Received instance is not expanded: { expect(() => expect(screen.getByTestId('default')).toBeExpanded()) .toThrowErrorMatchingInlineSnapshot(` - "expect(element).toBeExpanded() + "expect(instance).toBeExpanded() - Received element is not expanded: + Received instance is not expanded: " @@ -126,9 +126,9 @@ test('toBeCollapsed() error messages', async () => { expect(() => expect(screen.getByTestId('expanded')).toBeCollapsed()) .toThrowErrorMatchingInlineSnapshot(` - "expect(element).toBeCollapsed() + "expect(instance).toBeCollapsed() - Received element is not collapsed: + Received instance is not collapsed: { expect(() => expect(screen.getByTestId('expanded-aria')).toBeCollapsed()) .toThrowErrorMatchingInlineSnapshot(` - "expect(element).toBeCollapsed() + "expect(instance).toBeCollapsed() - Received element is not collapsed: + Received instance is not collapsed: { expect(() => expect(screen.getByTestId('not-expanded')).not.toBeCollapsed()) .toThrowErrorMatchingInlineSnapshot(` - "expect(element).not.toBeCollapsed() + "expect(instance).not.toBeCollapsed() - Received element is collapsed: + Received instance is collapsed: { expect(() => expect(screen.getByTestId('not-expanded-aria')).not.toBeCollapsed()) .toThrowErrorMatchingInlineSnapshot(` - "expect(element).not.toBeCollapsed() + "expect(instance).not.toBeCollapsed() - Received element is collapsed: + Received instance is collapsed: { expect(() => expect(screen.getByTestId('default')).toBeCollapsed()) .toThrowErrorMatchingInlineSnapshot(` - "expect(element).toBeCollapsed() + "expect(instance).toBeCollapsed() - Received element is not collapsed: + Received instance is not collapsed: " diff --git a/src/matchers/__tests__/to-be-on-the-screen.test.tsx b/src/matchers/__tests__/to-be-on-the-screen.test.tsx index dd044a178..22e082196 100644 --- a/src/matchers/__tests__/to-be-on-the-screen.test.tsx +++ b/src/matchers/__tests__/to-be-on-the-screen.test.tsx @@ -23,9 +23,9 @@ test('toBeOnTheScreen() on attached element', async () => { const element = screen.getByTestId('test'); expect(element).toBeOnTheScreen(); expect(() => expect(element).not.toBeOnTheScreen()).toThrowErrorMatchingInlineSnapshot(` - "expect(element).not.toBeOnTheScreen() + "expect(instance).not.toBeOnTheScreen() - expected element tree not to contain element, but found + expected instance tree not to contain instance, but found " @@ -52,9 +52,9 @@ test('toBeOnTheScreen() on detached element', async () => { expect(element).toBeTruthy(); expect(element).not.toBeOnTheScreen(); expect(() => expect(element).toBeOnTheScreen()).toThrowErrorMatchingInlineSnapshot(` - "expect(element).toBeOnTheScreen() + "expect(instance).toBeOnTheScreen() - element could not be found in the element tree" + instance could not be found in the instance tree" `); }); @@ -63,7 +63,7 @@ test('toBeOnTheScreen() on null element', () => { expect(() => expect(null).toBeOnTheScreen()).toThrowErrorMatchingInlineSnapshot(` "expect(received).toBeOnTheScreen() - received value must be a host element. + received value must be a host instance. Received has value: null" `); }); diff --git a/src/matchers/__tests__/to-be-partially-checked.test.tsx b/src/matchers/__tests__/to-be-partially-checked.test.tsx index edb527094..23f2c8381 100644 --- a/src/matchers/__tests__/to-be-partially-checked.test.tsx +++ b/src/matchers/__tests__/to-be-partially-checked.test.tsx @@ -44,9 +44,9 @@ test('toBePartiallyCheck() with checkbox role', async () => { expect(defaultView).not.toBePartiallyChecked(); expect(() => expect(mixed).not.toBePartiallyChecked()).toThrowErrorMatchingInlineSnapshot(` - "expect(element).not.toBePartiallyChecked() + "expect(instance).not.toBePartiallyChecked() - Received element is partially checked: + Received instance is partially checked: { `); expect(() => expect(checked).toBePartiallyChecked()).toThrowErrorMatchingInlineSnapshot(` - "expect(element).toBePartiallyChecked() + "expect(instance).toBePartiallyChecked() - Received element is not partially checked: + Received instance is not partially checked: { />" `); expect(() => expect(defaultView).toBePartiallyChecked()).toThrowErrorMatchingInlineSnapshot(` - "expect(element).toBePartiallyChecked() + "expect(instance).toBePartiallyChecked() - Received element is not partially checked: + Received instance is not partially checked: { expect(() => expect(screen.getByTestId('selected')).not.toBeSelected()) .toThrowErrorMatchingInlineSnapshot(` - "expect(element).not.toBeSelected() + "expect(instance).not.toBeSelected() - Received element is selected + Received instance is selected { expect(() => expect(screen.getByTestId('selected-aria')).not.toBeSelected()) .toThrowErrorMatchingInlineSnapshot(` - "expect(element).not.toBeSelected() + "expect(instance).not.toBeSelected() - Received element is selected + Received instance is selected { expect(() => expect(screen.getByTestId('not-selected')).toBeSelected()) .toThrowErrorMatchingInlineSnapshot(` - "expect(element).toBeSelected() + "expect(instance).toBeSelected() - Received element is not selected + Received instance is not selected { expect(() => expect(screen.getByTestId('not-selected-aria')).toBeSelected()) .toThrowErrorMatchingInlineSnapshot(` - "expect(element).toBeSelected() + "expect(instance).toBeSelected() - Received element is not selected + Received instance is not selected { expect(() => expect(screen.getByTestId('default')).toBeSelected()) .toThrowErrorMatchingInlineSnapshot(` - "expect(element).toBeSelected() + "expect(instance).toBeSelected() - Received element is not selected + Received instance is not selected " diff --git a/src/matchers/__tests__/to-be-visible.test.tsx b/src/matchers/__tests__/to-be-visible.test.tsx index 93d8848a5..7460ab2e7 100644 --- a/src/matchers/__tests__/to-be-visible.test.tsx +++ b/src/matchers/__tests__/to-be-visible.test.tsx @@ -9,9 +9,9 @@ test('toBeVisible() on empty view', async () => { const view = screen.getByTestId('view'); expect(view).toBeVisible(); expect(() => expect(view).not.toBeVisible()).toThrowErrorMatchingInlineSnapshot(` - "expect(element).not.toBeVisible() + "expect(instance).not.toBeVisible() - Received element is visible: + Received instance is visible: " @@ -24,9 +24,9 @@ test('toBeVisible() on view with opacity', async () => { const view = screen.getByTestId('view'); expect(view).toBeVisible(); expect(() => expect(view).not.toBeVisible()).toThrowErrorMatchingInlineSnapshot(` - "expect(element).not.toBeVisible() + "expect(instance).not.toBeVisible() - Received element is visible: + Received instance is visible: " @@ -39,9 +39,9 @@ test('toBeVisible() on view with 0 opacity', async () => { const view = screen.getByTestId('view'); expect(view).not.toBeVisible(); expect(() => expect(view).toBeVisible()).toThrowErrorMatchingInlineSnapshot(` - "expect(element).toBeVisible() + "expect(instance).toBeVisible() - Received element is not visible: + Received instance is not visible: { const view = screen.getByTestId('view', { includeHiddenElements: true }); expect(view).not.toBeVisible(); expect(() => expect(view).toBeVisible()).toThrowErrorMatchingInlineSnapshot(` - "expect(element).toBeVisible() + "expect(instance).toBeVisible() - Received element is not visible: + Received instance is not visible: { const view = screen.getByTestId('view'); expect(view).not.toBeVisible(); expect(() => expect(view).toBeVisible()).toThrowErrorMatchingInlineSnapshot(` - "expect(element).toBeVisible() + "expect(instance).toBeVisible() - Received element is not visible: + Received instance is not visible: " @@ -106,9 +106,9 @@ test('toBeVisible() on ancestor view with display "none"', async () => { const view = screen.getByTestId('view', { includeHiddenElements: true }); expect(view).not.toBeVisible(); expect(() => expect(view).toBeVisible()).toThrowErrorMatchingInlineSnapshot(` - "expect(element).toBeVisible() + "expect(instance).toBeVisible() - Received element is not visible: + Received instance is not visible: " @@ -121,9 +121,9 @@ test('toBeVisible() on empty Modal', async () => { const modal = screen.getByTestId('modal'); expect(modal).toBeVisible(); expect(() => expect(modal).not.toBeVisible()).toThrowErrorMatchingInlineSnapshot(` - "expect(element).not.toBeVisible() + "expect(instance).not.toBeVisible() - Received element is visible: + Received instance is visible: " @@ -158,7 +158,7 @@ test('toBeVisible() on not visible Modal', async () => { .toThrowErrorMatchingInlineSnapshot(` "expect(received).toBeVisible() - received value must be a host element. + received value must be a host instance. Received has value: null" `); }); @@ -229,30 +229,30 @@ test('toBeVisible() on view within inaccessible view (Android)', async () => { test('toBeVisible() on null elements', () => { expect(null).not.toBeVisible(); expect(() => expect(null).toBeVisible()).toThrowErrorMatchingInlineSnapshot(` - "expect(received).toBeVisible() + "expect(received).toBeVisible() - received value must be a host element. - Received has value: null" - `); + received value must be a host instance. + Received has value: null" + `); }); test('toBeVisible() on non-React elements', () => { expect(() => expect({ name: 'Non-React element' }).not.toBeVisible()) .toThrowErrorMatchingInlineSnapshot(` - "expect(received).not.toBeVisible() + "expect(received).not.toBeVisible() - received value must be a host element. - Received has type: object - Received has value: {"name": "Non-React element"}" - `); + received value must be a host instance. + Received has type: object + Received has value: {"name": "Non-React element"}" + `); expect(() => expect(true).not.toBeVisible()).toThrowErrorMatchingInlineSnapshot(` - "expect(received).not.toBeVisible() + "expect(received).not.toBeVisible() - received value must be a host element. - Received has type: boolean - Received has value: true" - `); + received value must be a host instance. + Received has type: boolean + Received has value: true" + `); }); test('toBeVisible() does not throw on invalid style', async () => { diff --git a/src/matchers/__tests__/to-contain-element.test.tsx b/src/matchers/__tests__/to-contain-element.test.tsx index d041b8523..024224fe5 100644 --- a/src/matchers/__tests__/to-contain-element.test.tsx +++ b/src/matchers/__tests__/to-contain-element.test.tsx @@ -16,7 +16,7 @@ test('toContainElement() supports basic case', async () => { expect(parent).toContainElement(child); expect(() => expect(parent).not.toContainElement(child)).toThrowErrorMatchingInlineSnapshot(` - "expect(container).not.toContainElement(element) + "expect(container).not.toContainElement(instance) { expect(view2).not.toContainElement(view1); expect(() => expect(view1).toContainElement(view2)).toThrowErrorMatchingInlineSnapshot(` - "expect(container).toContainElement(element) + "expect(container).toContainElement(instance) { expect(() => expect(null).toContainElement(view)).toThrowErrorMatchingInlineSnapshot(` "expect(received).toContainElement() - received value must be a host element. + received value must be a host instance. Received has value: null" `); }); @@ -82,7 +82,7 @@ test('toContainElement() handles null element', async () => { expect(view).not.toContainElement(null); expect(() => expect(view).toContainElement(null)).toThrowErrorMatchingInlineSnapshot(` - "expect(container).toContainElement(element) + "expect(container).toContainElement(instance) { .toThrowErrorMatchingInlineSnapshot(` "expect(received).not.toContainElement() - received value must be a host element. + received value must be a host instance. Received has type: object Received has value: {"name": "non-element"}" `); expect(() => expect(true).not.toContainElement(view)).toThrowErrorMatchingInlineSnapshot(` - "expect(received).not.toContainElement() + "expect(received).not.toContainElement() - received value must be a host element. - Received has type: boolean - Received has value: true" - `); + received value must be a host instance. + Received has type: boolean + Received has value: true" + `); }); test('toContainElement() handles non-element element', async () => { @@ -129,7 +129,7 @@ test('toContainElement() handles non-element element', async () => { ).toThrowErrorMatchingInlineSnapshot(` "expect(received).not.toContainElement() - received value must be a host element. + received value must be a host instance. Received has type: object Received has value: {"name": "non-element"}" `); diff --git a/src/matchers/__tests__/to-have-accessibility-value.test.tsx b/src/matchers/__tests__/to-have-accessibility-value.test.tsx index 5dab7cb9c..e1f807043 100644 --- a/src/matchers/__tests__/to-have-accessibility-value.test.tsx +++ b/src/matchers/__tests__/to-have-accessibility-value.test.tsx @@ -119,21 +119,21 @@ describe('toHaveAccessibilityValue', () => { expect(() => expect(screen.root).toHaveAccessibilityValue({ min: 10 })) .toThrowErrorMatchingInlineSnapshot(` - "expect(element).toHaveAccessibilityValue({"min": 10}) + "expect(instance).toHaveAccessibilityValue({"min": 10}) - Expected the element to have accessibility value: + Expected the instance to have accessibility value: {"min": 10} - Received element with accessibility value: + Received instance with accessibility value: {"max": 100, "min": 0, "now": 33, "text": "Hello"}" `); expect(() => expect(screen.root).not.toHaveAccessibilityValue({ min: 0 })) .toThrowErrorMatchingInlineSnapshot(` - "expect(element).not.toHaveAccessibilityValue({"min": 0}) + "expect(instance).not.toHaveAccessibilityValue({"min": 0}) - Expected the element not to have accessibility value: + Expected the instance not to have accessibility value: {"min": 0} - Received element with accessibility value: + Received instance with accessibility value: {"max": 100, "min": 0, "now": 33, "text": "Hello"}" `); }); @@ -143,21 +143,21 @@ describe('toHaveAccessibilityValue', () => { expect(() => expect(screen.root).toHaveAccessibilityValue({ min: 30 })) .toThrowErrorMatchingInlineSnapshot(` - "expect(element).toHaveAccessibilityValue({"min": 30}) + "expect(instance).toHaveAccessibilityValue({"min": 30}) - Expected the element to have accessibility value: + Expected the instance to have accessibility value: {"min": 30} - Received element with accessibility value: + Received instance with accessibility value: {"now": 33, "text": "Hello"}" `); expect(() => expect(screen.root).not.toHaveAccessibilityValue({ now: 33 })) .toThrowErrorMatchingInlineSnapshot(` - "expect(element).not.toHaveAccessibilityValue({"now": 33}) + "expect(instance).not.toHaveAccessibilityValue({"now": 33}) - Expected the element not to have accessibility value: + Expected the instance not to have accessibility value: {"now": 33} - Received element with accessibility value: + Received instance with accessibility value: {"now": 33, "text": "Hello"}" `); }); diff --git a/src/matchers/__tests__/to-have-accessible-name.test.tsx b/src/matchers/__tests__/to-have-accessible-name.test.tsx index 406a8074c..3e20f1961 100644 --- a/src/matchers/__tests__/to-have-accessible-name.test.tsx +++ b/src/matchers/__tests__/to-have-accessible-name.test.tsx @@ -94,9 +94,9 @@ test('toHaveAccessibleName() supports calling without expected name', async () = const element = screen.getByTestId('view'); expect(element).toHaveAccessibleName(); expect(() => expect(element).not.toHaveAccessibleName()).toThrowErrorMatchingInlineSnapshot(` - "expect(element).not.toHaveAccessibleName() + "expect(instance).not.toHaveAccessibleName() - Expected element not to have accessible name: + Expected instance not to have accessible name: undefined Received: Test label" @@ -109,9 +109,9 @@ test('toHaveAccessibleName() handles a view without name when called without exp expect(element).not.toHaveAccessibleName(); expect(() => expect(element).toHaveAccessibleName()).toThrowErrorMatchingInlineSnapshot(` - "expect(element).toHaveAccessibleName() + "expect(instance).toHaveAccessibleName() - Expected element to have accessible name: + Expected instance to have accessible name: undefined Received: " @@ -119,21 +119,21 @@ test('toHaveAccessibleName() handles a view without name when called without exp }); it('toHaveAccessibleName() rejects non-host element', () => { - const nonElement = 'This is not a HostElement'; + const nonElement = 'This is not a TestInstance'; expect(() => expect(nonElement).toHaveAccessibleName()).toThrowErrorMatchingInlineSnapshot(` "expect(received).toHaveAccessibleName() - received value must be a host element. + received value must be a host instance. Received has type: string - Received has value: "This is not a HostElement"" + Received has value: "This is not a TestInstance"" `); expect(() => expect(nonElement).not.toHaveAccessibleName()).toThrowErrorMatchingInlineSnapshot(` "expect(received).not.toHaveAccessibleName() - received value must be a host element. + received value must be a host instance. Received has type: string - Received has value: "This is not a HostElement"" + Received has value: "This is not a TestInstance"" `); }); diff --git a/src/matchers/__tests__/to-have-display-value.test.tsx b/src/matchers/__tests__/to-have-display-value.test.tsx index e4d4cc7c4..bb424ec75 100644 --- a/src/matchers/__tests__/to-have-display-value.test.tsx +++ b/src/matchers/__tests__/to-have-display-value.test.tsx @@ -18,9 +18,9 @@ test('toHaveDisplayValue() on matching display value', async () => { expect(() => expect(textInput).not.toHaveDisplayValue('test')) .toThrowErrorMatchingInlineSnapshot(` - "expect(element).not.toHaveDisplayValue() + "expect(instance).not.toHaveDisplayValue() - Expected element not to have display value: + Expected instance not to have display value: test Received: test" @@ -35,9 +35,9 @@ test('toHaveDisplayValue() on non-matching display value', async () => { expect(() => expect(textInput).toHaveDisplayValue('non-test')) .toThrowErrorMatchingInlineSnapshot(` - "expect(element).toHaveDisplayValue() + "expect(instance).toHaveDisplayValue() - Expected element to have display value: + Expected instance to have display value: non-test Received: test" @@ -49,7 +49,7 @@ test("toHaveDisplayValue() on non-'TextInput' elements", async () => { const view = screen.getByTestId('view'); expect(() => expect(view).toHaveDisplayValue('test')).toThrowErrorMatchingInlineSnapshot( - `"toHaveDisplayValue() works only with host "TextInput" elements. Passed element has type "View"."`, + `"toHaveDisplayValue() works only with host "TextInput" instances. Passed instance has type "View"."`, ); }); diff --git a/src/matchers/__tests__/to-have-prop.test.tsx b/src/matchers/__tests__/to-have-prop.test.tsx index da1ddd8de..a42779443 100644 --- a/src/matchers/__tests__/to-have-prop.test.tsx +++ b/src/matchers/__tests__/to-have-prop.test.tsx @@ -36,36 +36,36 @@ test('toHaveProp() error messages', async () => { const view = screen.getByTestId('view'); expect(() => expect(view).toHaveProp('accessible')).toThrowErrorMatchingInlineSnapshot(` - "expect(element).toHaveProp("accessible") + "expect(instance).toHaveProp("accessible") - Expected element to have prop: + Expected instance to have prop: accessible Received: undefined" `); expect(() => expect(view).toHaveProp('accessible', true)).toThrowErrorMatchingInlineSnapshot(` - "expect(element).toHaveProp("accessible", true) + "expect(instance).toHaveProp("accessible", true) - Expected element to have prop: + Expected instance to have prop: accessible={true} Received: undefined" `); expect(() => expect(view).not.toHaveProp('collapsable')).toThrowErrorMatchingInlineSnapshot(` - "expect(element).not.toHaveProp("collapsable") + "expect(instance).not.toHaveProp("collapsable") - Expected element not to have prop: + Expected instance not to have prop: collapsable Received: collapsable={false}" `); expect(() => expect(view).toHaveProp('collapsable', true)).toThrowErrorMatchingInlineSnapshot(` - "expect(element).toHaveProp("collapsable", true) + "expect(instance).toHaveProp("collapsable", true) - Expected element to have prop: + Expected instance to have prop: collapsable={true} Received: collapsable={false}" @@ -73,9 +73,9 @@ test('toHaveProp() error messages', async () => { expect(() => expect(view).not.toHaveProp('collapsable', false)) .toThrowErrorMatchingInlineSnapshot(` - "expect(element).not.toHaveProp("collapsable", false) + "expect(instance).not.toHaveProp("collapsable", false) - Expected element not to have prop: + Expected instance not to have prop: collapsable={false} Received: collapsable={false}" diff --git a/src/matchers/__tests__/to-have-style.test.tsx b/src/matchers/__tests__/to-have-style.test.tsx index 436799bcf..928c96f82 100644 --- a/src/matchers/__tests__/to-have-style.test.tsx +++ b/src/matchers/__tests__/to-have-style.test.tsx @@ -65,7 +65,7 @@ test('toHaveStyle error messages', async () => { const view = screen.getByTestId('view'); expect(() => expect(view).toHaveStyle({ backgroundColor: 'red' })) .toThrowErrorMatchingInlineSnapshot(` - "expect(element).toHaveStyle() + "expect(instance).toHaveStyle() - Expected + Received @@ -80,7 +80,7 @@ test('toHaveStyle error messages', async () => { transform: [{ scale: 1 }], }), ).toThrowErrorMatchingInlineSnapshot(` - "expect(element).toHaveStyle() + "expect(instance).toHaveStyle() - Expected + Received @@ -99,9 +99,9 @@ test('toHaveStyle error messages', async () => { expect(() => expect(view).not.toHaveStyle({ backgroundColor: 'blue' })) .toThrowErrorMatchingInlineSnapshot(` - "expect(element).not.toHaveStyle() + "expect(instance).not.toHaveStyle() - Expected element not to have style: + Expected instance not to have style: backgroundColor: "blue"; Received: backgroundColor: "blue";" @@ -109,7 +109,7 @@ test('toHaveStyle error messages', async () => { expect(() => expect(view).toHaveStyle({ fontWeight: 'bold' })) .toThrowErrorMatchingInlineSnapshot(` - "expect(element).toHaveStyle() + "expect(instance).toHaveStyle() - Expected + Received @@ -119,9 +119,9 @@ test('toHaveStyle error messages', async () => { expect(() => expect(view).not.toHaveStyle({ backgroundColor: 'blue' })) .toThrowErrorMatchingInlineSnapshot(` - "expect(element).not.toHaveStyle() + "expect(instance).not.toHaveStyle() - Expected element not to have style: + Expected instance not to have style: backgroundColor: "blue"; Received: backgroundColor: "blue";" @@ -149,7 +149,7 @@ test('toHaveStyle() supports undefined "transform" style', async () => { const view = screen.getByTestId('view'); expect(() => expect(view).toHaveStyle({ transform: [{ scale: 1 }] })) .toThrowErrorMatchingInlineSnapshot(` - "expect(element).toHaveStyle() + "expect(instance).toHaveStyle() - Expected + Received @@ -182,7 +182,7 @@ test('toHaveStyle() to differentiate number vs string values', async () => { const view = screen.getByTestId('view'); expect(view).toHaveStyle({ fontWeight: '600' }); expect(() => expect(view).toHaveStyle({ fontWeight: 600 })).toThrowErrorMatchingInlineSnapshot(` - "expect(element).toHaveStyle() + "expect(instance).toHaveStyle() - Expected + Received diff --git a/src/matchers/__tests__/to-have-text-content.test.tsx b/src/matchers/__tests__/to-have-text-content.test.tsx index 3ac3686e0..aac538bfb 100644 --- a/src/matchers/__tests__/to-have-text-content.test.tsx +++ b/src/matchers/__tests__/to-have-text-content.test.tsx @@ -52,9 +52,9 @@ test('toHaveTextContent() negative test cases', async () => { const text = screen.getByTestId('text'); expect(text).not.toHaveTextContent(/Hello React/); expect(() => expect(text).toHaveTextContent(/Hello React/)).toThrowErrorMatchingInlineSnapshot(` - "expect(element).toHaveTextContent() + "expect(instance).toHaveTextContent() - Expected element to have text content: + Expected instance to have text content: /Hello React/ Received: Hello World" @@ -63,9 +63,9 @@ test('toHaveTextContent() negative test cases', async () => { expect(text).not.toHaveTextContent('Yellow', { exact: false }); expect(() => expect(text).toHaveTextContent('Yellow', { exact: false })) .toThrowErrorMatchingInlineSnapshot(` - "expect(element).toHaveTextContent() + "expect(instance).toHaveTextContent() - Expected element to have text content: + Expected instance to have text content: Yellow Received: Hello World" @@ -76,7 +76,7 @@ test('toHaveTextContent() on null element', () => { expect(() => expect(null).toHaveTextContent('Hello World')).toThrowErrorMatchingInlineSnapshot(` "expect(received).toHaveTextContent() - received value must be a host element. + received value must be a host instance. Received has value: null" `); }); diff --git a/src/matchers/__tests__/utils.test.tsx b/src/matchers/__tests__/utils.test.tsx index 3fffe19e6..332d4173c 100644 --- a/src/matchers/__tests__/utils.test.tsx +++ b/src/matchers/__tests__/utils.test.tsx @@ -24,7 +24,7 @@ test('checkHostElement allows rejects null element', () => { }).toThrowErrorMatchingInlineSnapshot(` "expect(received).fakeMatcher() - received value must be a host element. + received value must be a host instance. Received has value: null" `); }); diff --git a/src/matchers/to-be-busy.ts b/src/matchers/to-be-busy.ts index b86dab015..53b388ef4 100644 --- a/src/matchers/to-be-busy.ts +++ b/src/matchers/to-be-busy.ts @@ -1,23 +1,23 @@ import { matcherHint } from 'jest-matcher-utils'; import redent from 'redent'; -import type { HostElement } from 'test-renderer'; +import type { TestInstance } from 'test-renderer'; import { computeAriaBusy } from '../helpers/accessibility'; import { formatElement } from '../helpers/format-element'; import { checkHostElement } from './utils'; -export function toBeBusy(this: jest.MatcherContext, element: HostElement) { - checkHostElement(element, toBeBusy, this); +export function toBeBusy(this: jest.MatcherContext, instance: TestInstance) { + checkHostElement(instance, toBeBusy, this); return { - pass: computeAriaBusy(element), + pass: computeAriaBusy(instance), message: () => { - const matcher = matcherHint(`${this.isNot ? '.not' : ''}.toBeBusy`, 'element', ''); + const matcher = matcherHint(`${this.isNot ? '.not' : ''}.toBeBusy`, 'instance', ''); return [ matcher, '', - `Received element is ${this.isNot ? '' : 'not '}busy:`, - redent(formatElement(element), 2), + `Received instance is ${this.isNot ? '' : 'not '}busy:`, + redent(formatElement(instance), 2), ].join('\n'); }, }; diff --git a/src/matchers/to-be-checked.ts b/src/matchers/to-be-checked.ts index 1d164ec70..02d6fa045 100644 --- a/src/matchers/to-be-checked.ts +++ b/src/matchers/to-be-checked.ts @@ -1,6 +1,6 @@ import { matcherHint } from 'jest-matcher-utils'; import redent from 'redent'; -import type { HostElement } from 'test-renderer'; +import type { TestInstance } from 'test-renderer'; import { computeAriaChecked, @@ -13,35 +13,35 @@ import { formatElement } from '../helpers/format-element'; import { isHostSwitch } from '../helpers/host-component-names'; import { checkHostElement } from './utils'; -export function toBeChecked(this: jest.MatcherContext, element: HostElement) { - checkHostElement(element, toBeChecked, this); +export function toBeChecked(this: jest.MatcherContext, instance: TestInstance) { + checkHostElement(instance, toBeChecked, this); - if (!isHostSwitch(element) && !isSupportedAccessibilityElement(element)) { + if (!isHostSwitch(instance) && !isSupportedAccessibilityElement(instance)) { throw new ErrorWithStack( - `toBeChecked() works only on host "Switch" elements or accessibility elements with "checkbox", "radio" or "switch" role.`, + `toBeChecked() works only on host "Switch" instances or accessible instance with "checkbox", "radio" or "switch" role.`, toBeChecked, ); } return { - pass: computeAriaChecked(element) === true, + pass: computeAriaChecked(instance) === true, message: () => { const is = this.isNot ? 'is' : 'is not'; return [ - matcherHint(`${this.isNot ? '.not' : ''}.toBeChecked`, 'element', ''), + matcherHint(`${this.isNot ? '.not' : ''}.toBeChecked`, 'instance', ''), '', - `Received element ${is} checked:`, - redent(formatElement(element), 2), + `Received instance ${is} checked:`, + redent(formatElement(instance), 2), ].join('\n'); }, }; } -function isSupportedAccessibilityElement(element: HostElement) { - if (!isAccessibilityElement(element)) { +function isSupportedAccessibilityElement(instance: TestInstance) { + if (!isAccessibilityElement(instance)) { return false; } - const role = getRole(element); + const role = getRole(instance); return rolesSupportingCheckedState[role]; } diff --git a/src/matchers/to-be-disabled.ts b/src/matchers/to-be-disabled.ts index 8ab740069..2efc9951d 100644 --- a/src/matchers/to-be-disabled.ts +++ b/src/matchers/to-be-disabled.ts @@ -1,51 +1,51 @@ import { matcherHint } from 'jest-matcher-utils'; import redent from 'redent'; -import type { HostElement } from 'test-renderer'; +import type { TestInstance } from 'test-renderer'; import { computeAriaDisabled } from '../helpers/accessibility'; import { formatElement } from '../helpers/format-element'; import { checkHostElement } from './utils'; -export function toBeDisabled(this: jest.MatcherContext, element: HostElement) { - checkHostElement(element, toBeDisabled, this); +export function toBeDisabled(this: jest.MatcherContext, instance: TestInstance) { + checkHostElement(instance, toBeDisabled, this); - const isDisabled = computeAriaDisabled(element) || isAncestorDisabled(element); + const isDisabled = computeAriaDisabled(instance) || isAncestorDisabled(instance); return { pass: isDisabled, message: () => { const is = this.isNot ? 'is' : 'is not'; return [ - matcherHint(`${this.isNot ? '.not' : ''}.toBeDisabled`, 'element', ''), + matcherHint(`${this.isNot ? '.not' : ''}.toBeDisabled`, 'instance', ''), '', - `Received element ${is} disabled:`, - redent(formatElement(element), 2), + `Received instance ${is} disabled:`, + redent(formatElement(instance), 2), ].join('\n'); }, }; } -export function toBeEnabled(this: jest.MatcherContext, element: HostElement) { - checkHostElement(element, toBeEnabled, this); +export function toBeEnabled(this: jest.MatcherContext, instance: TestInstance) { + checkHostElement(instance, toBeEnabled, this); - const isEnabled = !computeAriaDisabled(element) && !isAncestorDisabled(element); + const isEnabled = !computeAriaDisabled(instance) && !isAncestorDisabled(instance); return { pass: isEnabled, message: () => { const is = this.isNot ? 'is' : 'is not'; return [ - matcherHint(`${this.isNot ? '.not' : ''}.toBeEnabled`, 'element', ''), + matcherHint(`${this.isNot ? '.not' : ''}.toBeEnabled`, 'instance', ''), '', - `Received element ${is} enabled:`, - redent(formatElement(element), 2), + `Received instance ${is} enabled:`, + redent(formatElement(instance), 2), ].join('\n'); }, }; } -function isAncestorDisabled(element: HostElement): boolean { - const parent = element.parent; +function isAncestorDisabled(instance: TestInstance): boolean { + const parent = instance.parent; if (parent == null) { return false; } diff --git a/src/matchers/to-be-empty-element.ts b/src/matchers/to-be-empty-element.ts index a58c75914..654801bca 100644 --- a/src/matchers/to-be-empty-element.ts +++ b/src/matchers/to-be-empty-element.ts @@ -1,22 +1,22 @@ import { matcherHint, RECEIVED_COLOR } from 'jest-matcher-utils'; import redent from 'redent'; -import type { HostElement } from 'test-renderer'; +import type { TestInstance } from 'test-renderer'; import { isTestInstance } from '../helpers/component-tree'; import { formatElementList } from '../helpers/format-element'; import { checkHostElement } from './utils'; -export function toBeEmptyElement(this: jest.MatcherContext, element: HostElement) { - checkHostElement(element, toBeEmptyElement, this); +export function toBeEmptyElement(this: jest.MatcherContext, instance: TestInstance) { + checkHostElement(instance, toBeEmptyElement, this); // TODO check - const children = element.children.filter((child) => isTestInstance(child)); + const children = instance.children.filter((child) => isTestInstance(child)); return { pass: children.length === 0, message: () => { return [ - matcherHint(`${this.isNot ? '.not' : ''}.toBeEmptyElement`, 'element', ''), + matcherHint(`${this.isNot ? '.not' : ''}.toBeEmptyElement`, 'instance', ''), '', 'Received:', `${RECEIVED_COLOR(redent(formatElementList(children), 2))}`, diff --git a/src/matchers/to-be-expanded.ts b/src/matchers/to-be-expanded.ts index 66a72e09f..e3c7bad12 100644 --- a/src/matchers/to-be-expanded.ts +++ b/src/matchers/to-be-expanded.ts @@ -1,40 +1,40 @@ import { matcherHint } from 'jest-matcher-utils'; import redent from 'redent'; -import type { HostElement } from 'test-renderer'; +import type { TestInstance } from 'test-renderer'; import { computeAriaExpanded } from '../helpers/accessibility'; import { formatElement } from '../helpers/format-element'; import { checkHostElement } from './utils'; -export function toBeExpanded(this: jest.MatcherContext, element: HostElement) { - checkHostElement(element, toBeExpanded, this); +export function toBeExpanded(this: jest.MatcherContext, instance: TestInstance) { + checkHostElement(instance, toBeExpanded, this); return { - pass: computeAriaExpanded(element) === true, + pass: computeAriaExpanded(instance) === true, message: () => { - const matcher = matcherHint(`${this.isNot ? '.not' : ''}.toBeExpanded`, 'element', ''); + const matcher = matcherHint(`${this.isNot ? '.not' : ''}.toBeExpanded`, 'instance', ''); return [ matcher, '', - `Received element is ${this.isNot ? '' : 'not '}expanded:`, - redent(formatElement(element), 2), + `Received instance is ${this.isNot ? '' : 'not '}expanded:`, + redent(formatElement(instance), 2), ].join('\n'); }, }; } -export function toBeCollapsed(this: jest.MatcherContext, element: HostElement) { - checkHostElement(element, toBeCollapsed, this); +export function toBeCollapsed(this: jest.MatcherContext, instance: TestInstance) { + checkHostElement(instance, toBeCollapsed, this); return { - pass: computeAriaExpanded(element) === false, + pass: computeAriaExpanded(instance) === false, message: () => { - const matcher = matcherHint(`${this.isNot ? '.not' : ''}.toBeCollapsed`, 'element', ''); + const matcher = matcherHint(`${this.isNot ? '.not' : ''}.toBeCollapsed`, 'instance', ''); return [ matcher, '', - `Received element is ${this.isNot ? '' : 'not '}collapsed:`, - redent(formatElement(element), 2), + `Received instance is ${this.isNot ? '' : 'not '}collapsed:`, + redent(formatElement(instance), 2), ].join('\n'); }, }; diff --git a/src/matchers/to-be-on-the-screen.ts b/src/matchers/to-be-on-the-screen.ts index 181a701e8..3605fc42f 100644 --- a/src/matchers/to-be-on-the-screen.ts +++ b/src/matchers/to-be-on-the-screen.ts @@ -1,35 +1,35 @@ import { matcherHint, RECEIVED_COLOR } from 'jest-matcher-utils'; import redent from 'redent'; -import type { HostElement } from 'test-renderer'; +import type { TestInstance } from 'test-renderer'; -import { getContainerElement } from '../helpers/component-tree'; +import { getContainerInstance } from '../helpers/component-tree'; import { formatElement } from '../helpers/format-element'; import { screen } from '../screen'; import { checkHostElement } from './utils'; -export function toBeOnTheScreen(this: jest.MatcherContext, element: HostElement) { - if (element !== null || !this.isNot) { - checkHostElement(element, toBeOnTheScreen, this); +export function toBeOnTheScreen(this: jest.MatcherContext, instance: TestInstance) { + if (instance !== null || !this.isNot) { + checkHostElement(instance, toBeOnTheScreen, this); } - const pass = element === null ? false : screen.container === getContainerElement(element); + const pass = instance === null ? false : screen.container === getContainerInstance(instance); const errorFound = () => { - return `expected element tree not to contain element, but found\n${redent( - formatElement(element), + return `expected instance tree not to contain instance, but found\n${redent( + formatElement(instance), 2, )}`; }; const errorNotFound = () => { - return `element could not be found in the element tree`; + return `instance could not be found in the instance tree`; }; return { pass, message: () => { return [ - matcherHint(`${this.isNot ? '.not' : ''}.toBeOnTheScreen`, 'element', ''), + matcherHint(`${this.isNot ? '.not' : ''}.toBeOnTheScreen`, 'instance', ''), '', RECEIVED_COLOR(this.isNot ? errorFound() : errorNotFound()), ].join('\n'); diff --git a/src/matchers/to-be-partially-checked.ts b/src/matchers/to-be-partially-checked.ts index 68ed2f9f5..2a2faf08f 100644 --- a/src/matchers/to-be-partially-checked.ts +++ b/src/matchers/to-be-partially-checked.ts @@ -1,16 +1,16 @@ import { matcherHint } from 'jest-matcher-utils'; import redent from 'redent'; -import type { HostElement } from 'test-renderer'; +import type { TestInstance } from 'test-renderer'; import { computeAriaChecked, getRole, isAccessibilityElement } from '../helpers/accessibility'; import { ErrorWithStack } from '../helpers/errors'; import { formatElement } from '../helpers/format-element'; import { checkHostElement } from './utils'; -export function toBePartiallyChecked(this: jest.MatcherContext, element: HostElement) { - checkHostElement(element, toBePartiallyChecked, this); +export function toBePartiallyChecked(this: jest.MatcherContext, instance: TestInstance) { + checkHostElement(instance, toBePartiallyChecked, this); - if (!hasValidAccessibilityRole(element)) { + if (!hasValidAccessibilityRole(instance)) { throw new ErrorWithStack( 'toBePartiallyChecked() works only on accessibility elements with "checkbox" role.', toBePartiallyChecked, @@ -18,20 +18,20 @@ export function toBePartiallyChecked(this: jest.MatcherContext, element: HostEle } return { - pass: computeAriaChecked(element) === 'mixed', + pass: computeAriaChecked(instance) === 'mixed', message: () => { const is = this.isNot ? 'is' : 'is not'; return [ - matcherHint(`${this.isNot ? '.not' : ''}.toBePartiallyChecked`, 'element', ''), + matcherHint(`${this.isNot ? '.not' : ''}.toBePartiallyChecked`, 'instance', ''), '', - `Received element ${is} partially checked:`, - redent(formatElement(element), 2), + `Received instance ${is} partially checked:`, + redent(formatElement(instance), 2), ].join('\n'); }, }; } -function hasValidAccessibilityRole(element: HostElement) { - const role = getRole(element); - return isAccessibilityElement(element) && role === 'checkbox'; +function hasValidAccessibilityRole(instance: TestInstance) { + const role = getRole(instance); + return isAccessibilityElement(instance) && role === 'checkbox'; } diff --git a/src/matchers/to-be-selected.ts b/src/matchers/to-be-selected.ts index 71cf822a8..ee5aa4927 100644 --- a/src/matchers/to-be-selected.ts +++ b/src/matchers/to-be-selected.ts @@ -1,23 +1,23 @@ import { matcherHint } from 'jest-matcher-utils'; import redent from 'redent'; -import type { HostElement } from 'test-renderer'; +import type { TestInstance } from 'test-renderer'; import { computeAriaSelected } from '../helpers/accessibility'; import { formatElement } from '../helpers/format-element'; import { checkHostElement } from './utils'; -export function toBeSelected(this: jest.MatcherContext, element: HostElement) { - checkHostElement(element, toBeSelected, this); +export function toBeSelected(this: jest.MatcherContext, instance: TestInstance) { + checkHostElement(instance, toBeSelected, this); return { - pass: computeAriaSelected(element), + pass: computeAriaSelected(instance), message: () => { const is = this.isNot ? 'is' : 'is not'; return [ - matcherHint(`${this.isNot ? '.not' : ''}.toBeSelected`, 'element', ''), + matcherHint(`${this.isNot ? '.not' : ''}.toBeSelected`, 'instance', ''), '', - `Received element ${is} selected`, - redent(formatElement(element), 2), + `Received instance ${is} selected`, + redent(formatElement(instance), 2), ].join('\n'); }, }; diff --git a/src/matchers/to-be-visible.ts b/src/matchers/to-be-visible.ts index f5a08a109..0156da399 100644 --- a/src/matchers/to-be-visible.ts +++ b/src/matchers/to-be-visible.ts @@ -1,53 +1,53 @@ import { StyleSheet } from 'react-native'; import { matcherHint } from 'jest-matcher-utils'; import redent from 'redent'; -import type { HostElement } from 'test-renderer'; +import type { TestInstance } from 'test-renderer'; import { isHiddenFromAccessibility } from '../helpers/accessibility'; import { formatElement } from '../helpers/format-element'; import { isHostModal } from '../helpers/host-component-names'; import { checkHostElement } from './utils'; -export function toBeVisible(this: jest.MatcherContext, element: HostElement) { - if (element !== null || !this.isNot) { - checkHostElement(element, toBeVisible, this); +export function toBeVisible(this: jest.MatcherContext, instance: TestInstance) { + if (instance !== null || !this.isNot) { + checkHostElement(instance, toBeVisible, this); } return { - pass: isElementVisible(element), + pass: isElementVisible(instance), message: () => { const is = this.isNot ? 'is' : 'is not'; return [ - matcherHint(`${this.isNot ? '.not' : ''}.toBeVisible`, 'element', ''), + matcherHint(`${this.isNot ? '.not' : ''}.toBeVisible`, 'instance', ''), '', - `Received element ${is} visible:`, - redent(formatElement(element), 2), + `Received instance ${is} visible:`, + redent(formatElement(instance), 2), ].join('\n'); }, }; } function isElementVisible( - element: HostElement, - accessibilityCache?: WeakMap, + instance: TestInstance, + accessibilityCache?: WeakMap, ): boolean { // Use cache to speed up repeated searches by `isHiddenFromAccessibility`. - const cache = accessibilityCache ?? new WeakMap(); - if (isHiddenFromAccessibility(element, { cache })) { + const cache = accessibilityCache ?? new WeakMap(); + if (isHiddenFromAccessibility(instance, { cache })) { return false; } - if (isHiddenForStyles(element)) { + if (isHiddenForStyles(instance)) { return false; } // Note: this seems to be a bug in React Native. // PR with fix: https://github.com/facebook/react-native/pull/39157 - if (isHostModal(element) && element.props.visible === false) { + if (isHostModal(instance) && instance.props.visible === false) { return false; } - const parent = element.parent; + const parent = instance.parent; if (parent === null) { return true; } @@ -55,7 +55,7 @@ function isElementVisible( return isElementVisible(parent, cache); } -function isHiddenForStyles(element: HostElement) { - const flatStyle = StyleSheet.flatten(element.props.style); +function isHiddenForStyles(instance: TestInstance) { + const flatStyle = StyleSheet.flatten(instance.props.style); return flatStyle?.display === 'none' || flatStyle?.opacity === 0; } diff --git a/src/matchers/to-contain-element.ts b/src/matchers/to-contain-element.ts index 651934d52..6d3ff6293 100644 --- a/src/matchers/to-contain-element.ts +++ b/src/matchers/to-contain-element.ts @@ -1,35 +1,35 @@ import { matcherHint, RECEIVED_COLOR } from 'jest-matcher-utils'; import redent from 'redent'; -import type { HostElement } from 'test-renderer'; +import type { TestInstance } from 'test-renderer'; import { formatElement } from '../helpers/format-element'; import { checkHostElement } from './utils'; export function toContainElement( this: jest.MatcherContext, - container: HostElement, - element: HostElement | null, + container: TestInstance, + instance: TestInstance | null, ) { checkHostElement(container, toContainElement, this); - if (element !== null) { - checkHostElement(element, toContainElement, this); + if (instance !== null) { + checkHostElement(instance, toContainElement, this); } - let matches: HostElement[] = []; - if (element) { - matches = container.queryAll((node) => node === element); + let matches: TestInstance[] = []; + if (instance) { + matches = container.queryAll((node) => node === instance); } return { pass: matches.length > 0, message: () => { return [ - matcherHint(`${this.isNot ? '.not' : ''}.toContainElement`, 'container', 'element'), + matcherHint(`${this.isNot ? '.not' : ''}.toContainElement`, 'container', 'instance'), '', RECEIVED_COLOR(`${redent(formatElement(container), 2)} ${ this.isNot ? '\n\ncontains:\n\n' : '\n\ndoes not contain:\n\n' - } ${redent(formatElement(element), 2)} + } ${redent(formatElement(instance), 2)} `), ].join('\n'); }, diff --git a/src/matchers/to-have-accessibility-value.ts b/src/matchers/to-have-accessibility-value.ts index 86c151266..0797592cc 100644 --- a/src/matchers/to-have-accessibility-value.ts +++ b/src/matchers/to-have-accessibility-value.ts @@ -1,5 +1,5 @@ import { matcherHint, stringify } from 'jest-matcher-utils'; -import type { HostElement } from 'test-renderer'; +import type { TestInstance } from 'test-renderer'; import { computeAriaValue } from '../helpers/accessibility'; import type { AccessibilityValueMatcher } from '../helpers/matchers/match-accessibility-value'; @@ -9,26 +9,26 @@ import { checkHostElement, formatMessage } from './utils'; export function toHaveAccessibilityValue( this: jest.MatcherContext, - element: HostElement, + instance: TestInstance, expectedValue: AccessibilityValueMatcher, ) { - checkHostElement(element, toHaveAccessibilityValue, this); + checkHostElement(instance, toHaveAccessibilityValue, this); - const receivedValue = computeAriaValue(element); + const receivedValue = computeAriaValue(instance); return { - pass: matchAccessibilityValue(element, expectedValue), + pass: matchAccessibilityValue(instance, expectedValue), message: () => { const matcher = matcherHint( `${this.isNot ? '.not' : ''}.toHaveAccessibilityValue`, - 'element', + 'instance', stringify(expectedValue), ); return formatMessage( matcher, - `Expected the element ${this.isNot ? 'not to' : 'to'} have accessibility value`, + `Expected the instance ${this.isNot ? 'not to' : 'to'} have accessibility value`, stringify(expectedValue), - 'Received element with accessibility value', + 'Received instance with accessibility value', stringify(removeUndefinedKeys(receivedValue)), ); }, diff --git a/src/matchers/to-have-accessible-name.ts b/src/matchers/to-have-accessible-name.ts index e88adf919..fe927a472 100644 --- a/src/matchers/to-have-accessible-name.ts +++ b/src/matchers/to-have-accessible-name.ts @@ -1,5 +1,5 @@ import { matcherHint } from 'jest-matcher-utils'; -import type { HostElement } from 'test-renderer'; +import type { TestInstance } from 'test-renderer'; import { computeAccessibleName } from '../helpers/accessibility'; import type { TextMatch, TextMatchOptions } from '../matches'; @@ -8,13 +8,13 @@ import { checkHostElement, formatMessage } from './utils'; export function toHaveAccessibleName( this: jest.MatcherContext, - element: HostElement, + instance: TestInstance, expectedName?: TextMatch, options?: TextMatchOptions, ) { - checkHostElement(element, toHaveAccessibleName, this); + checkHostElement(instance, toHaveAccessibleName, this); - const receivedName = computeAccessibleName(element); + const receivedName = computeAccessibleName(instance); const missingExpectedValue = arguments.length === 1; const pass = missingExpectedValue @@ -28,8 +28,8 @@ export function toHaveAccessibleName( message: () => { return [ formatMessage( - matcherHint(`${this.isNot ? '.not' : ''}.toHaveAccessibleName`, 'element', ''), - `Expected element ${this.isNot ? 'not to' : 'to'} have accessible name`, + matcherHint(`${this.isNot ? '.not' : ''}.toHaveAccessibleName`, 'instance', ''), + `Expected instance ${this.isNot ? 'not to' : 'to'} have accessible name`, expectedName, 'Received', receivedName, diff --git a/src/matchers/to-have-display-value.ts b/src/matchers/to-have-display-value.ts index 76d9eab05..b715bac05 100644 --- a/src/matchers/to-have-display-value.ts +++ b/src/matchers/to-have-display-value.ts @@ -1,5 +1,5 @@ import { matcherHint } from 'jest-matcher-utils'; -import type { HostElement } from 'test-renderer'; +import type { TestInstance } from 'test-renderer'; import { ErrorWithStack } from '../helpers/errors'; import { isHostTextInput } from '../helpers/host-component-names'; @@ -10,28 +10,28 @@ import { checkHostElement, formatMessage } from './utils'; export function toHaveDisplayValue( this: jest.MatcherContext, - element: HostElement, + instance: TestInstance, expectedValue: TextMatch, options?: TextMatchOptions, ) { - checkHostElement(element, toHaveDisplayValue, this); + checkHostElement(instance, toHaveDisplayValue, this); - if (!isHostTextInput(element)) { + if (!isHostTextInput(instance)) { throw new ErrorWithStack( - `toHaveDisplayValue() works only with host "TextInput" elements. Passed element has type "${element.type}".`, + `toHaveDisplayValue() works only with host "TextInput" instances. Passed instance has type "${instance.type}".`, toHaveDisplayValue, ); } - const receivedValue = getTextInputValue(element); + const receivedValue = getTextInputValue(instance); return { pass: matches(expectedValue, receivedValue, options?.normalizer, options?.exact), message: () => { return [ formatMessage( - matcherHint(`${this.isNot ? '.not' : ''}.toHaveDisplayValue`, 'element', ''), - `Expected element ${this.isNot ? 'not to' : 'to'} have display value`, + matcherHint(`${this.isNot ? '.not' : ''}.toHaveDisplayValue`, 'instance', ''), + `Expected instance ${this.isNot ? 'not to' : 'to'} have display value`, expectedValue, 'Received', receivedValue, diff --git a/src/matchers/to-have-prop.ts b/src/matchers/to-have-prop.ts index 0b12902f8..49f939575 100644 --- a/src/matchers/to-have-prop.ts +++ b/src/matchers/to-have-prop.ts @@ -1,19 +1,19 @@ import { matcherHint, printExpected, stringify } from 'jest-matcher-utils'; -import type { HostElement } from 'test-renderer'; +import type { TestInstance } from 'test-renderer'; import { checkHostElement, formatMessage } from './utils'; export function toHaveProp( this: jest.MatcherContext, - element: HostElement, + instance: TestInstance, name: string, expectedValue: unknown, ) { - checkHostElement(element, toHaveProp, this); + checkHostElement(instance, toHaveProp, this); const isExpectedValueDefined = expectedValue !== undefined; - const hasProp = name in element.props; - const receivedValue = element.props[name]; + const hasProp = name in instance.props; + const receivedValue = instance.props[name]; const pass = isExpectedValueDefined ? hasProp && this.equals(expectedValue, receivedValue) @@ -25,7 +25,7 @@ export function toHaveProp( const to = this.isNot ? 'not to' : 'to'; const matcher = matcherHint( `${this.isNot ? '.not' : ''}.toHaveProp`, - 'element', + 'instance', printExpected(name), { secondArgument: isExpectedValueDefined ? printExpected(expectedValue) : undefined, @@ -33,7 +33,7 @@ export function toHaveProp( ); return formatMessage( matcher, - `Expected element ${to} have prop`, + `Expected instance ${to} have prop`, formatProp(name, expectedValue), 'Received', hasProp ? formatProp(name, receivedValue) : undefined, diff --git a/src/matchers/to-have-style.ts b/src/matchers/to-have-style.ts index e5d304b49..d8455a5b3 100644 --- a/src/matchers/to-have-style.ts +++ b/src/matchers/to-have-style.ts @@ -1,7 +1,7 @@ import type { ImageStyle, StyleProp, TextStyle, ViewStyle } from 'react-native'; import { StyleSheet } from 'react-native'; import { diff, matcherHint } from 'jest-matcher-utils'; -import type { HostElement } from 'test-renderer'; +import type { TestInstance } from 'test-renderer'; import { checkHostElement, formatMessage } from './utils'; @@ -11,13 +11,13 @@ type StyleLike = Record; export function toHaveStyle( this: jest.MatcherContext, - element: HostElement, + instance: TestInstance, style: StyleProp