From 015b96e4f1a5552ce628e90f03cb765e17c10e4d Mon Sep 17 00:00:00 2001
From: AntoineThibi <antoinet@bam.tech>
Date: Tue, 29 Aug 2023 09:38:39 +0200
Subject: [PATCH 1/6] feat: implement toHaveProp

---
 src/matchers/__tests__/to-have-prop.test.tsx | 43 ++++++++++++++++
 src/matchers/extend-expect.d.ts              |  5 +-
 src/matchers/extend-expect.ts                |  8 +--
 src/matchers/to-have-prop.ts                 | 54 ++++++++++++++++++++
 4 files changed, 105 insertions(+), 5 deletions(-)
 create mode 100644 src/matchers/__tests__/to-have-prop.test.tsx
 create mode 100644 src/matchers/to-have-prop.ts

diff --git a/src/matchers/__tests__/to-have-prop.test.tsx b/src/matchers/__tests__/to-have-prop.test.tsx
new file mode 100644
index 000000000..7bfd864f3
--- /dev/null
+++ b/src/matchers/__tests__/to-have-prop.test.tsx
@@ -0,0 +1,43 @@
+import React from 'react';
+import { Button, Text, View } from 'react-native';
+import { render } from '../..';
+import '../extend-expect';
+
+test('.toHaveProp', () => {
+  const { queryByTestId } = render(
+    <View style={null} testID="view">
+      <Text allowFontScaling={false} testID="text" ellipsizeMode="head">
+        text
+      </Text>
+      <Button disabled testID="button" title="ok" />
+    </View>
+  );
+
+  expect(queryByTestId('button')).toHaveProp('accessibilityState', {
+    disabled: true,
+  });
+  expect(queryByTestId('text')).toHaveProp('ellipsizeMode', 'head');
+  expect(queryByTestId('text')).toHaveProp('allowFontScaling', false);
+
+  expect(queryByTestId('button')).not.toHaveProp('accessibilityStates');
+  expect(queryByTestId('button')).not.toHaveProp('ellipsizeMode', undefined);
+  expect(queryByTestId('button')).not.toHaveProp('allowFontScaling', false);
+  expect(queryByTestId('text')).not.toHaveProp('style');
+
+  // title is no longer findable as it is a React child
+  expect(() =>
+    expect(queryByTestId('button')).toHaveProp('title', 'ok')
+  ).toThrow();
+  expect(() =>
+    expect(queryByTestId('button')).toHaveProp('disabled')
+  ).toThrow();
+  expect(() =>
+    expect(queryByTestId('text')).not.toHaveProp('allowFontScaling', false)
+  ).toThrow();
+  expect(() => expect(queryByTestId('text')).toHaveProp('style')).toThrow();
+  expect(() =>
+    expect(queryByTestId('text')).toHaveProp('allowFontScaling', 'wrongValue')
+  ).toThrow();
+
+  expect(queryByTestId('view')).toHaveProp('style', null);
+});
diff --git a/src/matchers/extend-expect.d.ts b/src/matchers/extend-expect.d.ts
index ba8b0d066..7123d9d0b 100644
--- a/src/matchers/extend-expect.d.ts
+++ b/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`.
diff --git a/src/matchers/extend-expect.ts b/src/matchers/extend-expect.ts
index 7097a3c3d..601d158f9 100644
--- a/src/matchers/extend-expect.ts
+++ b/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,
 });
diff --git a/src/matchers/to-have-prop.ts b/src/matchers/to-have-prop.ts
new file mode 100644
index 000000000..de7cf23d1
--- /dev/null
+++ b/src/matchers/to-have-prop.ts
@@ -0,0 +1,54 @@
+import type { ReactTestInstance } from 'react-test-renderer';
+import { matcherHint, stringify, printExpected } from 'jest-matcher-utils';
+import { checkHostElement, formatMessage } from './utils';
+
+function printAttribute(name: string, value: unknown) {
+  return value === undefined ? name : `${name}=${stringify(value)}`;
+}
+
+function getPropComment(name: string, value: unknown) {
+  return value === undefined
+    ? `Element should have prop ${name}`
+    : `Element should have prop ${name} with value ${stringify(value)}`;
+}
+
+export function toHaveProp(
+  this: jest.MatcherContext,
+  element: ReactTestInstance,
+  name: string,
+  expectedValue: unknown
+) {
+  checkHostElement(element, toHaveProp, this);
+
+  const propValue = element.props[name];
+
+  const isDefined = expectedValue !== undefined;
+  const hasProp = name in element.props;
+
+  return {
+    pass: isDefined
+      ? hasProp && this.equals(propValue, expectedValue)
+      : hasProp,
+    message: () => {
+      const to = this.isNot ? 'not to' : 'to';
+
+      const receivedProp = hasProp ? printAttribute(name, propValue) : null;
+      const matcher = matcherHint(
+        `${this.isNot ? '.not' : ''}.toHaveProp`,
+        'element',
+        printExpected(name),
+        {
+          secondArgument: isDefined ? printExpected(expectedValue) : undefined,
+          comment: getPropComment(name, expectedValue),
+        }
+      );
+      return formatMessage(
+        matcher,
+        `Expected the element ${to} have prop`,
+        printAttribute(name, expectedValue),
+        'Received',
+        receivedProp
+      );
+    },
+  };
+}

From 786fb07f2740e772b615fb5055277330f74a70e4 Mon Sep 17 00:00:00 2001
From: AntoineThibi <antoinet@bam.tech>
Date: Tue, 29 Aug 2023 09:43:56 +0200
Subject: [PATCH 2/6] refactor: use screen in the test

---
 src/matchers/__tests__/to-have-prop.test.tsx | 84 ++++++++++++++------
 1 file changed, 60 insertions(+), 24 deletions(-)

diff --git a/src/matchers/__tests__/to-have-prop.test.tsx b/src/matchers/__tests__/to-have-prop.test.tsx
index 7bfd864f3..39ce3a265 100644
--- a/src/matchers/__tests__/to-have-prop.test.tsx
+++ b/src/matchers/__tests__/to-have-prop.test.tsx
@@ -1,10 +1,10 @@
 import React from 'react';
 import { Button, Text, View } from 'react-native';
-import { render } from '../..';
+import { render, screen } from '../..';
 import '../extend-expect';
 
 test('.toHaveProp', () => {
-  const { queryByTestId } = render(
+  render(
     <View style={null} testID="view">
       <Text allowFontScaling={false} testID="text" ellipsizeMode="head">
         text
@@ -13,31 +13,67 @@ test('.toHaveProp', () => {
     </View>
   );
 
-  expect(queryByTestId('button')).toHaveProp('accessibilityState', {
+  const text = screen.getByTestId('text');
+  const button = screen.getByTestId('button');
+  const view = screen.getByTestId('view');
+
+  expect(button).toHaveProp('accessibilityState', {
     disabled: true,
   });
-  expect(queryByTestId('text')).toHaveProp('ellipsizeMode', 'head');
-  expect(queryByTestId('text')).toHaveProp('allowFontScaling', false);
+  expect(text).toHaveProp('ellipsizeMode', 'head');
+  expect(text).toHaveProp('allowFontScaling', false);
 
-  expect(queryByTestId('button')).not.toHaveProp('accessibilityStates');
-  expect(queryByTestId('button')).not.toHaveProp('ellipsizeMode', undefined);
-  expect(queryByTestId('button')).not.toHaveProp('allowFontScaling', false);
-  expect(queryByTestId('text')).not.toHaveProp('style');
+  expect(button).not.toHaveProp('accessibilityStates');
+  expect(button).not.toHaveProp('ellipsizeMode', undefined);
+  expect(button).not.toHaveProp('allowFontScaling', false);
+  expect(text).not.toHaveProp('style');
 
   // title is no longer findable as it is a React child
-  expect(() =>
-    expect(queryByTestId('button')).toHaveProp('title', 'ok')
-  ).toThrow();
-  expect(() =>
-    expect(queryByTestId('button')).toHaveProp('disabled')
-  ).toThrow();
-  expect(() =>
-    expect(queryByTestId('text')).not.toHaveProp('allowFontScaling', false)
-  ).toThrow();
-  expect(() => expect(queryByTestId('text')).toHaveProp('style')).toThrow();
-  expect(() =>
-    expect(queryByTestId('text')).toHaveProp('allowFontScaling', 'wrongValue')
-  ).toThrow();
-
-  expect(queryByTestId('view')).toHaveProp('style', null);
+  expect(() => expect(button).toHaveProp('title', 'ok'))
+    .toThrowErrorMatchingInlineSnapshot(`
+    "expect(element).toHaveProp("title", "ok") // Element should have prop title with value "ok"
+
+    Expected the element to have prop:
+      title="ok"
+    Received:
+      null"
+  `);
+  expect(() => expect(button).toHaveProp('disabled'))
+    .toThrowErrorMatchingInlineSnapshot(`
+    "expect(element).toHaveProp("disabled") // Element should have prop disabled
+
+    Expected the element to have prop:
+      disabled
+    Received:
+      null"
+  `);
+  expect(() => expect(text).not.toHaveProp('allowFontScaling', false))
+    .toThrowErrorMatchingInlineSnapshot(`
+    "expect(element).not.toHaveProp("allowFontScaling", false) // Element should have prop allowFontScaling with value false
+
+    Expected the element not to have prop:
+      allowFontScaling=false
+    Received:
+      allowFontScaling=false"
+  `);
+  expect(() => expect(text).toHaveProp('style'))
+    .toThrowErrorMatchingInlineSnapshot(`
+    "expect(element).toHaveProp("style") // Element should have prop style
+
+    Expected the element to have prop:
+      style
+    Received:
+      null"
+  `);
+  expect(() => expect(text).toHaveProp('allowFontScaling', 'wrongValue'))
+    .toThrowErrorMatchingInlineSnapshot(`
+    "expect(element).toHaveProp("allowFontScaling", "wrongValue") // Element should have prop allowFontScaling with value "wrongValue"
+
+    Expected the element to have prop:
+      allowFontScaling="wrongValue"
+    Received:
+      allowFontScaling=false"
+  `);
+
+  expect(view).toHaveProp('style', null);
 });

From c958c7bd35155e3bd5209f3a660df9ab605957dc Mon Sep 17 00:00:00 2001
From: Maciej Jastrzebski <mdjastrzebski@gmail.com>
Date: Fri, 1 Sep 2023 20:15:44 +0200
Subject: [PATCH 3/6] refactor: tweaks

---
 src/matchers/__tests__/to-have-prop.test.tsx | 16 +++---
 src/matchers/to-have-prop.ts                 | 56 +++++++++-----------
 src/matchers/utils.tsx                       |  2 +-
 3 files changed, 34 insertions(+), 40 deletions(-)

diff --git a/src/matchers/__tests__/to-have-prop.test.tsx b/src/matchers/__tests__/to-have-prop.test.tsx
index 39ce3a265..345b386a2 100644
--- a/src/matchers/__tests__/to-have-prop.test.tsx
+++ b/src/matchers/__tests__/to-have-prop.test.tsx
@@ -31,25 +31,25 @@ test('.toHaveProp', () => {
   // title is no longer findable as it is a React child
   expect(() => expect(button).toHaveProp('title', 'ok'))
     .toThrowErrorMatchingInlineSnapshot(`
