From 133a1118e19db47421db9cd18c1bcdc47345c338 Mon Sep 17 00:00:00 2001 From: =?UTF-8?q?Micha=C5=82=20Pierzcha=C5=82a?= Date: Fri, 25 Jan 2019 19:51:36 +0100 Subject: [PATCH] feat: add testName to toMatchDiffSnapshot --- README.md | 46 +++++++++---------- .../toMatchDiffSnapshot.test.js.snap | 18 ++++++++ __tests__/toMatchDiffSnapshot.test.js | 5 ++ index.d.ts | 4 +- src/index.js | 9 +++- 5 files changed, 53 insertions(+), 29 deletions(-) diff --git a/README.md b/README.md index db5dde5..8c2866c 100644 --- a/README.md +++ b/README.md @@ -7,6 +7,7 @@ Diffing snapshot utility for Jest. Takes two values, and return their difference Especially helpful when testing the difference between different React component states. ## Installation + ```bash yarn add --dev snapshot-diff ``` @@ -18,7 +19,7 @@ yarn add --dev snapshot-diff ```js const snapshotDiff = require('snapshot-diff'); -test('snapshot difference between 2 strings', () => { +test('snapshot difference between 2 strings', () => { expect(snapshotDiff(a, b)).toMatchSnapshot(); }); @@ -27,10 +28,7 @@ const Component = require('./Component'); test('snapshot difference between 2 React components state', () => { expect( - snapshotDiff( - , - - ) + snapshotDiff(, ) ).toMatchSnapshot(); }); ``` @@ -42,24 +40,20 @@ const { toMatchDiffSnapshot } = require('snapshot-diff'); expect.extend({ toMatchDiffSnapshot }); -test('snapshot difference between 2 strings', () => { +test('snapshot difference between 2 strings', () => { expect(a).toMatchDiffSnapshot(b); }); const React = require('react'); const Component = require('./Component'); -test('snapshot difference between 2 React components state', () => { - expect( - - ).toMatchDiffSnapshot( +test('snapshot difference between 2 React components state', () => { + expect().toMatchDiffSnapshot( - ); + ); }); ``` - - Produced snapshot: ```diff @@ -95,7 +89,7 @@ exports[`snapshot difference between 2 React components state 1`] = ` ## Snapshot serializer -By default Jest adds extra quotes around strings so it makes diff snapshots of objects too noisy. +By default Jest adds extra quotes around strings so it makes diff snapshots of objects too noisy. To fix this – `snapshot-diff` comes with custom serializer, which you can add directly in your tests or in `setupFiles` script: ```js @@ -103,7 +97,7 @@ const snapshotDiff = require('snapshot-diff'); expect.addSnapshotSerializer(snapshotDiff.getSnapshotDiffSerializer()); -test('snapshot difference between 2 objects', () => { +test('snapshot difference between 2 objects', () => { expect(snapshotDiff({ foo: 'bar' }, { foo: 'baz' })).toMatchSnapshot(); }); ``` @@ -111,10 +105,12 @@ test('snapshot difference between 2 objects', () => { ...or add it globally to your jest config: ```json -"jest": { - "snapshotSerializers": [ - "/node_modules/snapshot-diff/serializer.js" - ] +{ + "jest": { + "snapshotSerializers": [ + "/node_modules/snapshot-diff/serializer.js" + ] + } } ``` @@ -130,16 +126,16 @@ type Options = { // default export snapshotDiff(valueA: any, valueB: any, options?: Options) => string // custom matcher -expect(valueA: any).toMatchDiffSnapshot(valueB: any, options?: Options) => void +expect(valueA: any).toMatchDiffSnapshot(valueB: any, options?: Options, testName?: string) => void ``` ### Options -* `expand: boolean` (default: `false`) – expand the diff, so the whole information is preserved -* `colors: boolean` (default: `false`) – preserve color information from Jest diff -* `contextLines: number` (default: 5) - number of context lines to be shown at the beginning and at the end of a snapshot -* `aAnnotation: string` (default: `'First Value'`) - the annotation indicating from which serialization the `-` lines are -* `bAnnotation: string` (default: `'Second Value'`) - the annotation indicating from which serialization the `+` lines are +- `expand: boolean` (default: `false`) – expand the diff, so the whole information is preserved +- `colors: boolean` (default: `false`) – preserve color information from Jest diff +- `contextLines: number` (default: 5) - number of context lines to be shown at the beginning and at the end of a snapshot +- `aAnnotation: string` (default: `'First Value'`) - the annotation indicating from which serialization the `-` lines are +- `bAnnotation: string` (default: `'Second Value'`) - the annotation indicating from which serialization the `+` lines are --- diff --git a/__tests__/__snapshots__/toMatchDiffSnapshot.test.js.snap b/__tests__/__snapshots__/toMatchDiffSnapshot.test.js.snap index 6fafed2..4ccff72 100644 --- a/__tests__/__snapshots__/toMatchDiffSnapshot.test.js.snap +++ b/__tests__/__snapshots__/toMatchDiffSnapshot.test.js.snap @@ -48,6 +48,24 @@ exports[`proxies "expand" option(s) 1`] = ` " `; +exports[`works with custom name: slim 1`] = ` +"Snapshot Diff: +- First value ++ Second value + +@@ -5,9 +5,10 @@ + some + some + some + some + not ++ so + very + long + script + " +`; + exports[`works with default options 1`] = ` "Snapshot Diff: - First value diff --git a/__tests__/toMatchDiffSnapshot.test.js b/__tests__/toMatchDiffSnapshot.test.js index ddac07d..1dbdf70 100644 --- a/__tests__/toMatchDiffSnapshot.test.js +++ b/__tests__/toMatchDiffSnapshot.test.js @@ -47,3 +47,8 @@ test('works with default options', () => { }); } ); + +test('works with custom name', () => { + // $FlowFixMe + expect(a).toMatchDiffSnapshot(b, {}, 'slim'); +}); diff --git a/index.d.ts b/index.d.ts index 56a9167..edc662b 100644 --- a/index.d.ts +++ b/index.d.ts @@ -14,7 +14,7 @@ declare namespace jest { * Compare the difference between the actual in the `expect()` * vs the object inside `valueB` with some extra options. */ - toMatchDiffSnapshot(valueB: any, options?: DiffOptions): R + toMatchDiffSnapshot(valueB: any, options?: DiffOptions, testName?: string): R } } @@ -30,7 +30,7 @@ declare module "snapshot-diff" { */ toMatchDiffSnapshot: jest.CustomMatcher /** - * By default Jest adds extra quotes around strings so it makes diff + * By default Jest adds extra quotes around strings so it makes diff * snapshots of objects too noisy. To fix this – snapshot-diff comes * with custom serializer. */ diff --git a/src/index.js b/src/index.js index 840f0a0..5809294 100644 --- a/src/index.js +++ b/src/index.js @@ -88,10 +88,15 @@ function diffReactComponents(valueA: any, valueB: any, options: Options) { }); } -function toMatchDiffSnapshot(valueA: any, valueB: any, options?: Options) { +function toMatchDiffSnapshot( + valueA: any, + valueB: any, + options?: Options, + testName?: string +) { const difference = snapshotDiff(valueA, valueB, options); - return snapshot.toMatchSnapshot.call(this, difference); + return snapshot.toMatchSnapshot.call(this, difference, testName); } function getSnapshotDiffSerializer() {