refactor: support "switch" role

Author: mdjastrzebski

src/helpers/accessibility.ts

@@ -159,16 +159,17 @@ export function computeAriaBusy({ props }: ReactTestInstance): boolean {
 
 // See: https://github.com/callstack/react-native-testing-library/wiki/Accessibility:-State#checked-state
 export function computeAriaChecked(element: ReactTestInstance): AccessibilityState['checked'] {
+  const { props } = element;
+
   if (isHostSwitch(element)) {
-    return element.props.value;
+    return props.value;
   }
 
   const role = getRole(element);
-  if (role !== 'checkbox' && role !== 'radio') {
+  if (!rolesSupportingCheckedState[role]) {
     return undefined;
   }
 
-  const props = element.props;
   return props['aria-checked'] ?? props.accessibilityState?.checked;
 }
 
@@ -226,3 +227,11 @@ export function computeAccessibleName(element: ReactTestInstance): string | unde
 
   return getTextContent(element);
 }
+
+type RoleSupportMap = Partial<Record<Role | AccessibilityRole, true>>;
+
+export const rolesSupportingCheckedState: RoleSupportMap = {
+  checkbox: true,
+  radio: true,
+  switch: true,
+};

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

@@ -79,7 +79,7 @@ test('toBeCheck() with Switch', () => {
   `);
 });
 
-test('toBeCheck() with checkbox role', () => {
+test('toBeCheck() with "checkbox" role', () => {
   renderViewsWithRole('checkbox');
 
   const checked = screen.getByTestId('checkbox-checked');
@@ -149,7 +149,7 @@ test('toBeCheck() with checkbox role', () => {
   `);
 });
 
