From df052d7dd0658b1396cde2802f2ff666557d8c2d Mon Sep 17 00:00:00 2001 From: Simen Bekkhus Date: Fri, 26 Aug 2022 14:59:46 +0200 Subject: [PATCH 1/7] fix(jest-snapshot): pass `snapshotFormat` through when diffing failing snapshots --- CHANGELOG.md | 2 ++ .../toMatchInlineSnapshot.test.ts.snap | 32 +++++++++++++++++++ e2e/__tests__/toMatchInlineSnapshot.test.ts | 20 +++++++++++- packages/jest-snapshot/src/State.ts | 6 ++-- packages/jest-snapshot/src/index.ts | 1 + packages/jest-snapshot/src/printSnapshot.ts | 4 ++- 6 files changed, 60 insertions(+), 5 deletions(-) diff --git a/CHANGELOG.md b/CHANGELOG.md index 8324d5bf116c..26faa3a6c64d 100644 --- a/CHANGELOG.md +++ b/CHANGELOG.md @@ -4,6 +4,8 @@ ### Fixes +- `[jest-snapshot]` Pass `snapshotFormat` through when diffing snapshots + ### Chore & Maintenance ### Performance diff --git a/e2e/__tests__/__snapshots__/toMatchInlineSnapshot.test.ts.snap b/e2e/__tests__/__snapshots__/toMatchInlineSnapshot.test.ts.snap index 20d1b74005f9..e98439987c06 100644 --- a/e2e/__tests__/__snapshots__/toMatchInlineSnapshot.test.ts.snap +++ b/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__/existing-snapshot.test.js + ✕ existing snapshot + + ● existing snapshot + + expect(received).toMatchInlineSnapshot(snapshot) + + Snapshot name: \`existing snapshot 1\` + + - Snapshot - 1 + + Received + 1 + + - Object { + + { + "hello": "world", + } + + 1 | test('existing snapshot', () => { + > 2 | expect({ hello: 'world' }).toMatchInlineSnapshot(\` + | ^ + 3 | Object { + 4 | "hello": "world", + 5 | } + + at Object.toMatchInlineSnapshot (__tests__/existing-snapshot.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 diff --git a/e2e/__tests__/toMatchInlineSnapshot.test.ts b/e2e/__tests__/toMatchInlineSnapshot.test.ts index d85d50b15af5..62c90cf4baa7 100644 --- a/e2e/__tests__/toMatchInlineSnapshot.test.ts +++ b/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 = 'existing-snapshot.test.js'; + const test = ` + test('existing snapshot', () => { + 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); +}); diff --git a/packages/jest-snapshot/src/State.ts b/packages/jest-snapshot/src/State.ts index 021c77c0e5a0..e459b7c618c5 100644 --- a/packages/jest-snapshot/src/State.ts +++ b/packages/jest-snapshot/src/State.ts @@ -64,7 +64,7 @@ export default class SnapshotState { private _inlineSnapshots: Array; private _uncheckedKeys: Set; private _prettierPath: string | null; - private _snapshotFormat: PrettyFormatOptions; + snapshotFormat: Omit; private _rootDir: string; added: number; @@ -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; diff --git a/packages/jest-snapshot/src/index.ts b/packages/jest-snapshot/src/index.ts index 398ba5909e08..adf570b82476 100644 --- a/packages/jest-snapshot/src/index.ts +++ b/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 diff --git a/packages/jest-snapshot/src/printSnapshot.ts b/packages/jest-snapshot/src/printSnapshot.ts index 7ccd9bd41cfb..d4e630e60e9f 100644 --- a/packages/jest-snapshot/src/printSnapshot.ts +++ b/packages/jest-snapshot/src/printSnapshot.ts @@ -7,6 +7,7 @@ import chalk = require('chalk'); import {getObjectSubset} from '@jest/expect-utils'; +import type {SnapshotFormat} from '@jest/schemas'; import { DIFF_DELETE, DIFF_EQUAL, @@ -235,6 +236,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 +305,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); From 77c4404553bd753d390260bb7b44440ad1a7422b Mon Sep 17 00:00:00 2001 From: Simen Bekkhus Date: Fri, 26 Aug 2022 15:00:46 +0200 Subject: [PATCH 2/7] changelog --- CHANGELOG.md | 2 +- 1 file changed, 1 insertion(+), 1 deletion(-) diff --git a/CHANGELOG.md b/CHANGELOG.md index 26faa3a6c64d..96547b440a06 100644 --- a/CHANGELOG.md +++ b/CHANGELOG.md @@ -4,7 +4,7 @@ ### Fixes -- `[jest-snapshot]` Pass `snapshotFormat` through when diffing snapshots +- `[jest-snapshot]` Pass `snapshotFormat` through when diffing snapshots ([#13181](https://github.com/facebook/jest/pull/13181)) ### Chore & Maintenance From b41e560099e16324c83386989c239358f7e42552 Mon Sep 17 00:00:00 2001 From: Simen Bekkhus Date: Fri, 26 Aug 2022 15:04:21 +0200 Subject: [PATCH 3/7] use single type --- packages/jest-snapshot/src/State.ts | 7 +++---- packages/jest-snapshot/src/printSnapshot.ts | 3 +-- packages/jest-snapshot/src/types.ts | 3 +++ 3 files changed, 7 insertions(+), 6 deletions(-) diff --git a/packages/jest-snapshot/src/State.ts b/packages/jest-snapshot/src/State.ts index e459b7c618c5..53c9bbe45ea9 100644 --- a/packages/jest-snapshot/src/State.ts +++ b/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, @@ -26,7 +25,7 @@ export type SnapshotStateOptions = { updateSnapshot: Config.SnapshotUpdateState; prettierPath?: string | null; expand?: boolean; - snapshotFormat: PrettyFormatOptions; + snapshotFormat: SnapshotFormat; rootDir: string; }; @@ -64,7 +63,7 @@ export default class SnapshotState { private _inlineSnapshots: Array; private _uncheckedKeys: Set; private _prettierPath: string | null; - snapshotFormat: Omit; + snapshotFormat: SnapshotFormat; private _rootDir: string; added: number; diff --git a/packages/jest-snapshot/src/printSnapshot.ts b/packages/jest-snapshot/src/printSnapshot.ts index d4e630e60e9f..dfcf771ac41a 100644 --- a/packages/jest-snapshot/src/printSnapshot.ts +++ b/packages/jest-snapshot/src/printSnapshot.ts @@ -7,7 +7,6 @@ import chalk = require('chalk'); import {getObjectSubset} from '@jest/expect-utils'; -import type {SnapshotFormat} from '@jest/schemas'; import { DIFF_DELETE, DIFF_EQUAL, @@ -41,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; diff --git a/packages/jest-snapshot/src/types.ts b/packages/jest-snapshot/src/types.ts index 1aebc1be21df..43a2e35f1950 100644 --- a/packages/jest-snapshot/src/types.ts +++ b/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, T> { */ toThrowErrorMatchingInlineSnapshot(snapshot?: string): R; } + +export type SnapshotFormat = Omit; From a142961e87b659fb899c1c2c8dafbe6dc5c48cfc Mon Sep 17 00:00:00 2001 From: Simen Bekkhus Date: Fri, 26 Aug 2022 15:05:21 +0200 Subject: [PATCH 4/7] update test name --- .../__snapshots__/toMatchInlineSnapshot.test.ts.snap | 12 ++++++------ e2e/__tests__/toMatchInlineSnapshot.test.ts | 4 ++-- 2 files changed, 8 insertions(+), 8 deletions(-) diff --git a/e2e/__tests__/__snapshots__/toMatchInlineSnapshot.test.ts.snap b/e2e/__tests__/__snapshots__/toMatchInlineSnapshot.test.ts.snap index e98439987c06..f573e3168a2e 100644 --- a/e2e/__tests__/__snapshots__/toMatchInlineSnapshot.test.ts.snap +++ b/e2e/__tests__/__snapshots__/toMatchInlineSnapshot.test.ts.snap @@ -40,14 +40,14 @@ exports[`basic support: snapshot updated 1`] = ` `; exports[`diff with prototype is correct 1`] = ` -"FAIL __tests__/existing-snapshot.test.js - ✕ existing snapshot +"FAIL __tests__/with-prototype-diff.test.js + ✕ diff with prototype is correct - ● existing snapshot + ● diff with prototype is correct expect(received).toMatchInlineSnapshot(snapshot) - Snapshot name: \`existing snapshot 1\` + Snapshot name: \`diff with prototype is correct 1\` - Snapshot - 1 + Received + 1 @@ -57,14 +57,14 @@ exports[`diff with prototype is correct 1`] = ` "hello": "world", } - 1 | test('existing snapshot', () => { + 1 | test('diff with prototype is correct', () => { > 2 | expect({ hello: 'world' }).toMatchInlineSnapshot(\` | ^ 3 | Object { 4 | "hello": "world", 5 | } - at Object.toMatchInlineSnapshot (__tests__/existing-snapshot.test.js:2:30) + at Object.toMatchInlineSnapshot (__tests__/with-prototype-diff.test.js:2:30) › 1 snapshot failed. Snapshot Summary diff --git a/e2e/__tests__/toMatchInlineSnapshot.test.ts b/e2e/__tests__/toMatchInlineSnapshot.test.ts index 62c90cf4baa7..cf2155d95d67 100644 --- a/e2e/__tests__/toMatchInlineSnapshot.test.ts +++ b/e2e/__tests__/toMatchInlineSnapshot.test.ts @@ -398,9 +398,9 @@ test('indentation is correct in the presences of existing snapshots, when the fi }); test('diff with prototype is correct', () => { - const filename = 'existing-snapshot.test.js'; + const filename = 'with-prototype-diff.test.js'; const test = ` - test('existing snapshot', () => { + test('diff with prototype is correct', () => { expect({ hello: 'world' }).toMatchInlineSnapshot(\` Object { "hello": "world", From d91674f577cec1f7b084d3d98971714c90008880 Mon Sep 17 00:00:00 2001 From: Simen Bekkhus Date: Fri, 26 Aug 2022 15:11:28 +0200 Subject: [PATCH 5/7] update more snaps --- e2e/__tests__/failureDetailsProperty.test.ts | 28 +++++++++++--------- 1 file changed, 16 insertions(+), 12 deletions(-) diff --git a/e2e/__tests__/failureDetailsProperty.test.ts b/e2e/__tests__/failureDetailsProperty.test.ts index ee301386e088..ca7161c48d16 100644 --- a/e2e/__tests__/failureDetailsProperty.test.ts +++ b/e2e/__tests__/failureDetailsProperty.test.ts @@ -102,10 +102,11 @@ test('that the failureDetails property is set', () => { Snapshot name: \`my test a snapshot failure 1\` - - Snapshot - 1 - + Received + 1 + - Snapshot - 2 + + Received + 2 - { + - Object { + + { "p1": "hello", - "p2": "sunshine", + "p2": "world", @@ -120,10 +121,11 @@ test('that the failureDetails property is set', () => { Snapshot name: \`my test a snapshot failure 1\` - - Snapshot - 1 - + Received + 1 + - Snapshot - 2 + + Received + 2 - { + - Object { + + { "p1": "hello", - "p2": "sunshine", + "p2": "world", @@ -133,10 +135,11 @@ test('that the failureDetails property is set', () => { Snapshot name: \`my test a snapshot failure 1\` - - Snapshot - 1 - + Received + 1 + - Snapshot - 2 + + Received + 2 - { + - Object { + + { "p1": "hello", - "p2": "sunshine", + "p2": "world", @@ -227,10 +230,11 @@ test('that the failureDetails property is set', () => { Snapshot name: \`my test a snapshot failure 1\` - - Snapshot - 1 - + Received + 1 + - Snapshot - 2 + + Received + 2 - { + - Object { + + { "p1": "hello", - "p2": "sunshine", + "p2": "world", From c805e4bea1efcf344a51f262a720b201b9046b48 Mon Sep 17 00:00:00 2001 From: Simen Bekkhus Date: Fri, 26 Aug 2022 15:13:25 +0200 Subject: [PATCH 6/7] get better diff --- e2e/__tests__/failureDetailsProperty.test.ts | 32 ++++++++----------- .../__tests__/tests.test.js | 2 +- 2 files changed, 15 insertions(+), 19 deletions(-) diff --git a/e2e/__tests__/failureDetailsProperty.test.ts b/e2e/__tests__/failureDetailsProperty.test.ts index ca7161c48d16..c7a7144c6116 100644 --- a/e2e/__tests__/failureDetailsProperty.test.ts +++ b/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", }", @@ -102,11 +102,10 @@ test('that the failureDetails property is set', () => { Snapshot name: \`my test a snapshot failure 1\` - - Snapshot - 2 - + Received + 2 + - Snapshot - 1 + + Received + 1 - - Object { - + { + { "p1": "hello", - "p2": "sunshine", + "p2": "world", @@ -121,11 +120,10 @@ test('that the failureDetails property is set', () => { Snapshot name: \`my test a snapshot failure 1\` - - Snapshot - 2 - + Received + 2 + - Snapshot - 1 + + Received + 1 - - Object { - + { + { "p1": "hello", - "p2": "sunshine", + "p2": "world", @@ -135,11 +133,10 @@ test('that the failureDetails property is set', () => { Snapshot name: \`my test a snapshot failure 1\` - - Snapshot - 2 - + Received + 2 + - Snapshot - 1 + + Received + 1 - - Object { - + { + { "p1": "hello", - "p2": "sunshine", + "p2": "world", @@ -222,7 +219,7 @@ test('that the failureDetails property is set', () => { "p1": "hello", "p2": "world", }", - "expected": "Object { + "expected": "{ "p1": "hello", "p2": "sunshine", }", @@ -230,11 +227,10 @@ test('that the failureDetails property is set', () => { Snapshot name: \`my test a snapshot failure 1\` - - Snapshot - 2 - + Received + 2 + - Snapshot - 1 + + Received + 1 - - Object { - + { + { "p1": "hello", - "p2": "sunshine", + "p2": "world", diff --git a/e2e/failureDetails-property/__tests__/tests.test.js b/e2e/failureDetails-property/__tests__/tests.test.js index e9134e93a0de..4602fe51c60b 100644 --- a/e2e/failureDetails-property/__tests__/tests.test.js +++ b/e2e/failureDetails-property/__tests__/tests.test.js @@ -20,7 +20,7 @@ describe('my test', () => { p1: 'hello', p2: 'world', }).toMatchInlineSnapshot(` - Object { + { "p1": "hello", "p2": "sunshine", } From 0664351e30ab008672eb750b34d7927cdfaec6e0 Mon Sep 17 00:00:00 2001 From: Simen Bekkhus Date: Fri, 26 Aug 2022 15:17:00 +0200 Subject: [PATCH 7/7] make a bunch of snapshot state properties readonly --- packages/jest-snapshot/src/State.ts | 47 +++++++++++++++-------------- 1 file changed, 24 insertions(+), 23 deletions(-) diff --git a/packages/jest-snapshot/src/State.ts b/packages/jest-snapshot/src/State.ts index 53c9bbe45ea9..e216b79fc76f 100644 --- a/packages/jest-snapshot/src/State.ts +++ b/packages/jest-snapshot/src/State.ts @@ -22,28 +22,28 @@ import { } from './utils'; export type SnapshotStateOptions = { - updateSnapshot: Config.SnapshotUpdateState; - prettierPath?: string | null; - expand?: boolean; - snapshotFormat: SnapshotFormat; - 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 = { @@ -56,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; - private _uncheckedKeys: Set; - private _prettierPath: string | null; - snapshotFormat: SnapshotFormat; - private _rootDir: string; + private readonly _uncheckedKeys: Set; + private readonly _prettierPath: string | null; + private readonly _rootDir: string; + + readonly snapshotFormat: SnapshotFormat; added: number; expand: boolean;