feat: add toBeDisabled matcher

Author: jaworek

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

@@ -6,6 +6,7 @@ export interface JestNativeMatchers<R> {
   toBeVisible(): R;
   toHaveDisplayValue(expectedValue: TextMatch, options?: TextMatchOptions): R;
   toHaveTextContent(expectedText: TextMatch, options?: TextMatchOptions): R;
+  toBeDisabled(): R;
 }
 
 // Implicit Jest global `expect`.

src/matchers/extend-expect.d.ts

@@ -5,11 +5,13 @@ import { toBeEmptyElement } from './to-be-empty-element';
 import { toBeVisible } from './to-be-visible';
 import { toHaveDisplayValue } from './to-have-display-value';
 import { toHaveTextContent } from './to-have-text-content';
+import { toBeDisabled } from './to-be-disabled';
 
 expect.extend({
   toBeOnTheScreen,
   toBeEmptyElement,
   toBeVisible,
   toHaveDisplayValue,
   toHaveTextContent,
+  toBeDisabled,
 });

src/matchers/extend-expect.ts

@@ -0,0 +1,71 @@
+import type { ReactTestInstance } from 'react-test-renderer';
+import { matcherHint } from 'jest-matcher-utils';
+import { checkHostElement, formatMessage, getType } from './utils';
+
+// Elements that support 'disabled'
+const DISABLE_TYPES = [
+  'Button',
+  'Slider',
+  'Switch',
+  'Text',
+  'TouchableHighlight',
+  'TouchableOpacity',
+  'TouchableWithoutFeedback',
+  'TouchableNativeFeedback',
+  'View',
+  'TextInput',
+  'Pressable',
+];
+function isElementDisabled(element: ReactTestInstance) {
+  if (getType(element) === 'TextInput' && element?.props?.editable === false) {
+    return true;
+  }
+
+  if (!DISABLE_TYPES.includes(getType(element))) {
+    return false;
+  }
+
+  return (
+    !!element?.props?.disabled ||
+    !!element?.props?.accessibilityState?.disabled ||
+    !!element?.props?.accessibilityStates?.includes('disabled')
+  );
+}
+
+function isAncestorDisabled(element: ReactTestInstance): boolean {
+  const parent = element.parent;
+  return (
+    parent != null && (isElementDisabled(element) || isAncestorDisabled(parent))
+  );
+}
+
+export function toBeDisabled(
+  this: jest.MatcherContext,
+  element: ReactTestInstance
+) {
+  if (element !== null || !this.isNot) {
+    checkHostElement(element, toBeDisabled, this);
+  }
+
+  const isDisabled = isElementDisabled(element) || isAncestorDisabled(element);
+
+  return {
+    pass: isDisabled,
+    message: () => {
+      const is = isDisabled ? 'is' : 'is not';
+      return [
+        formatMessage(
+          matcherHint(
+            `${this.isNot ? '.not' : ''}.toBeDisabled`,
+            'element',
+            ''
+          ),
+          '',
+          `Received element ${is} disabled:`,
+          printElement(element),
+          null
+        ),
+      ].join('\n');
+    },
+  };
+}

src/matchers/to-be-disabled.tsx

@@ -121,3 +121,8 @@ export function formatMessage(
 function formatValue(value: unknown) {
   return typeof value === 'string' ? value : stringify(value);
 }
+
+export function getType({ type }: ReactTestInstance) {
+  // @ts-expect-error: ReactTestInstance contains too loose typing
+  return type.displayName || type.name || type;
+}