diff --git a/src/helpers/matchers/accessibilityState.ts b/src/helpers/matchers/accessibilityState.ts index b068353e4..cd02a9679 100644 --- a/src/helpers/matchers/accessibilityState.ts +++ b/src/helpers/matchers/accessibilityState.ts @@ -2,6 +2,18 @@ import { AccessibilityState } from 'react-native'; import { ReactTestInstance } from 'react-test-renderer'; import { accessibilityStateKeys } from '../accessiblity'; +// This type is the same as AccessibilityState from `react-native` package +// It is re-declared here due to issues with migration from `@types/react-native` to +// built in `react-native` types. +// See: https://github.com/callstack/react-native-testing-library/issues/1351 +export interface AccessibilityStateMatcher { + disabled?: boolean; + selected?: boolean; + checked?: boolean | 'mixed'; + busy?: boolean; + expanded?: boolean; +} + /** * Default accessibility state values based on experiments using accessibility * inspector/screen reader on iOS and Android. @@ -18,7 +30,7 @@ const defaultState: AccessibilityState = { export function matchAccessibilityState( node: ReactTestInstance, - matcher: AccessibilityState + matcher: AccessibilityStateMatcher ) { const state = node.props.accessibilityState; return accessibilityStateKeys.every((key) => matchState(state, matcher, key)); @@ -26,7 +38,7 @@ export function matchAccessibilityState( function matchState( state: AccessibilityState, - matcher: AccessibilityState, + matcher: AccessibilityStateMatcher, key: keyof AccessibilityState ) { return ( diff --git a/src/queries/a11yState.ts b/src/queries/a11yState.ts index 1d7e64005..f9a61d164 100644 --- a/src/queries/a11yState.ts +++ b/src/queries/a11yState.ts @@ -1,9 +1,11 @@ import type { ReactTestInstance } from 'react-test-renderer'; -import { AccessibilityState } from 'react-native'; import { accessibilityStateKeys } from '../helpers/accessiblity'; import { deprecateQueries } from '../helpers/deprecation'; import { findAll } from '../helpers/findAll'; -import { matchAccessibilityState } from '../helpers/matchers/accessibilityState'; +import { + AccessibilityStateMatcher, + matchAccessibilityState, +} from '../helpers/matchers/accessibilityState'; import { makeQueries } from './makeQueries'; import type { FindAllByQuery, @@ -18,7 +20,7 @@ import { CommonQueryOptions } from './options'; const queryAllByA11yState = ( instance: ReactTestInstance ): (( - matcher: AccessibilityState, + matcher: AccessibilityStateMatcher, queryOptions?: CommonQueryOptions ) => Array) => function queryAllByA11yStateFn(matcher, queryOptions) { @@ -30,7 +32,7 @@ const queryAllByA11yState = ( ); }; -const buildErrorMessage = (state: AccessibilityState = {}) => { +const buildErrorMessage = (state: AccessibilityStateMatcher = {}) => { const errors: string[] = []; accessibilityStateKeys.forEach((stateKey) => { @@ -42,10 +44,10 @@ const buildErrorMessage = (state: AccessibilityState = {}) => { return errors.join(', '); }; -const getMultipleError = (state: AccessibilityState) => +const getMultipleError = (state: AccessibilityStateMatcher) => `Found multiple elements with ${buildErrorMessage(state)}`; -const getMissingError = (state: AccessibilityState) => +const getMissingError = (state: AccessibilityStateMatcher) => `Unable to find an element with ${buildErrorMessage(state)}`; const { getBy, getAllBy, queryBy, queryAllBy, findBy, findAllBy } = makeQueries( @@ -55,29 +57,44 @@ const { getBy, getAllBy, queryBy, queryAllBy, findBy, findAllBy } = makeQueries( ); export type ByA11yStateQueries = { - getByA11yState: GetByQuery; - getAllByA11yState: GetAllByQuery; - queryByA11yState: QueryByQuery; - queryAllByA11yState: QueryAllByQuery; - findByA11yState: FindByQuery; - findAllByA11yState: FindAllByQuery; + getByA11yState: GetByQuery; + getAllByA11yState: GetAllByQuery< + AccessibilityStateMatcher, + CommonQueryOptions + >; + queryByA11yState: QueryByQuery; + queryAllByA11yState: QueryAllByQuery< + AccessibilityStateMatcher, + CommonQueryOptions + >; + findByA11yState: FindByQuery; + findAllByA11yState: FindAllByQuery< + AccessibilityStateMatcher, + CommonQueryOptions + >; - getByAccessibilityState: GetByQuery; + getByAccessibilityState: GetByQuery< + AccessibilityStateMatcher, + CommonQueryOptions + >; getAllByAccessibilityState: GetAllByQuery< - AccessibilityState, + AccessibilityStateMatcher, CommonQueryOptions >; queryByAccessibilityState: QueryByQuery< - AccessibilityState, + AccessibilityStateMatcher, CommonQueryOptions >; queryAllByAccessibilityState: QueryAllByQuery< - AccessibilityState, + AccessibilityStateMatcher, + CommonQueryOptions + >; + findByAccessibilityState: FindByQuery< + AccessibilityStateMatcher, CommonQueryOptions >; - findByAccessibilityState: FindByQuery; findAllByAccessibilityState: FindAllByQuery< - AccessibilityState, + AccessibilityStateMatcher, CommonQueryOptions >; }; diff --git a/src/queries/role.ts b/src/queries/role.ts index 3356284a8..17dec231f 100644 --- a/src/queries/role.ts +++ b/src/queries/role.ts @@ -1,4 +1,3 @@ -import type { AccessibilityState } from 'react-native'; import type { ReactTestInstance } from 'react-test-renderer'; import { accessibilityStateKeys, @@ -6,7 +5,10 @@ import { isAccessibilityElement, } from '../helpers/accessiblity'; import { findAll } from '../helpers/findAll'; -import { matchAccessibilityState } from '../helpers/matchers/accessibilityState'; +import { + AccessibilityStateMatcher, + matchAccessibilityState, +} from '../helpers/matchers/accessibilityState'; import { AccessibilityValueMatcher, matchAccessibilityValue, @@ -27,7 +29,7 @@ import type { import { CommonQueryOptions } from './options'; type ByRoleOptions = CommonQueryOptions & - AccessibilityState & { + AccessibilityStateMatcher & { name?: TextMatch; value?: AccessibilityValueMatcher; };