fix: duplicate AccessibilityState type (cherry-pick of #1355) (#1361)

Author: mdjastrzebski

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,15 +30,15 @@ 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));
 }
 
 function matchState(
   state: AccessibilityState,
-  matcher: AccessibilityState,
+  matcher: AccessibilityStateMatcher,
   key: keyof AccessibilityState
 ) {
   return (

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<ReactTestInstance>) =>
   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<AccessibilityState, CommonQueryOptions>;
-  getAllByA11yState: GetAllByQuery<AccessibilityState, CommonQueryOptions>;
-  queryByA11yState: QueryByQuery<AccessibilityState, CommonQueryOptions>;
-  queryAllByA11yState: QueryAllByQuery<AccessibilityState, CommonQueryOptions>;
-  findByA11yState: FindByQuery<AccessibilityState, CommonQueryOptions>;
-  findAllByA11yState: FindAllByQuery<AccessibilityState, CommonQueryOptions>;
+  getByA11yState: GetByQuery<AccessibilityStateMatcher, CommonQueryOptions>;
+  getAllByA11yState: GetAllByQuery<
+    AccessibilityStateMatcher,
+    CommonQueryOptions
+  >;
+  queryByA11yState: QueryByQuery<AccessibilityStateMatcher, CommonQueryOptions>;
+  queryAllByA11yState: QueryAllByQuery<
+    AccessibilityStateMatcher,
+    CommonQueryOptions
+  >;
+  findByA11yState: FindByQuery<AccessibilityStateMatcher, CommonQueryOptions>;
+  findAllByA11yState: FindAllByQuery<
+    AccessibilityStateMatcher,
+    CommonQueryOptions
+  >;
 
-  getByAccessibilityState: GetByQuery<AccessibilityState, CommonQueryOptions>;
+  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<AccessibilityState, CommonQueryOptions>;
   findAllByAccessibilityState: FindAllByQuery<
-    AccessibilityState,
+    AccessibilityStateMatcher,
     CommonQueryOptions
   >;
 };

src/queries/role.ts

@@ -1,12 +1,14 @@
-import type { AccessibilityState } from 'react-native';
 import type { ReactTestInstance } from 'react-test-renderer';
 import {
   accessibilityStateKeys,
   accessiblityValueKeys,
   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;
   };