Call jest-diff and pretty-format more precisely in toHaveProperty mat…

…cher (#4445)

* Call diff more precisely in toHaveProperty matcher

* Write diff call on one line for readability

packages/expect/src/__tests__/__snapshots__/matchers.test.js.snap

@@ -2602,7 +2602,7 @@ To have a nested property:
 With a value of:
   <green>2</>
 Received:
-  <red>object</>.a.b.c: <red>{\\"d\\": 1}</>"
+  <red>1</>"
 `;
 
 exports[`.toHaveProperty() {pass: false} expect({"a": {"b": {"c": {"d": 1}}}}).toHaveProperty('a.b.ttt.d', 1) 1`] = `
@@ -2652,7 +2652,8 @@ To have a nested property:
 With a value of:
   <green>{\\"c\\": 4}</>
 Received:
-  <red>object</>.a: <red>{\\"b\\": {\\"c\\": 5}}</>
+  <red>{\\"c\\": 5}</>
+
 Difference:
 
 <green>- Expected</>
@@ -2674,7 +2675,8 @@ To have a nested property:
 With a value of:
   <green>undefined</>
 Received:
-  <red>object</>.a: <red>{\\"b\\": 3}</>
+  <red>3</>
+
 Difference:
 
   Comparing two different types of values. Expected <green>undefined</> but received <red>number</>."

packages/expect/src/matchers.js

@@ -27,7 +27,6 @@ import {
 import {
   getObjectSubset,
   getPath,
-  hasOwnProperty,
   iterableEquality,
   subsetEquality,
 } from './utils';
@@ -516,23 +515,10 @@ const matchers: MatchersObject = {
     const result = getPath(object, keyPath);
     const {lastTraversedObject, hasEndProp} = result;
 
-    let diffString;
-
-    if (valuePassed && hasOwnProperty(result, 'value')) {
-      diffString = diff(value, result.value, {
-        expand: this.expand,
-      });
-    }
-
     const pass = valuePassed
       ? equals(result.value, value, [iterableEquality])
       : hasEndProp;
 
-    if (hasOwnProperty(result, 'value')) {
-      // we don't diff numbers. So instead we'll show the object that contains the resulting value.
-      // And to get that object we need to go up a level.
-      result.traversedPath.pop();
-    }
     const traversedPath = result.traversedPath.join('.');
 
     const message = pass
@@ -546,22 +532,34 @@ const matchers: MatchersObject = {
           `Not to have a nested property:\n` +
           `  ${printExpected(keyPath)}\n` +
           (valuePassed ? `With a value of:\n  ${printExpected(value)}\n` : '')
-      : () =>
-          matcherHint('.toHaveProperty', 'object', 'path', {
-            secondArgument: valuePassed ? 'value' : null,
-          }) +
-          '\n\n' +
-          `Expected the object:\n` +
-          `  ${printReceived(object)}\n` +
-          `To have a nested property:\n` +
-          `  ${printExpected(keyPath)}\n` +
-          (valuePassed ? `With a value of:\n  ${printExpected(value)}\n` : '') +
-          (traversedPath
-            ? `Received:\n  ${RECEIVED_COLOR(
-                'object',
-              )}.${traversedPath}: ${printReceived(lastTraversedObject)}`
-            : '') +
-          (diffString ? `\nDifference:\n\n${diffString}` : '');
+      : () => {
+          const diffString =
+            valuePassed && hasEndProp
+              ? diff(value, result.value, {expand: this.expand})
+              : '';
+          return (
+            matcherHint('.toHaveProperty', 'object', 'path', {
+              secondArgument: valuePassed ? 'value' : null,
+            }) +
+            '\n\n' +
+            `Expected the object:\n` +
+            `  ${printReceived(object)}\n` +
+            `To have a nested property:\n` +
+            `  ${printExpected(keyPath)}\n` +
+            (valuePassed
+              ? `With a value of:\n  ${printExpected(value)}\n`
+              : '') +
+            (hasEndProp
+              ? `Received:\n` +
+                `  ${printReceived(result.value)}` +
+                (diffString ? `\n\nDifference:\n\n${diffString}` : '')
+              : traversedPath
+                ? `Received:\n  ${RECEIVED_COLOR(
+                    'object',
+                  )}.${traversedPath}: ${printReceived(lastTraversedObject)}`
+                : '')
+          );
+        };
     if (pass === undefined) {
       throw new Error('pass must be initialized');
     }