feat: add testName to toMatchDiffSnapshot (#64)

Author: thymikee

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(
-      <Component test="say" />,
-      <Component test="my name" />
-    )
+    snapshotDiff(<Component test="say" />, <Component test="my name" />)
   ).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(
-    <Component test="say" />
-  ).toMatchDiffSnapshot(
+test('snapshot difference between 2 React components state', () => {
+  expect(<Component test="say" />).toMatchDiffSnapshot(
     <Component test="my name" />
-  );    
+  );
 });
 ```
 
-
-
 Produced snapshot:
 
 ```diff
@@ -95,26 +89,28 @@ 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
 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();
 });
 ```
 
 ...or add it globally to your jest config:
 
 ```json
-"jest": {
-  "snapshotSerializers": [
-    "<rootDir>/node_modules/snapshot-diff/serializer.js"
-  ]
+{
+  "jest": {
+    "snapshotSerializers": [
+      "<rootDir>/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
 
 ---
 

__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

__tests__/toMatchDiffSnapshot.test.js

@@ -47,3 +47,8 @@ test('works with default options', () => {
     });
   }
 );
+
+test('works with custom name', () => {
+  // $FlowFixMe
+  expect(a).toMatchDiffSnapshot(b, {}, 'slim');
+});

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.
      */

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() {