-test('toBeCheck() with radio role', () => {
+test('toBeCheck() with "radio" role', () => {
   renderViewsWithRole('radio');
 
   const checked = screen.getByTestId('radio-checked');
@@ -202,17 +202,70 @@ test('toBeCheck() with radio role', () => {
   `);
 });
 
+test('toBeCheck() with "switch" role', () => {
+  renderViewsWithRole('switch');
+
+  const checked = screen.getByTestId('switch-checked');
+  const unchecked = screen.getByTestId('switch-unchecked');
+  const defaultView = screen.getByTestId('switch-default');
+
+  expect(checked).toBeChecked();
+  expect(unchecked).not.toBeChecked();
+  expect(defaultView).not.toBeChecked();
+
+  expect(() => expect(checked).not.toBeChecked()).toThrowErrorMatchingInlineSnapshot(`
+    "expect(element).not.toBeChecked()
+
+    Received element is checked:
+      <View
+        accessibilityRole="switch"
+        accessibilityState={
+          {
+            "checked": true,
+          }
+        }
+        accessible={true}
+        testID="switch-checked"
+      />"
+  `);
+  expect(() => expect(unchecked).toBeChecked()).toThrowErrorMatchingInlineSnapshot(`
+    "expect(element).toBeChecked()
+
+    Received element is not checked:
+      <View
+        accessibilityRole="switch"
+        accessibilityState={
+          {
+            "checked": false,
+          }
+        }
+        accessible={true}
+        testID="switch-unchecked"
+      />"
+  `);
+  expect(() => expect(defaultView).toBeChecked()).toThrowErrorMatchingInlineSnapshot(`
+    "expect(element).toBeChecked()
+
+    Received element is not checked:
+      <View
+        accessibilityRole="switch"
+        accessible={true}
+        testID="switch-default"
+      />"
+  `);
+});
+
 test('throws error for invalid role', () => {
   renderViewsWithRole('adjustable');
 
   const checked = screen.getByTestId('adjustable-checked');
   const unchecked = screen.getByTestId('adjustable-unchecked');
 
   expect(() => expect(checked).toBeChecked()).toThrowErrorMatchingInlineSnapshot(
-    `"toBeChecked() works only on "Switch" elements or accessibility elements with "checkbox" or "radio" role."`,
+    `"toBeChecked() works only on host "Switch" elements or accessibility elements with "checkbox", "radio" or "switch" role."`,
   );
   expect(() => expect(unchecked).not.toBeChecked()).toThrowErrorMatchingInlineSnapshot(
-    `"toBeChecked() works only on "Switch" elements or accessibility elements with "checkbox" or "radio" role."`,
+    `"toBeChecked() works only on host "Switch" elements or accessibility elements with "checkbox", "radio" or "switch" role."`,
   );
 });
 
@@ -221,6 +274,6 @@ test('throws error for non-accessibility element', () => {
 
   const view = screen.getByTestId('test');
   expect(() => expect(view).toBeChecked()).toThrowErrorMatchingInlineSnapshot(
-    `"toBeChecked() works only on "Switch" elements or accessibility elements with "checkbox" or "radio" role."`,
+    `"toBeChecked() works only on host "Switch" elements or accessibility elements with "checkbox", "radio" or "switch" role."`,
   );
 });

src/matchers/to-be-checked.tsx

@@ -1,6 +1,11 @@
 import type { ReactTestInstance } from 'react-test-renderer';
 import { matcherHint } from 'jest-matcher-utils';
-import { computeAriaChecked, getRole, isAccessibilityElement } from '../helpers/accessibility';
+import {
+  computeAriaChecked,
+  getRole,
+  isAccessibilityElement,
+  rolesSupportingCheckedState,
+} from '../helpers/accessibility';
 import { ErrorWithStack } from '../helpers/errors';
 import { isHostSwitch } from '../helpers/host-component-names';
 import { checkHostElement, formatElement } from './utils';
@@ -10,7 +15,7 @@ export function toBeChecked(this: jest.MatcherContext, element: ReactTestInstanc
 
   if (!isHostSwitch(element) && !isSupportedAccessibilityElement(element)) {
     throw new ErrorWithStack(
-      `toBeChecked() works only on "Switch" elements or accessibility elements with "checkbox" or "radio" role.`,
+      `toBeChecked() works only on host "Switch" elements or accessibility elements with "checkbox", "radio" or "switch" role.`,
       toBeChecked,
     );
   }
@@ -35,5 +40,5 @@ function isSupportedAccessibilityElement(element: ReactTestInstance) {
   }
 
   const role = getRole(element);
-  return role === 'checkbox' || role === 'radio';
+  return rolesSupportingCheckedState[role];
 }

website/docs/12.x/docs/api/jest-matchers.mdx

@@ -140,8 +140,8 @@ These allow you to assert whether the given element is checked or partially chec
 
 :::note
 
-- `toBeChecked()` matcher works only on elements with the `checkbox` or `radio` role.
-- `toBePartiallyChecked()` matcher works only on elements with the `checkbox` role.
+- `toBeChecked()` matcher works only on `Switch` host elements and accessibility elements with `checkbox`, `radio` or `switch` role.
+- `toBePartiallyChecked()` matcher works only on elements with `checkbox` role.
 
 :::
 

website/docs/12.x/docs/migration/jest-matchers.mdx

@@ -71,5 +71,5 @@ New [`toHaveAccessibleName()`](docs/api/jest-matchers#tohaveaccessiblename) has
 You should be aware of the following details:
 
 - [`toBeEnabled()` / `toBeDisabled()`](docs/api/jest-matchers#tobeenabled) matchers also check the disabled state for the element's ancestors and not only the element itself. This is the same as in legacy Jest Native matchers of the same name but differs from the removed `toHaveAccessibilityState()` matcher.
-- [`toBeChecked()`](docs/api/jest-matchers#tobechecked) matcher supports only elements with a `checkbox` or `radio` role
+- [`toBeChecked()`](docs/api/jest-matchers#tobechecked) matcher supports only elements with a `checkbox`, `radio` and 'switch' role
 - [`toBePartiallyChecked()`](docs/api/jest-matchers#tobechecked) matcher supports only elements with `checkbox` role