jest-snapshot: Highlight substring differences when matcher fails, part 3

CHANGELOG.md

@@ -4,6 +4,7 @@
 
 - `[expect]` Highlight substring differences when matcher fails, part 1 ([#8448](https://github.com/facebook/jest/pull/8448))
 - `[expect]` Highlight substring differences when matcher fails, part 2 ([#8528](https://github.com/facebook/jest/pull/8528))
+- `[expect]` Highlight substring differences when matcher fails, part 3 ([#8569](https://github.com/facebook/jest/pull/8569))
 - `[jest-cli]` Improve chai support (with detailed output, to match jest exceptions) ([#8454](https://github.com/facebook/jest/pull/8454))
 - `[*]` Manage the global timeout with `--testTimeout` command line argument. ([#8456](https://github.com/facebook/jest/pull/8456))
 - `[pretty-format]` Render custom displayName of memoized components

e2e/__tests__/__snapshots__/failures.test.ts.snap

@@ -790,11 +790,8 @@ FAIL __tests__/snapshot.test.js
 
     Snapshot name: \`failing snapshot 1\`
 
-    - Snapshot
-    + Received
-
-    - "bar"
-    + "foo"
+    Snapshot: "bar"
+    Received: "foo"
 
        9 | 
       10 | test('failing snapshot', () => {
@@ -819,11 +816,8 @@ FAIL __tests__/snapshotWithHint.test.js
 
     Snapshot name: \`failing snapshot with hint: descriptive hint 1\`
 
-    - Snapshot
-    + Received
-
-    - "bar"
-    + "foo"
+    Snapshot: "bar"
+    Received: "foo"
 
        9 | 
       10 | test('failing snapshot with hint', () => {

e2e/__tests__/__snapshots__/watchModeUpdateSnapshot.test.ts.snap

@@ -6,10 +6,8 @@ FAIL __tests__/bar.spec.js
   ● bar
     expect(received).toMatchSnapshot()
     Snapshot name: \`bar 1\`
-    - Snapshot
-    + Received
-    - "foo"
-    + "bar"
+    Snapshot: "foo"
+    Received: "bar"
       1 |
     > 2 |       test('bar', () => { expect('bar').toMatchSnapshot(); });
         |                                         ^

e2e/__tests__/toMatchSnapshot.test.ts

@@ -108,7 +108,7 @@ test('first snapshot fails, second passes', () => {
     writeFiles(TESTS_DIR, {[filename]: template([`'kiwi'`, `'banana'`])});
     const {stderr, status} = runJest(DIR, ['-w=1', '--ci=false', filename]);
     expect(stderr).toMatch('Snapshot name: `snapshots 1`');
-    expect(stderr).toMatch('- "apple"\n    + "kiwi"');
+    expect(stderr).toMatch('Snapshot: "apple"\n    Received: "kiwi"');
     expect(stderr).not.toMatch('1 obsolete snapshot found');
     expect(status).toBe(1);
   }

packages/jest-snapshot/src/index.ts

@@ -16,6 +16,7 @@ import {
   EXPECTED_COLOR,
   matcherHint,
   MatcherHintOptions,
+  printDiffOrStringify,
   RECEIVED_COLOR,
 } from 'jest-matcher-utils';
 import {
@@ -48,6 +49,12 @@ const NOT_SNAPSHOT_MATCHERS = `.${BOLD_WEIGHT(
   'not',
 )} cannot be used with snapshot matchers`;
 
+const SNAPSHOT_LABEL = 'Snapshot';
+const RECEIVED_LABEL = 'Received';
+
+// The optional property of matcher context is true if undefined.
+const isExpand = (expand?: boolean): boolean => expand !== false;
+
 const HINT_ARG = BOLD_WEIGHT('hint');
 const INLINE_SNAPSHOT_ARG = 'snapshot';
 const PROPERTY_MATCHERS_ARG = 'properties';
@@ -324,12 +331,40 @@ const _toMatchSnapshot = ({
       `(CI) environment in which snapshots are not written by default.\n\n` +
       `${RECEIVED_COLOR('Received value')} ` +
       `${actual}`;
+  } else if (
+    typeof received === 'string' &&
+    typeof expected === 'string' &&
+    // Does expected snapshot look like a stringified string:
+    expected.length >= 2 &&
+    ((expected.startsWith('"') && expected.endsWith('"')) || // single line
+      (expected.startsWith('\n"') && expected.endsWith('"\n'))) // multi line
+  ) {
+    // Assign to local variable because of declaration let expected:
+    // TypeScript thinks it could change before report function is called.
+    const reported =
+      `Snapshot name: ${printName(currentTestName, hint, count)}\n\n` +
+      printDiffOrStringify(
+        // 1. Remove leading and trailing newline if multiple line string.
+        // 2. Remove enclosing double quote marks.
+        // 3. Remove backslash escape preceding backslash here,
+        //    because unescape replaced it only preceding double quote mark.
+        expected
+          .trim()
+          .slice(1, -1)
+          .replace(/\\\\/g, '\\'),
+        received,
+        SNAPSHOT_LABEL,
+        RECEIVED_LABEL,
+        isExpand(snapshotState.expand),
+      );
+
+    report = () => reported;
   } else {
     expected = (expected || '').trim();
     actual = (actual || '').trim();
     const diffMessage = diff(expected, actual, {
-      aAnnotation: 'Snapshot',
-      bAnnotation: 'Received',
+      aAnnotation: SNAPSHOT_LABEL,
+      bAnnotation: RECEIVED_LABEL,
       expand: snapshotState.expand,
     });