jest-snapshot: Improve report when the matcher has properties (#9104)

* jest-snapshot: Improve report when the matcher has properties

* Fix context in new matcher error test

* Update CHANGELOG.md

* Add test for received null when the matcher has properties

CHANGELOG.md

@@ -23,6 +23,7 @@
 - `[jest-matcher-utils]` Add `BigInt` support to `ensureNumbers` `ensureActualIsNumber`, `ensureExpectedIsNumber` ([#8382](https://github.com/facebook/jest/pull/8382))
 - `[jest-runner]` Warn if a worker had to be force exited ([#8206](https://github.com/facebook/jest/pull/8206))
 - `[jest-snapshot]` Display change counts in annotation lines ([#8982](https://github.com/facebook/jest/pull/8982))
+- `[jest-snapshot]` [**BREAKING**] Improve report when the matcher has properties ([#9104](https://github.com/facebook/jest/pull/9104))
 - `[@jest/test-result]` Create method to create empty `TestResult` ([#8867](https://github.com/facebook/jest/pull/8867))
 - `[jest-worker]` [**BREAKING**] Return a promise from `end()`, resolving with the information whether workers exited gracefully ([#8206](https://github.com/facebook/jest/pull/8206))
 - `[jest-reporters]` Transform file paths into hyperlinks ([#8980](https://github.com/facebook/jest/pull/8980))

e2e/__tests__/toMatchSnapshot.test.ts

@@ -255,7 +255,7 @@ test('handles property matchers with hint', () => {
     expect(stderr).toMatch(
       'Snapshot name: `handles property matchers with hint: descriptive hint 1`',
     );
-    expect(stderr).toMatch('Expected properties:');
+    expect(stderr).toMatch('Expected properties');
     expect(stderr).toMatch('Snapshots:   1 failed, 1 total');
     expect(exitCode).toBe(1);
   }
@@ -287,7 +287,7 @@ test('handles property matchers with deep properties', () => {
     expect(stderr).toMatch(
       'Snapshot name: `handles property matchers with deep properties 1`',
     );
-    expect(stderr).toMatch('Expected properties:');
+    expect(stderr).toMatch('Expected properties');
     expect(stderr).toMatch('Snapshots:   1 failed, 1 total');
     expect(exitCode).toBe(1);
   }

packages/jest-snapshot/src/State.ts

@@ -10,6 +10,7 @@ import {Config} from '@jest/types';
 
 import {getStackTraceLines, getTopFrame} from 'jest-message-util';
 import {
+  addExtraLineBreaks,
   getSnapshotData,
   keyToTestName,
   removeExtraLineBreaks,
@@ -198,7 +199,7 @@ export default class SnapshotState {
       this._uncheckedKeys.delete(key);
     }
 
-    const receivedSerialized = serialize(received);
+    const receivedSerialized = addExtraLineBreaks(serialize(received));
     const expected = isInline ? inlineSnapshot : this._snapshotData[key];
     const pass = expected === receivedSerialized;
     const hasSnapshot = expected !== undefined;

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

@@ -38,7 +38,7 @@ exports[`matcher error toMatchSnapshot Expected properties must be an object (no
 <b>Matcher error</>: Expected <g>properties</> must be an object
 
 Expected properties has type:  function
-Expected properties has value: <g>[Function properties]</>
+Expected properties has value: <g>[Function]</>
 `;
 
 exports[`matcher error toMatchSnapshot Expected properties must be an object (null) with hint 1`] = `
@@ -67,6 +67,23 @@ Snapshot state must be initialized
 Snapshot state has value: undefined
 `;
 
+exports[`matcher error toMatchSnapshot received value must be an object (non-null) 1`] = `
+<d>expect(</><r>received</><d>).</>toMatchSnapshot<d>(</><g>properties</><d>)</>
+
+<b>Matcher error</>: <r>received</> value must be an object when the matcher has <g>properties</>
+
+Received has type:  string
+Received has value: <r>"string"</>
+`;
+
+exports[`matcher error toMatchSnapshot received value must be an object (null) 1`] = `
+<d>expect(</><r>received</><d>).</>toMatchSnapshot<d>(</><g>properties</><d>)</>
+
+<b>Matcher error</>: <r>received</> value must be an object when the matcher has <g>properties</>
+
+Received has value: <r>null</>
+`;
+
 exports[`matcher error toThrowErrorMatchingInlineSnapshot Inline snapshot must be a string 1`] = `
 <d>expect(</><r>received</><d>).</>toThrowErrorMatchingInlineSnapshot<d>(</>snapshot<d>)</>
 
@@ -110,17 +127,31 @@ exports[`pass false toMatchInlineSnapshot with properties equals false with snap
 
 Snapshot name: \`with properties 1\`
 
-Expected properties: <g>{"id": "abcdef"}</>
-Received value:      <r>{"id": "abcdefg", "text": "Increase code coverage", "type": "ADD_ITEM"}</>
+<g>- Expected properties  - 1</>
+<r>+ Received value       + 3</>
+
+<d>  Object {</>
+<g>-   "id": "abcdef",</>
+<r>+   "id": "abcdefg",</>
+<r>+   "text": "Increase code coverage",</>
+<r>+   "type": "ADD_ITEM",</>
+<d>  }</>
 `;
 
 exports[`pass false toMatchInlineSnapshot with properties equals false without snapshot 1`] = `
 <d>expect(</><r>received</><d>).</>toMatchInlineSnapshot<d>(</><g>properties</><d>)</>
 
 Snapshot name: \`with properties 1\`
 
-Expected properties: <g>{"id": "abcdef"}</>
-Received value:      <r>{"id": "abcdefg", "text": "Increase code coverage", "type": "ADD_ITEM"}</>
+<g>- Expected properties  - 1</>
+<r>+ Received value       + 3</>
+
+<d>  Object {</>
+<g>-   "id": "abcdef",</>
+<r>+   "id": "abcdefg",</>
+<r>+   "text": "Increase code coverage",</>
+<r>+   "type": "ADD_ITEM",</>
+<d>  }</>
 `;
 
 exports[`pass false toMatchInlineSnapshot with properties equals true 1`] = `
@@ -165,13 +196,29 @@ This is likely because this test is run in a continuous integration (CI) environ
 Received: <r>"Write me if you can!"</>
 `;
 
-exports[`pass false toMatchSnapshot with properties equals false 1`] = `
+exports[`pass false toMatchSnapshot with properties equals false isLineDiffable false 1`] = `
+<d>expect(</><r>received</><d>).</>toMatchSnapshot<d>(</><g>properties</><d>)</>
+
+Snapshot name: \`with properties 1\`
+
+Expected properties: <g>{"name": "Error"}</>
+Received value:      <r>[RangeError: Invalid array length]</>
+`;
+
+exports[`pass false toMatchSnapshot with properties equals false isLineDiffable true 1`] = `
 <d>expect(</><r>received</><d>).</>toMatchSnapshot<d>(</><g>properties</><d>)</>
 
 Snapshot name: \`with properties 1\`
 
-Expected properties: <g>{"id": "abcdef"}</>
-Received value:      <r>{"id": "abcdefg", "text": "Increase code coverage", "type": "ADD_ITEM"}</>
+<g>- Expected properties  - 1</>
+<r>+ Received value       + 3</>
+
+<d>  Object {</>
+<g>-   "id": "abcdef",</>
+<r>+   "id": "abcdefg",</>
+<r>+   "text": "Increase code coverage",</>
+<r>+   "type": "ADD_ITEM",</>
+<d>  }</>
 `;
 
 exports[`pass false toMatchSnapshot with properties equals true 1`] = `
@@ -199,17 +246,17 @@ Snapshot: <g>"inline snapshot"</>
 Received: <r>"received"</>
 `;
 
-exports[`printDiffOrStringified backtick single line expected and received 1`] = `
+exports[`printSnapshotAndReceived backtick single line expected and received 1`] = `
 Snapshot: <g>"var foo = \`backtick\`;"</>
 Received: <r>"var foo = <i>tag</i>\`backtick\`;"</>
 `;
 
-exports[`printDiffOrStringified empty string expected and received single line 1`] = `
+exports[`printSnapshotAndReceived empty string expected and received single line 1`] = `
 Snapshot: <g>""</>
 Received: <r>"single line string"</>
 `;
 
-exports[`printDiffOrStringified empty string received and expected multi line 1`] = `
+exports[`printSnapshotAndReceived empty string received and expected multi line 1`] = `
 <g>- Snapshot  - 3</>
 <r>+ Received  + 0</>
 
@@ -218,7 +265,7 @@ exports[`printDiffOrStringified empty string received and expected multi line 1`
 <g>- string</>
 `;
 
-exports[`printDiffOrStringified escape backslash in multi line string 1`] = `
+exports[`printSnapshotAndReceived escape backslash in multi line string 1`] = `
 <g>- Snapshot  - 1</>
 <r>+ Received  + 2</>
 
@@ -227,22 +274,22 @@ exports[`printDiffOrStringified escape backslash in multi line string 1`] = `
 <r>+ <i>B</i>ack \\ slash</>
 `;
 
-exports[`printDiffOrStringified escape backslash in single line string 1`] = `
+exports[`printSnapshotAndReceived escape backslash in single line string 1`] = `
 Snapshot: <g>"<i>f</i>orward / slash and back \\\\ slash"</>
 Received: <r>"<i>F</i>orward / slash and back \\\\ slash"</>
 `;
 
-exports[`printDiffOrStringified escape double quote marks in string 1`] = `
+exports[`printSnapshotAndReceived escape double quote marks in string 1`] = `
 Snapshot: <g>"What does \\"<i>oo</i>bleck\\" mean?"</>
 Received: <r>"What does \\"<i>ew</i>bleck\\" mean?"</>
 `;
 
-exports[`printDiffOrStringified escape regexp 1`] = `
+exports[`printSnapshotAndReceived escape regexp 1`] = `
 Snapshot: <g>/\\\\\\\\\\("\\)/g</>
 Received: <r>/\\\\\\\\\\("\\)/</>
 `;
 
-exports[`printDiffOrStringified expand false 1`] = `
+exports[`printSnapshotAndReceived expand false 1`] = `
 <g>- Snapshot  - 1</>
 <r>+ Received  + 3</>
 
@@ -259,7 +306,7 @@ exports[`printDiffOrStringified expand false 1`] = `
 <d>  ↵</>
 `;
 
-exports[`printDiffOrStringified expand true 1`] = `
+exports[`printSnapshotAndReceived expand true 1`] = `
 <g>- Snapshot  - 1</>
 <r>+ Received  + 3</>
 
@@ -286,7 +333,7 @@ exports[`printDiffOrStringified expand true 1`] = `
 <d>  ↵</>
 `;
 
-exports[`printDiffOrStringified fallback to line diff 1`] = `
+exports[`printSnapshotAndReceived fallback to line diff 1`] = `
 <g>- Snapshot  - 1</>
 <r>+ Received  + 8</>
 
@@ -306,7 +353,7 @@ exports[`printDiffOrStringified fallback to line diff 1`] = `
 <r>+ ================================================================================</>
 `;
 
-exports[`printDiffOrStringified has no common after clean up chaff array 1`] = `
+exports[`printSnapshotAndReceived has no common after clean up chaff array 1`] = `
 <g>- Snapshot  - 2</>
 <r>+ Received  + 2</>
 
@@ -318,44 +365,44 @@ exports[`printDiffOrStringified has no common after clean up chaff array 1`] = `
 <d>  ]</>
 `;
 
-exports[`printDiffOrStringified has no common after clean up chaff string single line 1`] = `
+exports[`printSnapshotAndReceived has no common after clean up chaff string single line 1`] = `
 Snapshot: <g>"delete"</>
 Received: <r>"insert"</>
 `;
 
-exports[`printDiffOrStringified isLineDiffable false asymmetric matcher 1`] = `
+exports[`printSnapshotAndReceived isLineDiffable false asymmetric matcher 1`] = `
 Snapshot: <g>null</>
 Received: <r>Object {</>
 <r>  "asymmetricMatch": [Function],</>
 <r>}</>
 `;
 
-exports[`printDiffOrStringified isLineDiffable false boolean 1`] = `
+exports[`printSnapshotAndReceived isLineDiffable false boolean 1`] = `
 Snapshot: <g>true</>
 Received: <r>false</>
 `;
 
-exports[`printDiffOrStringified isLineDiffable false date 1`] = `
+exports[`printSnapshotAndReceived isLineDiffable false date 1`] = `
 Snapshot: <g>2019-09-19T00:00:00.000Z</>
 Received: <r>2019-09-20T00:00:00.000Z</>
 `;
 
-exports[`printDiffOrStringified isLineDiffable false error 1`] = `
+exports[`printSnapshotAndReceived isLineDiffable false error 1`] = `
 Snapshot: <g>[Error: Cannot spread fragment "NameAndAppearances" within itself.]</>
 Received: <r>[Error: Cannot spread fragment "NameAndAppearancesAndFriends" within itself.]</>
 `;
 
-exports[`printDiffOrStringified isLineDiffable false function 1`] = `
+exports[`printSnapshotAndReceived isLineDiffable false function 1`] = `
 Snapshot: <g>undefined</>
 Received: <r>[Function]</>
 `;
 
-exports[`printDiffOrStringified isLineDiffable false number 1`] = `
+exports[`printSnapshotAndReceived isLineDiffable false number 1`] = `
 Snapshot: <g>-0</>
 Received: <r>NaN</>
 `;
 
-exports[`printDiffOrStringified isLineDiffable true array 1`] = `
+exports[`printSnapshotAndReceived isLineDiffable true array 1`] = `
 <g>- Snapshot  - 0</>
 <r>+ Received  + 2</>
 
@@ -373,7 +420,7 @@ exports[`printDiffOrStringified isLineDiffable true array 1`] = `
 <d>  ]</>
 `;
 
-exports[`printDiffOrStringified isLineDiffable true object 1`] = `
+exports[`printSnapshotAndReceived isLineDiffable true object 1`] = `
 <g>- Snapshot  - 2</>
 <r>+ Received  + 3</>
 
@@ -389,7 +436,7 @@ exports[`printDiffOrStringified isLineDiffable true object 1`] = `
 <d>  }</>
 `;
 
-exports[`printDiffOrStringified isLineDiffable true single line expected and multi line received 1`] = `
+exports[`printSnapshotAndReceived isLineDiffable true single line expected and multi line received 1`] = `
 <g>- Snapshot  - 1</>
 <r>+ Received  + 3</>
 
@@ -399,15 +446,15 @@ exports[`printDiffOrStringified isLineDiffable true single line expected and mul
 <r>+ ]</>
 `;
 
-exports[`printDiffOrStringified isLineDiffable true single line expected and received 1`] = `
+exports[`printSnapshotAndReceived isLineDiffable true single line expected and received 1`] = `
 <g>- Snapshot  - 1</>
 <r>+ Received  + 1</>
 
 <g>- Array []</>
 <r>+ Object {}</>
 `;
 
-exports[`printDiffOrStringified multi line small change in one line and other is unchanged 1`] = `
+exports[`printSnapshotAndReceived multi line small change in one line and other is unchanged 1`] = `
 <g>- Snapshot  - 1</>
 <r>+ Received  + 1</>
 
@@ -416,7 +463,7 @@ exports[`printDiffOrStringified multi line small change in one line and other is
 <d>  Must be one of: 'Home'</>
 `;
 
-exports[`printDiffOrStringified multi line small changes 1`] = `
+exports[`printSnapshotAndReceived multi line small changes 1`] = `
 <g>- Snapshot  - 7</>
 <r>+ Received  + 7</>
 
@@ -437,12 +484,12 @@ exports[`printDiffOrStringified multi line small changes 1`] = `
 <r>+     at Object.doesNotThrow (__tests__/assertionError.test.js:7<i>0</i>:10)</>
 `;
 
-exports[`printDiffOrStringified single line large changes 1`] = `
+exports[`printSnapshotAndReceived single line large changes 1`] = `
 Snapshot: <g>"<i>A</i>rray length<i> must be a finite positive integer</i>"</>
 Received: <r>"<i>Invalid a</i>rray length"</>
 `;
 
-exports[`printDiffOrStringified without serialize backtick single line expected and multi line received 1`] = `
+exports[`printSnapshotAndReceived without serialize backtick single line expected and multi line received 1`] = `
 <g>- Snapshot  - 1</>
 <r>+ Received  + 2</>
 
@@ -451,15 +498,15 @@ exports[`printDiffOrStringified without serialize backtick single line expected
 <r>+ tick\`;</>
 `;
 
-exports[`printDiffOrStringified without serialize backtick single line expected and received 1`] = `
+exports[`printSnapshotAndReceived without serialize backtick single line expected and received 1`] = `
 <g>- Snapshot  - 1</>
 <r>+ Received  + 1</>
 
 <g>- var foo = \`backtick\`;</>
 <r>+ var foo = \`back<i>\${x}</i>tick\`;</>
 `;
 
-exports[`printDiffOrStringified without serialize has no common after clean up chaff multi line 1`] = `
+exports[`printSnapshotAndReceived without serialize has no common after clean up chaff multi line 1`] = `
 <g>- Snapshot  - 2</>
 <r>+ Received  + 2</>
 
@@ -469,15 +516,15 @@ exports[`printDiffOrStringified without serialize has no common after clean up c
 <r>+ 2</>
 `;
 
-exports[`printDiffOrStringified without serialize has no common after clean up chaff single line 1`] = `
+exports[`printSnapshotAndReceived without serialize has no common after clean up chaff single line 1`] = `
 <g>- Snapshot  - 1</>
 <r>+ Received  + 1</>
 
 <g>- delete</>
 <r>+ insert</>
 `;
 
-exports[`printDiffOrStringified without serialize prettier/pull/5590 1`] = `
+exports[`printSnapshotAndReceived without serialize prettier/pull/5590 1`] = `
 <g>- Snapshot  - 1</>
 <r>+ Received  + 1</>