-    "expect(element).toHaveProp("title", "ok") // Element should have prop title with value "ok"
+    "expect(element).toHaveProp("title", "ok")
 
     Expected the element to have prop:
       title="ok"
     Received:
-      null"
+      undefined"
   `);
   expect(() => expect(button).toHaveProp('disabled'))
     .toThrowErrorMatchingInlineSnapshot(`
-    "expect(element).toHaveProp("disabled") // Element should have prop disabled
+    "expect(element).toHaveProp("disabled")
 
     Expected the element to have prop:
       disabled
     Received:
-      null"
+      undefined"
   `);
   expect(() => expect(text).not.toHaveProp('allowFontScaling', false))
     .toThrowErrorMatchingInlineSnapshot(`
-    "expect(element).not.toHaveProp("allowFontScaling", false) // Element should have prop allowFontScaling with value false
+    "expect(element).not.toHaveProp("allowFontScaling", false)
 
     Expected the element not to have prop:
       allowFontScaling=false
@@ -58,16 +58,16 @@ test('.toHaveProp', () => {
   `);
   expect(() => expect(text).toHaveProp('style'))
     .toThrowErrorMatchingInlineSnapshot(`
-    "expect(element).toHaveProp("style") // Element should have prop style
+    "expect(element).toHaveProp("style")
 
     Expected the element to have prop:
       style
     Received:
-      null"
+      undefined"
   `);
   expect(() => expect(text).toHaveProp('allowFontScaling', 'wrongValue'))
     .toThrowErrorMatchingInlineSnapshot(`
-    "expect(element).toHaveProp("allowFontScaling", "wrongValue") // Element should have prop allowFontScaling with value "wrongValue"
+    "expect(element).toHaveProp("allowFontScaling", "wrongValue")
 
     Expected the element to have prop:
       allowFontScaling="wrongValue"
diff --git a/src/matchers/to-have-prop.ts b/src/matchers/to-have-prop.ts
index de7cf23d1..db84d4052 100644
--- a/src/matchers/to-have-prop.ts
+++ b/src/matchers/to-have-prop.ts
@@ -2,16 +2,6 @@ import type { ReactTestInstance } from 'react-test-renderer';
 import { matcherHint, stringify, printExpected } from 'jest-matcher-utils';
 import { checkHostElement, formatMessage } from './utils';
 
-function printAttribute(name: string, value: unknown) {
-  return value === undefined ? name : `${name}=${stringify(value)}`;
-}
-
-function getPropComment(name: string, value: unknown) {
-  return value === undefined
-    ? `Element should have prop ${name}`
-    : `Element should have prop ${name} with value ${stringify(value)}`;
-}
-
 export function toHaveProp(
   this: jest.MatcherContext,
   element: ReactTestInstance,
@@ -20,35 +10,39 @@ export function toHaveProp(
 ) {
   checkHostElement(element, toHaveProp, this);
 
-  const propValue = element.props[name];
-
-  const isDefined = expectedValue !== undefined;
   const hasProp = name in element.props;
+  const value = element.props[name];
+
+  const pass =
+    expectedValue !== undefined
+      ? hasProp && this.equals(expectedValue, value)
+      : hasProp;
 
   return {
-    pass: isDefined
-      ? hasProp && this.equals(propValue, expectedValue)
-      : hasProp,
+    pass,
     message: () => {
       const to = this.isNot ? 'not to' : 'to';
-
-      const receivedProp = hasProp ? printAttribute(name, propValue) : null;
-      const matcher = matcherHint(
-        `${this.isNot ? '.not' : ''}.toHaveProp`,
-        'element',
-        printExpected(name),
-        {
-          secondArgument: isDefined ? printExpected(expectedValue) : undefined,
-          comment: getPropComment(name, expectedValue),
-        }
-      );
       return formatMessage(
-        matcher,
-        `Expected the element ${to} have prop`,
-        printAttribute(name, expectedValue),
+        matcherHint(
+          `${this.isNot ? '.not' : ''}.toHaveProp`,
+          'element',
+          printExpected(name),
+          {
+            secondArgument:
+              expectedValue !== undefined
+                ? printExpected(expectedValue)
+                : undefined,
+          }
+        ),
+        `Expected element ${to} have prop`,
+        formatProp(name, expectedValue),
         'Received',
-        receivedProp
+        hasProp ? formatProp(name, value) : undefined
       );
     },
   };
 }
+
+function formatProp(name: string, value: unknown) {
+  return value === undefined ? name : `${name}=${stringify(value)}`;
+}
diff --git a/src/matchers/utils.tsx b/src/matchers/utils.tsx
index e89a24f37..b79b65b3e 100644
--- a/src/matchers/utils.tsx
+++ b/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`,

From f539a62ebd56a0d58c4b0bc0f4550a2ad54c8214 Mon Sep 17 00:00:00 2001
From: Maciej Jastrzebski <mdjastrzebski@gmail.com>
Date: Fri, 1 Sep 2023 20:24:46 +0200
Subject: [PATCH 4/6] refactor: tweaks

---
 src/matchers/__tests__/to-have-prop.test.tsx | 10 +++---
 src/matchers/to-have-prop.ts                 | 34 ++++++++++----------
 2 files changed, 22 insertions(+), 22 deletions(-)

diff --git a/src/matchers/__tests__/to-have-prop.test.tsx b/src/matchers/__tests__/to-have-prop.test.tsx
index 345b386a2..9ef78f0e6 100644
--- a/src/matchers/__tests__/to-have-prop.test.tsx
+++ b/src/matchers/__tests__/to-have-prop.test.tsx
@@ -33,7 +33,7 @@ test('.toHaveProp', () => {
     .toThrowErrorMatchingInlineSnapshot(`
     "expect(element).toHaveProp("title", "ok")
 
-    Expected the element to have prop:
+    Expected element to have prop:
       title="ok"
     Received:
       undefined"
@@ -42,7 +42,7 @@ test('.toHaveProp', () => {
     .toThrowErrorMatchingInlineSnapshot(`
     "expect(element).toHaveProp("disabled")
 
-    Expected the element to have prop:
+    Expected element to have prop:
       disabled
     Received:
       undefined"
@@ -51,7 +51,7 @@ test('.toHaveProp', () => {
     .toThrowErrorMatchingInlineSnapshot(`
     "expect(element).not.toHaveProp("allowFontScaling", false)
 
-    Expected the element not to have prop:
+    Expected element not to have prop:
       allowFontScaling=false
     Received:
       allowFontScaling=false"
@@ -60,7 +60,7 @@ test('.toHaveProp', () => {
     .toThrowErrorMatchingInlineSnapshot(`
     "expect(element).toHaveProp("style")
 
-    Expected the element to have prop:
+    Expected element to have prop:
       style
     Received:
       undefined"
@@ -69,7 +69,7 @@ test('.toHaveProp', () => {
     .toThrowErrorMatchingInlineSnapshot(`
     "expect(element).toHaveProp("allowFontScaling", "wrongValue")
 
-    Expected the element to have prop:
+    Expected element to have prop:
       allowFontScaling="wrongValue"
     Received:
       allowFontScaling=false"
diff --git a/src/matchers/to-have-prop.ts b/src/matchers/to-have-prop.ts
index db84d4052..fd30d2d2f 100644
--- a/src/matchers/to-have-prop.ts
+++ b/src/matchers/to-have-prop.ts
@@ -10,34 +10,34 @@ export function toHaveProp(
 ) {
   checkHostElement(element, toHaveProp, this);
 
+  const isExpectedValueDefined = expectedValue !== undefined;
   const hasProp = name in element.props;
-  const value = element.props[name];
+  const receivedValue = element.props[name];
 
-  const pass =
-    expectedValue !== undefined
-      ? hasProp && this.equals(expectedValue, value)
-      : hasProp;
+  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(
-        matcherHint(
-          `${this.isNot ? '.not' : ''}.toHaveProp`,
-          'element',
-          printExpected(name),
-          {
-            secondArgument:
-              expectedValue !== undefined
-                ? printExpected(expectedValue)
-                : undefined,
-          }
-        ),
+        matcher,
         `Expected element ${to} have prop`,
         formatProp(name, expectedValue),
         'Received',
-        hasProp ? formatProp(name, value) : undefined
+        hasProp ? formatProp(name, receivedValue) : undefined
       );
     },
   };

From 5ecf1778fd522ab49180adb48ec108f6335203dd Mon Sep 17 00:00:00 2001
From: Maciej Jastrzebski <mdjastrzebski@gmail.com>
Date: Fri, 1 Sep 2023 22:56:44 +0200
Subject: [PATCH 5/6] refactor: final polishing

---
 src/matchers/__tests__/to-have-prop.test.tsx | 86 +++++++++++---------
 src/matchers/to-have-prop.ts                 | 10 ++-
 2 files changed, 56 insertions(+), 40 deletions(-)

diff --git a/src/matchers/__tests__/to-have-prop.test.tsx b/src/matchers/__tests__/to-have-prop.test.tsx
index 9ef78f0e6..0e3cfa3aa 100644
--- a/src/matchers/__tests__/to-have-prop.test.tsx
+++ b/src/matchers/__tests__/to-have-prop.test.tsx
@@ -1,79 +1,87 @@
 import React from 'react';
-import { Button, Text, View } from 'react-native';
+import { View, Text, TextInput } from 'react-native';
 import { render, screen } from '../..';
 import '../extend-expect';
 
-test('.toHaveProp', () => {
+test('.toHaveProp basic case', () => {
   render(
-    <View style={null} testID="view">
-      <Text allowFontScaling={false} testID="text" ellipsizeMode="head">
-        text
-      </Text>
-      <Button disabled testID="button" title="ok" />
+    <View testID="view" style={null}>
+      <Text ellipsizeMode="head">Hello</Text>
+      <TextInput testID="input" textAlign="right" />
     </View>
   );
 
-  const text = screen.getByTestId('text');
-  const button = screen.getByTestId('button');
   const view = screen.getByTestId('view');
+  expect(view).toHaveProp('style');
+  expect(view).toHaveProp('style', null);
+  expect(view).not.toHaveProp('ellipsizeMode');
 
-  expect(button).toHaveProp('accessibilityState', {
-    disabled: true,
-  });
+  const text = screen.getByText('Hello');
+  expect(text).toHaveProp('ellipsizeMode');
   expect(text).toHaveProp('ellipsizeMode', 'head');
-  expect(text).toHaveProp('allowFontScaling', false);
-
-  expect(button).not.toHaveProp('accessibilityStates');
-  expect(button).not.toHaveProp('ellipsizeMode', undefined);
-  expect(button).not.toHaveProp('allowFontScaling', false);
   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);
+});
 
-  // title is no longer findable as it is a React child
-  expect(() => expect(button).toHaveProp('title', 'ok'))
+test('.toHaveProp error messages', () => {
+  render(<View testID="view" collapsable={false} />);
+
+  const view = screen.getByTestId('view');
+
+  expect(() => expect(view).toHaveProp('accessible'))
     .toThrowErrorMatchingInlineSnapshot(`
-    "expect(element).toHaveProp("title", "ok")
+    "expect(element).toHaveProp("accessible")
 
     Expected element to have prop:
-      title="ok"
+      accessible
     Received:
       undefined"
   `);
-  expect(() => expect(button).toHaveProp('disabled'))
+
+  expect(() => expect(view).toHaveProp('accessible', true))
     .toThrowErrorMatchingInlineSnapshot(`
-    "expect(element).toHaveProp("disabled")
+    "expect(element).toHaveProp("accessible", true)
 
     Expected element to have prop:
-      disabled
+      accessible={true}
     Received:
       undefined"
   `);
-  expect(() => expect(text).not.toHaveProp('allowFontScaling', false))
+
+  expect(() => expect(view).not.toHaveProp('collapsable'))
     .toThrowErrorMatchingInlineSnapshot(`
-    "expect(element).not.toHaveProp("allowFontScaling", false)
+    "expect(element).not.toHaveProp("collapsable")
 
     Expected element not to have prop:
-      allowFontScaling=false
+      collapsable
     Received:
-      allowFontScaling=false"
+      collapsable={false}"
   `);
-  expect(() => expect(text).toHaveProp('style'))
+
+  expect(() => expect(view).toHaveProp('collapsable', true))
     .toThrowErrorMatchingInlineSnapshot(`
-    "expect(element).toHaveProp("style")
+    "expect(element).toHaveProp("collapsable", true)
 
     Expected element to have prop:
-      style
+      collapsable={true}
     Received:
-      undefined"
+      collapsable={false}"
   `);
-  expect(() => expect(text).toHaveProp('allowFontScaling', 'wrongValue'))
+
+  expect(() => expect(view).not.toHaveProp('collapsable', false))
     .toThrowErrorMatchingInlineSnapshot(`
-    "expect(element).toHaveProp("allowFontScaling", "wrongValue")
+    "expect(element).not.toHaveProp("collapsable", false)
 
-    Expected element to have prop:
-      allowFontScaling="wrongValue"
+    Expected element not to have prop:
+      collapsable={false}
     Received:
-      allowFontScaling=false"
+      collapsable={false}"
   `);
-
-  expect(view).toHaveProp('style', null);
 });
diff --git a/src/matchers/to-have-prop.ts b/src/matchers/to-have-prop.ts
index fd30d2d2f..036952fe0 100644
--- a/src/matchers/to-have-prop.ts
+++ b/src/matchers/to-have-prop.ts
@@ -44,5 +44,13 @@ export function toHaveProp(
 }
 
 function formatProp(name: string, value: unknown) {
-  return value === undefined ? name : `${name}=${stringify(value)}`;
+  if (value === undefined) {
+    return name;
+  }
+
+  if (typeof value === 'string') {
+    return `${name}="${value}"`;
+  }
+
+  return `${name}={${stringify(value)}}`;
 }

From e7e4589870442535c3695ba1f1c7ba619edae6aa Mon Sep 17 00:00:00 2001
From: Maciej Jastrzebski <mdjastrzebski@gmail.com>
Date: Fri, 1 Sep 2023 23:10:43 +0200
Subject: [PATCH 6/6] refactor: cleanup

---
 src/matchers/__tests__/to-be-disabled.test.tsx     | 14 +++++++-------
 .../__tests__/to-be-empty-element.test.tsx         |  2 +-
 .../__tests__/to-be-on-the-screen.test.tsx         |  2 +-
 .../__tests__/to-have-display-value.test.tsx       |  2 +-
 src/matchers/__tests__/to-have-prop.test.tsx       |  4 ++--
 5 files changed, 12 insertions(+), 12 deletions(-)

diff --git a/src/matchers/__tests__/to-be-disabled.test.tsx b/src/matchers/__tests__/to-be-disabled.test.tsx
index 854a970c5..59c8a408b 100644
--- a/src/matchers/__tests__/to-be-disabled.test.tsx
+++ b/src/matchers/__tests__/to-be-disabled.test.tsx
@@ -13,7 +13,7 @@ import {
 import { render } from '../..';
 import '../extend-expect';
 
-test('toBeDisabled/toBeEnabled supports basic case', () => {
+test('toBeDisabled()/toBeEnabled() supports basic case', () => {
   const screen = render(
     <View>
       <View testID="disabled-parent" aria-disabled>
@@ -87,7 +87,7 @@ test('toBeDisabled/toBeEnabled supports basic case', () => {
   `);
 });
 
-test('toBeDisabled/toBeEnabled supports Pressable with "disabled" prop', () => {
+test('toBeDisabled()/toBeEnabled() supports Pressable with "disabled" prop', () => {
   const screen = render(
     <Pressable disabled testID="subject">
       <Text>Button</Text>
@@ -161,7 +161,7 @@ test.each([
   ['TouchableWithoutFeedback', TouchableWithoutFeedback],
   ['TouchableNativeFeedback', TouchableNativeFeedback],
 ] as const)(
-  'toBeDisabled/toBeEnabled supports %s with "disabled" prop',
+  'toBeDisabled()/toBeEnabled() supports %s with "disabled" prop',
   (_, Component) => {
     const screen = render(
       // @ts-expect-error disabled prop is not available on all Touchables
@@ -194,7 +194,7 @@ test.each([
   ['TouchableWithoutFeedback', TouchableWithoutFeedback],
   ['TouchableNativeFeedback', TouchableNativeFeedback],
 ] as const)(
-  'toBeDisabled/toBeEnabled supports %s with "aria-disabled" prop',
+  'toBeDisabled()/toBeEnabled() supports %s with "aria-disabled" prop',
   (_, Component) => {
     const screen = render(
       // @ts-expect-error too generic for typescript
@@ -221,7 +221,7 @@ test.each([
   ['TouchableWithoutFeedback', TouchableWithoutFeedback],
   ['TouchableNativeFeedback', TouchableNativeFeedback],
 ] as const)(
-  'toBeDisabled/toBeEnabled supports %s with "accessibilityState.disabled" prop',
+  'toBeDisabled()/toBeEnabled() supports %s with "accessibilityState.disabled" prop',
   (_, Component) => {
     const screen = render(
       // @ts-expect-error disabled prop is not available on all Touchables
@@ -238,7 +238,7 @@ test.each([
   }
 );
 
-test('toBeDisabled/toBeEnabled supports "editable" prop on TextInput', () => {
+test('toBeDisabled()/toBeEnabled() supports "editable" prop on TextInput', () => {
   const screen = render(
     <View>
       <TextInput testID="enabled-by-default" />
@@ -256,7 +256,7 @@ test('toBeDisabled/toBeEnabled supports "editable" prop on TextInput', () => {
   expect(screen.getByTestId('disabled')).not.toBeEnabled();
 });
 
-test('toBeDisabled/toBeEnabled supports "disabled" prop on Button', () => {
+test('toBeDisabled()/toBeEnabled() supports "disabled" prop on Button', () => {
   const screen = render(
     <View>
       <Button testID="enabled" title="enabled" />
diff --git a/src/matchers/__tests__/to-be-empty-element.test.tsx b/src/matchers/__tests__/to-be-empty-element.test.tsx
index c9e3867b5..96d9e340b 100644
--- a/src/matchers/__tests__/to-be-empty-element.test.tsx
+++ b/src/matchers/__tests__/to-be-empty-element.test.tsx
@@ -9,7 +9,7 @@ function DoNotRenderChildren({ children }: { children: React.ReactNode }) {
   return null;
 }
 
-test('toBeEmptyElement()', () => {
+test('toBeEmptyElement() base case', () => {
   render(
     <View testID="not-empty">
       <View testID="empty" />
diff --git a/src/matchers/__tests__/to-be-on-the-screen.test.tsx b/src/matchers/__tests__/to-be-on-the-screen.test.tsx
index cfb6c8c8a..946f4a633 100644
--- a/src/matchers/__tests__/to-be-on-the-screen.test.tsx
+++ b/src/matchers/__tests__/to-be-on-the-screen.test.tsx
@@ -3,7 +3,7 @@ import { View, Text } from 'react-native';
 import { render, screen } from '../..';
 import '../extend-expect';
 
-test('example test', () => {
+test('toBeOnTheScreen() example test', () => {
   render(
     <View>
       <View testID="child" />
diff --git a/src/matchers/__tests__/to-have-display-value.test.tsx b/src/matchers/__tests__/to-have-display-value.test.tsx
index b523f81db..3567fee95 100644
--- a/src/matchers/__tests__/to-have-display-value.test.tsx
+++ b/src/matchers/__tests__/to-have-display-value.test.tsx
@@ -3,7 +3,7 @@ import { TextInput, View } from 'react-native';
 import { render, screen } from '../..';
 import '../extend-expect';
 
-test('example test', () => {
+test('toHaveDisplayValue() example test', () => {
   render(<TextInput testID="text-input" value="test" />);
 
   const textInput = screen.getByTestId('text-input');
diff --git a/src/matchers/__tests__/to-have-prop.test.tsx b/src/matchers/__tests__/to-have-prop.test.tsx
index 0e3cfa3aa..34f252526 100644
--- a/src/matchers/__tests__/to-have-prop.test.tsx
+++ b/src/matchers/__tests__/to-have-prop.test.tsx
@@ -3,7 +3,7 @@ import { View, Text, TextInput } from 'react-native';
 import { render, screen } from '../..';
 import '../extend-expect';
 
-test('.toHaveProp basic case', () => {
+test('toHaveProp() basic case', () => {
   render(
     <View testID="view" style={null}>
       <Text ellipsizeMode="head">Hello</Text>
@@ -30,7 +30,7 @@ test('.toHaveProp basic case', () => {
   expect(input).not.toHaveProp('editable', false);
 });
 
-test('.toHaveProp error messages', () => {
+test('toHaveProp() error messages', () => {
   render(<View testID="view" collapsable={false} />);
 
   const view = screen.getByTestId('view');