fix(jest-snapshot): pass snapshotFormat through when diffing failing snapshots (#13181)

Author: SimenB

CHANGELOG.md

@@ -4,6 +4,8 @@
 
 ### Fixes
 
+- `[jest-snapshot]` Pass `snapshotFormat` through when diffing snapshots ([#13181](https://github.com/facebook/jest/pull/13181))
+
 ### Chore & Maintenance
 
 ### Performance

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

@@ -39,6 +39,38 @@ exports[`basic support: snapshot updated 1`] = `
 "
 `;
 
+exports[`diff with prototype is correct 1`] = `
+"FAIL __tests__/with-prototype-diff.test.js
+  ✕ diff with prototype is correct
+
+  ● diff with prototype is correct
+
+    expect(received).toMatchInlineSnapshot(snapshot)
+
+    Snapshot name: \`diff with prototype is correct 1\`
+
+    - Snapshot  - 1
+    + Received  + 1
+
+    - Object {
+    + {
+        "hello": "world",
+      }
+
+      1 | test('diff with prototype is correct', () => {
+    > 2 |   expect({ hello: 'world' }).toMatchInlineSnapshot(\`
+        |                              ^
+      3 |     Object {
+      4 |       "hello": "world",
+      5 |     }
+
+      at Object.toMatchInlineSnapshot (__tests__/with-prototype-diff.test.js:2:30)
+
+ › 1 snapshot failed.
+Snapshot Summary
+ › 1 snapshot failed from 1 test suite. Inspect your code changes or re-run jest with \`-u\` to update them."
+`;
+
 exports[`do not indent empty lines: initial write 1`] = `
 "test('inline snapshots', () =>
   expect(\`hello

e2e/__tests__/failureDetailsProperty.test.ts

@@ -94,7 +94,7 @@ test('that the failureDetails property is set', () => {
         "p1": "hello",
         "p2": "world",
       }",
-                "expected": "Object {
+                "expected": "{
         "p1": "hello",
         "p2": "sunshine",
       }",
@@ -219,7 +219,7 @@ test('that the failureDetails property is set', () => {
         "p1": "hello",
         "p2": "world",
       }",
-              "expected": "Object {
+              "expected": "{
         "p1": "hello",
         "p2": "sunshine",
       }",

e2e/__tests__/toMatchInlineSnapshot.test.ts

@@ -7,7 +7,7 @@
 
 import * as path from 'path';
 import * as fs from 'graceful-fs';
-import {cleanup, makeTemplate, writeFiles} from '../Utils';
+import {cleanup, extractSummary, makeTemplate, writeFiles} from '../Utils';
 import runJest from '../runJest';
 
 const DIR = path.resolve(__dirname, '../to-match-inline-snapshot');
@@ -396,3 +396,21 @@ test('indentation is correct in the presences of existing snapshots, when the fi
   expect(exitCode).toBe(0);
   expect(fileAfter).toMatchSnapshot('existing snapshot');
 });
+
+test('diff with prototype is correct', () => {
+  const filename = 'with-prototype-diff.test.js';
+  const test = `
+    test('diff with prototype is correct', () => {
+      expect({ hello: 'world' }).toMatchInlineSnapshot(\`
+        Object {
+          "hello": "world",
+        }
+      \`);
+    });
+  `;
+
+  writeFiles(TESTS_DIR, {[filename]: test});
+  const {stderr, exitCode} = runJest(DIR, ['--run-in-band', filename]);
+  expect(extractSummary(stderr).rest).toMatchSnapshot();
+  expect(exitCode).toBe(1);
+});

e2e/failureDetails-property/__tests__/tests.test.js

@@ -20,7 +20,7 @@ describe('my test', () => {
       p1: 'hello',
       p2: 'world',
     }).toMatchInlineSnapshot(`
-      Object {
+      {
         "p1": "hello",
         "p2": "sunshine",
       }

packages/jest-snapshot/src/State.ts

@@ -8,9 +8,8 @@
 import * as fs from 'graceful-fs';
 import type {Config} from '@jest/types';
 import {getStackTraceLines, getTopFrame} from 'jest-message-util';
-import type {OptionsReceived as PrettyFormatOptions} from 'pretty-format';
 import {InlineSnapshot, saveInlineSnapshots} from './InlineSnapshots';
-import type {SnapshotData} from './types';
+import type {SnapshotData, SnapshotFormat} from './types';
 import {
   addExtraLineBreaks,
   getSnapshotData,
@@ -23,28 +22,28 @@ import {
 } from './utils';
 
 export type SnapshotStateOptions = {
-  updateSnapshot: Config.SnapshotUpdateState;
-  prettierPath?: string | null;
-  expand?: boolean;
-  snapshotFormat: PrettyFormatOptions;
-  rootDir: string;
+  readonly updateSnapshot: Config.SnapshotUpdateState;
+  readonly prettierPath?: string | null;
+  readonly expand?: boolean;
+  readonly snapshotFormat: SnapshotFormat;
+  readonly rootDir: string;
 };
 
 export type SnapshotMatchOptions = {
-  testName: string;
-  received: unknown;
-  key?: string;
-  inlineSnapshot?: string;
-  isInline: boolean;
-  error?: Error;
+  readonly testName: string;
+  readonly received: unknown;
+  readonly key?: string;
+  readonly inlineSnapshot?: string;
+  readonly isInline: boolean;
+  readonly error?: Error;
 };
 
 type SnapshotReturnOptions = {
-  actual: string;
-  count: number;
-  expected?: string;
-  key: string;
-  pass: boolean;
+  readonly actual: string;
+  readonly count: number;
+  readonly expected?: string;
+  readonly key: string;
+  readonly pass: boolean;
 };
 
 type SaveStatus = {
@@ -57,15 +56,16 @@ export default class SnapshotState {
   private _dirty: boolean;
   // @ts-expect-error - seemingly unused?
   private _index: number;
-  private _updateSnapshot: Config.SnapshotUpdateState;
+  private readonly _updateSnapshot: Config.SnapshotUpdateState;
   private _snapshotData: SnapshotData;
-  private _initialData: SnapshotData;
-  private _snapshotPath: string;
+  private readonly _initialData: SnapshotData;
+  private readonly _snapshotPath: string;
   private _inlineSnapshots: Array<InlineSnapshot>;
-  private _uncheckedKeys: Set<string>;
-  private _prettierPath: string | null;
-  private _snapshotFormat: PrettyFormatOptions;
-  private _rootDir: string;
+  private readonly _uncheckedKeys: Set<string>;
+  private readonly _prettierPath: string | null;
+  private readonly _rootDir: string;
+
+  readonly snapshotFormat: SnapshotFormat;
 
   added: number;
   expand: boolean;
@@ -93,7 +93,7 @@ export default class SnapshotState {
     this.unmatched = 0;
     this._updateSnapshot = options.updateSnapshot;
     this.updated = 0;
-    this._snapshotFormat = options.snapshotFormat;
+    this.snapshotFormat = options.snapshotFormat;
     this._rootDir = options.rootDir;
   }
 
@@ -213,7 +213,7 @@ export default class SnapshotState {
     }
 
     const receivedSerialized = addExtraLineBreaks(
-      serialize(received, undefined, this._snapshotFormat),
+      serialize(received, undefined, this.snapshotFormat),
     );
     const expected = isInline ? inlineSnapshot : this._snapshotData[key];
     const pass = expected === receivedSerialized;

packages/jest-snapshot/src/index.ts

@@ -394,6 +394,7 @@ const _toMatchSnapshot = (config: MatchSnapshotConfig) => {
             actual,
             received,
             snapshotState.expand,
+            snapshotState.snapshotFormat,
           )}`;
 
   // Passing the actual and expected objects so that a custom reporter

packages/jest-snapshot/src/printSnapshot.ts

@@ -40,7 +40,7 @@ import {
   bForeground3,
 } from './colors';
 import {dedentLines} from './dedentLines';
-import type {MatchSnapshotConfig} from './types';
+import type {MatchSnapshotConfig, SnapshotFormat} from './types';
 import {deserializeString, minify, serialize} from './utils';
 
 type Chalk = chalk.Chalk;
@@ -235,6 +235,7 @@ export const printSnapshotAndReceived = (
   b: string, // received serialized but without extra line breaks
   received: unknown,
   expand: boolean, // CLI options: true if `--expand` or false if `--no-expand`
+  snapshotFormat: SnapshotFormat,
 ): string => {
   const aAnnotation = 'Snapshot';
   const bAnnotation = 'Received';
@@ -303,7 +304,7 @@ export const printSnapshotAndReceived = (
 
     // Fall through to fix a regression for custom serializers
     // like jest-snapshot-serializer-raw that ignore the indent option.
-    const b0 = serialize(received, 0);
+    const b0 = serialize(received, 0, snapshotFormat);
     if (b0 !== b) {
       const aLines0 = dedentLines(aLines2);
 

packages/jest-snapshot/src/types.ts

@@ -6,6 +6,7 @@
  */
 
 import type {MatcherContext} from 'expect';
+import type {PrettyFormatOptions} from 'pretty-format';
 import type SnapshotState from './State';
 
 export interface Context extends MatcherContext {
@@ -63,3 +64,5 @@ export interface SnapshotMatchers<R extends void | Promise<void>, T> {
    */
   toThrowErrorMatchingInlineSnapshot(snapshot?: string): R;
 }
+
+export type SnapshotFormat = Omit<PrettyFormatOptions, 'compareKeys'>;