jest-snapshot: Omit irrelevant received properties when property matchers fail (#9198)

* jest-snapshot: Omit irrelevant received properties

* Update CHANGELOG.md

* Edit comment in test that hash is missing

* Edit CHANGELOG.md

* Add comment to explain import hack

Author: pedrottimark

CHANGELOG.md

@@ -52,6 +52,7 @@
 - `[jest-snapshot]` Distinguish empty string from external snapshot not written ([#8880](https://github.com/facebook/jest/pull/8880))
 - `[jest-snapshot]` [**BREAKING**] Distinguish empty string from internal snapshot not written ([#8898](https://github.com/facebook/jest/pull/8898))
 - `[jest-snapshot]` [**BREAKING**] Remove `report` method and throw matcher errors ([#9049](https://github.com/facebook/jest/pull/9049))
+- `[jest-snapshot]` Omit irrelevant `received` properties when property matchers fail ([#9198](https://github.com/facebook/jest/pull/9198))
 - `[jest-transform]` Properly cache transformed files across tests ([#8890](https://github.com/facebook/jest/pull/8890))
 - `[jest-transform]` Don't fail the test suite when a generated source map is invalid ([#9058](https://github.com/facebook/jest/pull/9058))
 - `[jest-utils]` Allow querying process.domain ([#9136](https://github.com/facebook/jest/pull/9136))

packages/jest-snapshot/src/__tests__/__snapshots__/printSnapshot.test.ts.snap

@@ -128,13 +128,11 @@ exports[`pass false toMatchInlineSnapshot with properties equals false with snap
 Snapshot name: \`with properties 1\`
 
 <g>- Expected properties  - 1</>
-<r>+ Received value       + 3</>
+<r>+ Received value       + 1</>
 
 <d>  Object {</>
 <g>-   "id": "abcdef",</>
 <r>+   "id": "abcdefg",</>
-<r>+   "text": "Increase code coverage",</>
-<r>+   "type": "ADD_ITEM",</>
 <d>  }</>
 `;
 
@@ -144,13 +142,11 @@ exports[`pass false toMatchInlineSnapshot with properties equals false without s
 Snapshot name: \`with properties 1\`
 
 <g>- Expected properties  - 1</>
-<r>+ Received value       + 3</>
+<r>+ Received value       + 1</>
 
 <d>  Object {</>
 <g>-   "id": "abcdef",</>
 <r>+   "id": "abcdefg",</>
-<r>+   "text": "Increase code coverage",</>
-<r>+   "type": "ADD_ITEM",</>
 <d>  }</>
 `;
 
@@ -211,13 +207,11 @@ exports[`pass false toMatchSnapshot with properties equals false isLineDiffable
 Snapshot name: \`with properties 1\`
 
 <g>- Expected properties  - 1</>
-<r>+ Received value       + 3</>
+<r>+ Received value       + 1</>
 
 <d>  Object {</>
 <g>-   "id": "abcdef",</>
 <r>+   "id": "abcdefg",</>
-<r>+   "text": "Increase code coverage",</>
-<r>+   "type": "ADD_ITEM",</>
 <d>  }</>
 `;
 
@@ -246,6 +240,17 @@ Snapshot: <g>"inline snapshot"</>
 Received: <r>"received"</>
 `;
 
+exports[`printPropertiesAndReceived omit missing properties 1`] = `
+<g>- Expected properties  - 2</>
+<r>+ Received value       + 1</>
+
+<d>  Object {</>
+<g>-   "hash": Any<String>,</>
+<g>-   "path": Any<String>,</>
+<r>+   "path": "…",</>
+<d>  }</>
+`;
+
 exports[`printSnapshotAndReceived backtick single line expected and received 1`] = `
 Snapshot: <g>"var foo = \`backtick\`;"</>
 Received: <r>"var foo = <i>tag</i>\`backtick\`;"</>

packages/jest-snapshot/src/__tests__/printSnapshot.test.ts

@@ -11,7 +11,10 @@ import chalk = require('chalk');
 import format = require('pretty-format');
 
 import jestSnapshot = require('../index');
-import {printSnapshotAndReceived} from '../printSnapshot';
+import {
+  printPropertiesAndReceived,
+  printSnapshotAndReceived,
+} from '../printSnapshot';
 import {serialize} from '../utils';
 
 const convertAnsi = (val: string): string =>
@@ -599,6 +602,29 @@ describe('pass true', () => {
   });
 });
 
+describe('printPropertiesAndReceived', () => {
+  test('omit missing properties', () => {
+    const received = {
+      b: {},
+      branchMap: {},
+      f: {},
+      fnMap: {},
+      // hash is missing
+      path: '…',
+      s: {},
+      statementMap: {},
+    };
+    const properties = {
+      hash: expect.any(String),
+      path: expect.any(String),
+    };
+
+    expect(
+      printPropertiesAndReceived(properties, received, false),
+    ).toMatchSnapshot();
+  });
+});
+
 describe('printSnapshotAndReceived', () => {
   // Simulate default serialization.
   const testWithStringify = (

packages/jest-snapshot/src/printSnapshot.ts

@@ -6,6 +6,10 @@
  */
 
 import chalk = require('chalk');
+// Temporary hack because getObjectSubset has known limitations,
+// is not in the public interface of the expect package,
+// and the long-term goal is to use a non-serialization diff.
+import {getObjectSubset} from 'expect/build/utils';
 import {
   DIFF_DELETE,
   DIFF_EQUAL,
@@ -145,7 +149,7 @@ export const printPropertiesAndReceived = (
   if (isLineDiffable(properties) && isLineDiffable(received)) {
     return diffLinesUnified(
       serialize(properties).split('\n'),
-      serialize(received).split('\n'),
+      serialize(getObjectSubset(received, properties)).split('\n'),
       {
         aAnnotation,
         aColor: EXPECTED_COLOR,