refactor: tweaks

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"

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)}`;
+}

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`,