feat: implement support for Switch toBeChecked

refactor: tweaks

refactor: update tests

chore: add Switch test

chore: more tests

refactor: self code review

Author: mdjastrzebski

src/helpers/accessibility.ts

@@ -7,7 +7,12 @@ import {
 } from 'react-native';
 import { ReactTestInstance } from 'react-test-renderer';
 import { getHostSiblings, getUnsafeRootElement } from './component-tree';
-import { getHostComponentNames, isHostText, isHostTextInput } from './host-component-names';
+import {
+  getHostComponentNames,
+  isHostSwitch,
+  isHostText,
+  isHostTextInput,
+} from './host-component-names';
 import { getTextContent } from './text-content';
 import { isTextInputEditable } from './text-input';
 
@@ -154,6 +159,10 @@ 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'] {
+  if (isHostSwitch(element)) {
+    return element.props.value;
+  }
+
   const role = getRole(element);
   if (role !== 'checkbox' && role !== 'radio') {
     return undefined;

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

@@ -1,5 +1,5 @@
 import React from 'react';
-import { type AccessibilityRole, View } from 'react-native';
+import { type AccessibilityRole, Switch, View } from 'react-native';
 import render from '../../render';
 import { screen } from '../../screen';
 import '../extend-expect';
@@ -30,6 +30,55 @@ function renderViewsWithRole(role: AccessibilityRole) {
   );
 }
 
+test('toBeCheck() with Switch', () => {
+  render(
+    <>
+      <Switch testID="checked" value={true} />
+      <Switch testID="unchecked" value={false} />
+      <Switch testID="default" />
+    </>,
+  );
+
+  const checked = screen.getByTestId('checked');
+  const unchecked = screen.getByTestId('unchecked');
+  const defaultView = screen.getByTestId('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:
+      <RCTSwitch
+        accessibilityRole="switch"
+        testID="checked"
+        value={true}
+      />"
+  `);
+  expect(() => expect(unchecked).toBeChecked()).toThrowErrorMatchingInlineSnapshot(`
+    "expect(element).toBeChecked()
+
+    Received element is not checked:
+      <RCTSwitch
+        accessibilityRole="switch"
+        testID="unchecked"
+        value={false}
+      />"
+  `);
+  expect(() => expect(defaultView).toBeChecked()).toThrowErrorMatchingInlineSnapshot(`
+    "expect(element).toBeChecked()
+
+    Received element is not checked:
+      <RCTSwitch
+        accessibilityRole="switch"
+        testID="default"
+        value={false}
+      />"
+  `);
+});
+
 test('toBeCheck() with checkbox role', () => {
   renderViewsWithRole('checkbox');
 
@@ -160,10 +209,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" elements 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" elements or accessibility elements with "checkbox" or "radio" role."`,
   );
 });
 
@@ -172,6 +221,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" elements or accessibility elements with "checkbox" or "radio" role."`,
   );
 });

src/matchers/to-be-checked.tsx

@@ -2,14 +2,15 @@ import type { ReactTestInstance } from 'react-test-renderer';
 import { matcherHint } from 'jest-matcher-utils';
 import { computeAriaChecked, getRole, isAccessibilityElement } 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" elements or accessibility elements with "checkbox" or "radio" role.`,
       toBeChecked,
     );
   }
@@ -28,7 +29,7 @@ export function toBeChecked(this: jest.MatcherContext, element: ReactTestInstanc
   };
 }
 
-function hasValidAccessibilityRole(element: ReactTestInstance) {
+function isSupportedAccessibilityElement(element: ReactTestInstance) {
   if (!isAccessibilityElement(element)) {
     return false;
   }

src/queries/__tests__/accessibility-state.test.tsx

@@ -477,14 +477,14 @@ describe('aria-checked prop', () => {
   });
 
   test('supports aria-checked="mixed" prop', () => {
-    render(<View accessible accessibilityRole="checkbox" aria-checked="mixed" />);
+    render(<View accessible role="checkbox" aria-checked="mixed" />);
     expect(screen.getByAccessibilityState({ checked: 'mixed' })).toBeTruthy();
     expect(screen.queryByAccessibilityState({ checked: true })).toBeNull();
     expect(screen.queryByAccessibilityState({ checked: false })).toBeNull();
   });
 
   test('supports default aria-checked prop', () => {
-    render(<View accessible accessibilityRole="checkbox" />);
+    render(<View accessible role="checkbox" />);
     expect(screen.getByAccessibilityState({})).toBeTruthy();
     expect(screen.queryByAccessibilityState({ checked: true })).toBeNull();
     expect(screen.queryByAccessibilityState({ checked: false })).toBeNull();

src/queries/__tests__/role.test.tsx

@@ -7,6 +7,7 @@ import {
   TouchableOpacity,
   TouchableWithoutFeedback,
   View,
+  Switch,
 } from 'react-native';
 import { render, screen } from '../..';
 
@@ -426,7 +427,7 @@ describe('supports accessibility states', () => {
       expect(screen.queryByRole('checkbox', { checked: 'mixed' })).toBe(null);
     });
 
-    it('returns `mixed` checkboxes', () => {
+    test('returns `mixed` checkboxes', () => {
       render(
         <TouchableOpacity accessibilityRole="checkbox" accessibilityState={{ checked: 'mixed' }} />,
       );
@@ -508,6 +509,14 @@ describe('supports accessibility states', () => {
       expect(screen.queryByRole('checkbox', { checked: false })).toBe(null);
     });
 
+    test('supports "Switch" component', () => {
+      render(<Switch value={true} />);
+
+      expect(screen.getByRole('switch', { checked: true })).toBeTruthy();
+      expect(screen.queryByRole('switch', { checked: false })).toBe(null);
+      expect(screen.queryByRole('switch', { checked: 'mixed' })).toBe(null);
+    });
+
     test('supports aria-checked={true} prop', () => {
       render(<View accessible role="checkbox" aria-checked={true} />);
       expect(screen.getByRole('checkbox', { checked: true })).toBeTruthy();