feat: toHaveProp matcher

src/matchers/__tests__/to-have-prop.test.tsx

@@ -0,0 +1,87 @@
+import React from 'react';
+import { View, Text, TextInput } from 'react-native';
+import { render, screen } from '../..';
+import '../extend-expect';
+
+test('.toHaveProp basic case', () => {
+  render(
+    <View testID="view" style={null}>
+      <Text ellipsizeMode="head">Hello</Text>
+      <TextInput testID="input" textAlign="right" />
+    </View>
+  );
+
+  const view = screen.getByTestId('view');
+  expect(view).toHaveProp('style');
+  expect(view).toHaveProp('style', null);
+  expect(view).not.toHaveProp('ellipsizeMode');
+
+  const text = screen.getByText('Hello');
+  expect(text).toHaveProp('ellipsizeMode');
+  expect(text).toHaveProp('ellipsizeMode', 'head');
+  expect(text).not.toHaveProp('style');
+  expect(text).not.toHaveProp('ellipsizeMode', 'tail');
+
+  const input = screen.getByTestId('input');
+  expect(input).toHaveProp('textAlign');
+  expect(input).toHaveProp('textAlign', 'right');
+  expect(input).not.toHaveProp('textAlign', 'left');
+  expect(input).not.toHaveProp('editable');
+  expect(input).not.toHaveProp('editable', false);
+});
+
+test('.toHaveProp error messages', () => {
+  render(<View testID="view" collapsable={false} />);
+
+  const view = screen.getByTestId('view');
+
+  expect(() => expect(view).toHaveProp('accessible'))
+    .toThrowErrorMatchingInlineSnapshot(`
+    "expect(element).toHaveProp("accessible")
+
+    Expected element to have prop:
+      accessible
+    Received:
+      undefined"
+  `);
+
+  expect(() => expect(view).toHaveProp('accessible', true))
+    .toThrowErrorMatchingInlineSnapshot(`
+    "expect(element).toHaveProp("accessible", true)
+
+    Expected element to have prop:
+      accessible={true}
+    Received:
+      undefined"
+  `);
+
+  expect(() => expect(view).not.toHaveProp('collapsable'))
+    .toThrowErrorMatchingInlineSnapshot(`
+    "expect(element).not.toHaveProp("collapsable")
+
+    Expected element not to have prop:
+      collapsable
+    Received:
+      collapsable={false}"
+  `);
+
+  expect(() => expect(view).toHaveProp('collapsable', true))
+    .toThrowErrorMatchingInlineSnapshot(`
+    "expect(element).toHaveProp("collapsable", true)
+
+    Expected element to have prop:
+      collapsable={true}
+    Received:
+      collapsable={false}"
+  `);
+
+  expect(() => expect(view).not.toHaveProp('collapsable', false))
+    .toThrowErrorMatchingInlineSnapshot(`
+    "expect(element).not.toHaveProp("collapsable", false)
+
+    Expected element not to have prop:
+      collapsable={false}
+    Received:
+      collapsable={false}"
+  `);
+});

src/matchers/extend-expect.d.ts

@@ -2,12 +2,13 @@ import type { TextMatch, TextMatchOptions } from '../matches';
 
 export interface JestNativeMatchers<R> {
   toBeOnTheScreen(): R;
+  toBeDisabled(): R;
   toBeEmptyElement(): R;
+  toBeEnabled(): R;
   toBeVisible(): R;
   toHaveDisplayValue(expectedValue: TextMatch, options?: TextMatchOptions): R;
+  toHaveProp(name: string, expectedValue?: unknown): R;
   toHaveTextContent(expectedText: TextMatch, options?: TextMatchOptions): R;
-  toBeDisabled(): R;
-  toBeEnabled(): R;
 }
 
 // Implicit Jest global `expect`.

src/matchers/extend-expect.ts

@@ -1,18 +1,20 @@
 /// <reference path="./extend-expect.d.ts" />
 
 import { toBeOnTheScreen } from './to-be-on-the-screen';
+import { toBeDisabled, toBeEnabled } from './to-be-disabled';
 import { toBeEmptyElement } from './to-be-empty-element';
 import { toBeVisible } from './to-be-visible';
 import { toHaveDisplayValue } from './to-have-display-value';
+import { toHaveProp } from './to-have-prop';
 import { toHaveTextContent } from './to-have-text-content';
-import { toBeDisabled, toBeEnabled } from './to-be-disabled';
 
 expect.extend({
   toBeOnTheScreen,
+  toBeDisabled,
   toBeEmptyElement,
+  toBeEnabled,
   toBeVisible,
   toHaveDisplayValue,
+  toHaveProp,
   toHaveTextContent,
-  toBeDisabled,
-  toBeEnabled,
 });

src/matchers/to-have-prop.ts

@@ -0,0 +1,56 @@
+import type { ReactTestInstance } from 'react-test-renderer';
+import { matcherHint, stringify, printExpected } from 'jest-matcher-utils';
+import { checkHostElement, formatMessage } from './utils';
+
+export function toHaveProp(
+  this: jest.MatcherContext,
+  element: ReactTestInstance,
+  name: string,
+  expectedValue: unknown
+) {
+  checkHostElement(element, toHaveProp, this);
+
+  const isExpectedValueDefined = expectedValue !== undefined;
+  const hasProp = name in element.props;
+  const receivedValue = element.props[name];
+
+  const pass = isExpectedValueDefined
+    ? hasProp && this.equals(expectedValue, receivedValue)
+    : hasProp;
+
+  return {
+    pass,
+    message: () => {
+      const to = this.isNot ? 'not to' : 'to';
+      const matcher = matcherHint(
+        `${this.isNot ? '.not' : ''}.toHaveProp`,
+        'element',
+        printExpected(name),
+        {
+          secondArgument: isExpectedValueDefined
+            ? printExpected(expectedValue)
+            : undefined,
+        }
+      );
+      return formatMessage(
+        matcher,
+        `Expected element ${to} have prop`,
+        formatProp(name, expectedValue),
+        'Received',
+        hasProp ? formatProp(name, receivedValue) : undefined
+      );
+    },
+  };
+}
+
+function formatProp(name: string, value: unknown) {
+  if (value === undefined) {
+    return name;
+  }
+
+  if (typeof value === 'string') {
+    return `${name}="${value}"`;
+  }
+
+  return `${name}={${stringify(value)}}`;
+}

src/matchers/utils.tsx

@@ -111,7 +111,7 @@ export function formatMessage(
   expectedLabel: string,
   expectedValue: string | RegExp,
   receivedLabel: string,
-  receivedValue: string | null
+  receivedValue: string | null | undefined
 ) {
   return [
     `${matcher}\n`,