feat: implement support for Switch toBeChecked

Author: mdjastrzebski

.vscode/settings.json

@@ -1,3 +1,3 @@
 {
-  "cSpell.words": ["Pressable", "RNTL", "Uncapitalize"]
+  "cSpell.words": ["labelledby", "Pressable", "RNTL", "Uncapitalize", "valuenow", "valuetext"]
 }

src/helpers/accessibility.ts

@@ -1,7 +1,7 @@
 import { AccessibilityState, AccessibilityValue, StyleSheet } from 'react-native';
 import { ReactTestInstance } from 'react-test-renderer';
 import { getHostSiblings, getUnsafeRootElement } from './component-tree';
-import { getHostComponentNames, isHostText } from './host-component-names';
+import { getHostComponentNames, isHostSwitch, isHostText } from './host-component-names';
 import { getTextContent } from './text-content';
 
 type IsInaccessibleOptions = {
@@ -45,7 +45,7 @@ export function isHiddenFromAccessibility(
   return false;
 }
 
-/** RTL-compatitibility alias for `isHiddenFromAccessibility` */
+/** RTL-compatibility alias for `isHiddenFromAccessibility` */
 export const isInaccessible = isHiddenFromAccessibility;
 
 function isSubtreeInaccessible(element: ReactTestInstance): boolean {
@@ -140,45 +140,57 @@ export function getAccessibilityLabelledBy(element: ReactTestInstance): string |
   return element.props['aria-labelledby'] ?? element.props.accessibilityLabelledBy;
 }
 
-export function getAccessibilityState(element: ReactTestInstance): AccessibilityState | undefined {
-  const {
-    accessibilityState,
-    'aria-busy': ariaBusy,
-    'aria-checked': ariaChecked,
-    'aria-disabled': ariaDisabled,
-    'aria-expanded': ariaExpanded,
-    'aria-selected': ariaSelected,
-  } = element.props;
+export function computeAccessibilityState(element: ReactTestInstance): AccessibilityState {
+  const busy = computeA11yBusy(element);
+  const checked = computeA11yChecked(element);
+  const disabled = computeA11Disabled(element);
+  const expanded = computeA11yExpanded(element);
+  const selected = computeA11ySelected(element);
+
+  return {
+    busy,
+    checked,
+    disabled,
+    expanded,
+    selected,
+  };
+}
+
+export function computeA11yBusy(element: ReactTestInstance): AccessibilityState['busy'] {
+  const props = element.props;
+  return props['aria-busy'] ?? props.accessibilityState?.busy;
+}
 
-  const hasAnyAccessibilityStateProps =
-    accessibilityState != null ||
-    ariaBusy != null ||
-    ariaChecked != null ||
-    ariaDisabled != null ||
-    ariaExpanded != null ||
-    ariaSelected != null;
+export function computeA11yChecked(element: ReactTestInstance): AccessibilityState['checked'] {
+  if (isHostSwitch(element)) {
+    return element.props.value;
+  }
 
-  if (!hasAnyAccessibilityStateProps) {
+  const role = getAccessibilityRole(element);
+  if (role !== 'checkbox' && role !== 'radio') {
     return undefined;
   }
 
-  return {
-    busy: ariaBusy ?? accessibilityState?.busy,
-    checked: ariaChecked ?? accessibilityState?.checked,
-    disabled: ariaDisabled ?? accessibilityState?.disabled,
-    expanded: ariaExpanded ?? accessibilityState?.expanded,
-    selected: ariaSelected ?? accessibilityState?.selected,
-  };
+  const props = element.props;
+  return props['aria-checked'] ?? props.accessibilityState?.checked;
 }
 
-export function getAccessibilityCheckedState(
-  element: ReactTestInstance,
-): AccessibilityState['checked'] {
-  const { accessibilityState, 'aria-checked': ariaChecked } = element.props;
-  return ariaChecked ?? accessibilityState?.checked;
+export function computeA11Disabled(element: ReactTestInstance): AccessibilityState['disabled'] {
+  const props = element.props;
+  return props['aria-disabled'] ?? props.accessibilityState?.disabled;
 }
 
-export function getAccessibilityValue(element: ReactTestInstance): AccessibilityValue | undefined {
+export function computeA11yExpanded(element: ReactTestInstance): AccessibilityState['expanded'] {
+  const props = element.props;
+  return props['aria-expanded'] ?? props.accessibilityState?.expanded;
+}
+
+export function computeA11ySelected(element: ReactTestInstance): AccessibilityState['selected'] {
+  const props = element.props;
+  return props['aria-selected'] ?? props.accessibilityState?.selected;
+}
+
+export function computeAccessibilityValue(element: ReactTestInstance): AccessibilityValue {
   const {
     accessibilityValue,
     'aria-valuemax': ariaValueMax,
@@ -187,17 +199,6 @@ export function getAccessibilityValue(element: ReactTestInstance): Accessibility
     'aria-valuetext': ariaValueText,
   } = element.props;
 
-  const hasAnyAccessibilityValueProps =
-    accessibilityValue != null ||
-    ariaValueMax != null ||
-    ariaValueMin != null ||
-    ariaValueNow != null ||
-    ariaValueText != null;
-
-  if (!hasAnyAccessibilityValueProps) {
-    return undefined;
-  }
-
   return {
     max: ariaValueMax ?? accessibilityValue?.max,
     min: ariaValueMin ?? accessibilityValue?.min,
@@ -206,33 +207,7 @@ export function getAccessibilityValue(element: ReactTestInstance): Accessibility
   };
 }
 
-export function isElementBusy(element: ReactTestInstance): NonNullable<AccessibilityState['busy']> {
-  const { accessibilityState, 'aria-busy': ariaBusy } = element.props;
-  return ariaBusy ?? accessibilityState?.busy ?? false;
-}
-
-export function isElementCollapsed(
-  element: ReactTestInstance,
-): NonNullable<AccessibilityState['expanded']> {
-  const { accessibilityState, 'aria-expanded': ariaExpanded } = element.props;
-  return (ariaExpanded ?? accessibilityState?.expanded) === false;
-}
-
-export function isElementExpanded(
-  element: ReactTestInstance,
-): NonNullable<AccessibilityState['expanded']> {
-  const { accessibilityState, 'aria-expanded': ariaExpanded } = element.props;
-  return ariaExpanded ?? accessibilityState?.expanded ?? false;
-}
-
-export function isElementSelected(
-  element: ReactTestInstance,
-): NonNullable<AccessibilityState['selected']> {
-  const { accessibilityState, 'aria-selected': ariaSelected } = element.props;
-  return ariaSelected ?? accessibilityState?.selected ?? false;
-}
-
-export function getAccessibleName(element: ReactTestInstance): string | undefined {
+export function computeAccessibleName(element: ReactTestInstance): string | undefined {
   const label = getAccessibilityLabel(element);
   if (label) {
     return label;

src/helpers/host-component-names.tsx

@@ -70,31 +70,39 @@ function getByTestId(instance: ReactTestInstance, testID: string) {
 }
 
 /**
- * Checks if the given element is a host Text.
+ * Checks if the given element is a host Text element.
  * @param element The element to check.
  */
 export function isHostText(element?: ReactTestInstance | null): element is HostTestInstance {
   return element?.type === getHostComponentNames().text;
 }
 
 /**
- * Checks if the given element is a host TextInput.
+ * Checks if the given element is a host TextInput element.
  * @param element The element to check.
  */
 export function isHostTextInput(element?: ReactTestInstance | null): element is HostTestInstance {
   return element?.type === getHostComponentNames().textInput;
 }
 
 /**
- * Checks if the given element is a host ScrollView.
+ * Checks if the given element is a host Switch element.
+ * @param element The element to check.
+ */
+export function isHostSwitch(element?: ReactTestInstance | null): element is HostTestInstance {
+  return element?.type === getHostComponentNames().switch;
+}
+
+/**
+ * Checks if the given element is a host ScrollView element.
  * @param element The element to check.
  */
 export function isHostScrollView(element?: ReactTestInstance | null): element is HostTestInstance {
   return element?.type === getHostComponentNames().scrollView;
 }
 
 /**
- * Checks if the given element is a host Modal.
+ * Checks if the given element is a host Modal element.
  * @param element The element to check.
  */
 export function isHostModal(element?: ReactTestInstance | null): element is HostTestInstance {

src/helpers/matchers/match-accessibility-state.ts

@@ -1,6 +1,6 @@
 import { AccessibilityState } from 'react-native';
 import { ReactTestInstance } from 'react-test-renderer';
-import { accessibilityStateKeys, getAccessibilityState } from '../accessibility';
+import { accessibilityStateKeys, computeAccessibilityState } from '../accessibility';
 
 // 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
@@ -32,7 +32,7 @@ export function matchAccessibilityState(
   node: ReactTestInstance,
   matcher: AccessibilityStateMatcher,
 ) {
-  const state = getAccessibilityState(node);
+  const state = computeAccessibilityState(node);
   return accessibilityStateKeys.every((key) => matchState(matcher, state, key));
 }
 

src/helpers/matchers/match-accessibility-value.ts

@@ -1,5 +1,5 @@
 import { ReactTestInstance } from 'react-test-renderer';
-import { getAccessibilityValue } from '../accessibility';
+import { computeAccessibilityValue } from '../accessibility';
 import { TextMatch } from '../../matches';
 import { matchStringProp } from './match-string-prop';
 
@@ -14,7 +14,7 @@ export function matchAccessibilityValue(
   node: ReactTestInstance,
   matcher: AccessibilityValueMatcher,
 ): boolean {
-  const value = getAccessibilityValue(node);
+  const value = computeAccessibilityValue(node);
   return (
     (matcher.min === undefined || matcher.min === value?.min) &&
     (matcher.max === undefined || matcher.max === value?.max) &&

src/matchers/__tests__/to-be-checked.test.tsx

@@ -160,10 +160,10 @@ test('throws error for invalid role', () => {
   const unchecked = screen.getByTestId('adjustable-unchecked');
 
   expect(() => expect(checked).toBeChecked()).toThrowErrorMatchingInlineSnapshot(
-    `"toBeChecked() works only on accessibility elements with "checkbox" or "radio" role."`,
+    `"toBeChecked() works only on "Switch" element or accessibility elements with "checkbox" or "radio" role."`,
   );
   expect(() => expect(unchecked).not.toBeChecked()).toThrowErrorMatchingInlineSnapshot(
-    `"toBeChecked() works only on accessibility elements with "checkbox" or "radio" role."`,
+    `"toBeChecked() works only on "Switch" element or accessibility elements with "checkbox" or "radio" role."`,
   );
 });
 
@@ -172,6 +172,6 @@ test('throws error for non-accessibility element', () => {
 
   const view = screen.getByTestId('test');
   expect(() => expect(view).toBeChecked()).toThrowErrorMatchingInlineSnapshot(
-    `"toBeChecked() works only on accessibility elements with "checkbox" or "radio" role."`,
+    `"toBeChecked() works only on "Switch" element or accessibility elements with "checkbox" or "radio" role."`,
   );
 });

src/matchers/to-be-busy.tsx

@@ -1,13 +1,13 @@
 import { ReactTestInstance } from 'react-test-renderer';
 import { matcherHint } from 'jest-matcher-utils';
-import { isElementBusy } from '../helpers/accessibility';
+import { computeA11yBusy } from '../helpers/accessibility';
 import { checkHostElement, formatElement } from './utils';
 
 export function toBeBusy(this: jest.MatcherContext, element: ReactTestInstance) {
   checkHostElement(element, toBeBusy, this);
 
   return {
-    pass: isElementBusy(element),
+    pass: computeA11yBusy(element) === true,
     message: () => {
       const matcher = matcherHint(`${this.isNot ? '.not' : ''}.toBeBusy`, 'element', '');
       return [

src/matchers/to-be-checked.tsx

@@ -1,25 +1,26 @@
 import type { ReactTestInstance } from 'react-test-renderer';
 import { matcherHint } from 'jest-matcher-utils';
 import {
-  getAccessibilityCheckedState,
   getAccessibilityRole,
   isAccessibilityElement,
+  computeA11yChecked,
 } from '../helpers/accessibility';
 import { ErrorWithStack } from '../helpers/errors';
+import { isHostSwitch } from '../helpers/host-component-names';
 import { checkHostElement, formatElement } from './utils';
 
 export function toBeChecked(this: jest.MatcherContext, element: ReactTestInstance) {
   checkHostElement(element, toBeChecked, this);
 
-  if (!hasValidAccessibilityRole(element)) {
+  if (!isHostSwitch(element) && !isSupportedAccessibilityElement(element)) {
     throw new ErrorWithStack(
-      `toBeChecked() works only on accessibility elements with "checkbox" or "radio" role.`,
+      `toBeChecked() works only on "Switch" element or accessibility elements with "checkbox" or "radio" role.`,
       toBeChecked,
     );
   }
 
   return {
-    pass: getAccessibilityCheckedState(element) === true,
+    pass: computeA11yChecked(element) === true,
     message: () => {
       const is = this.isNot ? 'is' : 'is not';
       return [
@@ -32,7 +33,7 @@ export function toBeChecked(this: jest.MatcherContext, element: ReactTestInstanc
   };
 }
 
-function hasValidAccessibilityRole(element: ReactTestInstance) {
+function isSupportedAccessibilityElement(element: ReactTestInstance) {
   if (!isAccessibilityElement(element)) {
     return false;
   }

src/matchers/to-be-collapsed.tsx

@@ -1,13 +1,13 @@
 import { ReactTestInstance } from 'react-test-renderer';
 import { matcherHint } from 'jest-matcher-utils';
-import { isElementCollapsed } from '../helpers/accessibility';
+import { computeA11yExpanded } from '../helpers/accessibility';
 import { checkHostElement, formatElement } from './utils';
 
 export function toBeCollapsed(this: jest.MatcherContext, element: ReactTestInstance) {
   checkHostElement(element, toBeCollapsed, this);
 
   return {
-    pass: isElementCollapsed(element),
+    pass: computeA11yExpanded(element) === false,
     message: () => {
       const matcher = matcherHint(`${this.isNot ? '.not' : ''}.toBeCollapsed`, 'element', '');
       return [

src/matchers/to-be-expanded.tsx

@@ -1,13 +1,13 @@
 import { ReactTestInstance } from 'react-test-renderer';
 import { matcherHint } from 'jest-matcher-utils';
-import { isElementExpanded } from '../helpers/accessibility';
+import { computeA11yExpanded } from '../helpers/accessibility';
 import { checkHostElement, formatElement } from './utils';
 
 export function toBeExpanded(this: jest.MatcherContext, element: ReactTestInstance) {
   checkHostElement(element, toBeExpanded, this);
 
   return {
-    pass: isElementExpanded(element),
+    pass: computeA11yExpanded(element) === true,
     message: () => {
       const matcher = matcherHint(`${this.isNot ? '.not' : ''}.toBeExpanded`, 'element', '');
       return [