Add custom serializer for cleaner snapshots (#12)

Author: avocadowastaken

README.md

@@ -11,7 +11,7 @@ yarn add --dev snapshot-diff
 
 ## Usage
 
-##### With default jest matcher
+#### With default jest matcher
 
 ```js
 const snapshotDiff = require('snapshot-diff');
@@ -33,7 +33,7 @@ test('snapshot difference between 2 React components state', () => {
 });
 ```
 
-##### With custom matcher
+#### With custom matcher
 
 ```js
 const { toMatchDiffSnapshot } = require('snapshot-diff');
@@ -91,12 +91,38 @@ 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. 
+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', () => {  
+  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"
+    ]
+}
+```
+
 ## API
 
 ```js
 type Options = {
   expand?: boolean,
-  colors?: boolean
+  colors?: boolean,
+  contextLines?: number
 };
 
 // default export

__tests__/__snapshots__/getSnapshotDiffSerializer.test.js.snap

@@ -0,0 +1,36 @@
+// Jest Snapshot v1, https://goo.gl/fbAQLP
+
+exports[`serialize array diff output 1`] = `
+Snapshot Diff:
+- First value
++ Second value
+
+ Array [
+   "foo",
+-  "bar",
+   "baz",
++  "quoz",
+ ]
+`;
+
+exports[`serialize object diff output 1`] = `
+Snapshot Diff:
+- First value
++ Second value
+
+ Object {
+-  "foo": "bar",
++  "foo": "baz",
+ }
+`;
+
+exports[`serialize text diff output 1`] = `
+Snapshot Diff:
+- First value
++ Second value
+
+ foo
+-bar
+ baz
++quoz
+`;

__tests__/__snapshots__/snapshotDiff.test.js.snap

@@ -1,7 +1,8 @@
 // Jest Snapshot v1, https://goo.gl/fbAQLP
 
 exports[`can colorize diff 1`] = `
-"- First value
+"Snapshot Diff:
+- First value
 + Second value
 
 @@ -5,8 +5,9 @@
@@ -17,7 +18,8 @@ exports[`can colorize diff 1`] = `
 `;
 
 exports[`can expand diff 1`] = `
-"- First value
+"Snapshot Diff:
+- First value
 + Second value
 
   
@@ -36,15 +38,17 @@ exports[`can expand diff 1`] = `
 `;
 
 exports[`can use contextLines on diff 1`] = `
-"- First value
+"Snapshot Diff:
+- First value
 + Second value
 
 @@ -10,0 +10,1 @@
 +    so"
 `;
 
 exports[`can use contextLines with React components 1`] = `
-"- <Component test=\\"say\\" />
+"Snapshot Diff:
+- <Component test=\\"say\\" />
 + <Component test=\\"my name\\" />
 
 @@ -6,1 +6,1 @@
@@ -59,7 +63,8 @@ exports[`can use contextLines with React components 1`] = `
 `;
 
 exports[`collapses diffs and strips ansi by default 1`] = `
-"- First value
+"Snapshot Diff:
+- First value
 + Second value
 
 @@ -5,8 +5,9 @@
@@ -75,7 +80,8 @@ exports[`collapses diffs and strips ansi by default 1`] = `
 `;
 
 exports[`detects React components 1`] = `
-"- <Component test=\\"say\\" />
+"Snapshot Diff:
+- <Component test=\\"say\\" />
 + <Component test=\\"my name\\" />
 
 @@ -1,14 +1,14 @@
@@ -111,7 +117,8 @@ exports[`detects React components 1`] = `
 `;
 
 exports[`diffs short strings 1`] = `
-"- First value
+"Snapshot Diff:
+- First value
 + Second value
 
  

__tests__/__snapshots__/toMatchDiffSnapshot.test.js.snap

@@ -1,7 +1,8 @@
 // Jest Snapshot v1, https://goo.gl/fbAQLP
 
 exports[`proxies "colors" option(s) 1`] = `
-"- First value
+"Snapshot Diff:
+- First value
 + Second value
 
 @@ -5,8 +5,9 @@
@@ -17,15 +18,17 @@ exports[`proxies "colors" option(s) 1`] = `
 `;
 
 exports[`proxies "contextLines" option(s) 1`] = `
-"- First value
+"Snapshot Diff:
+- First value
 + Second value
 
 @@ -10,0 +10,1 @@
 +    so"
 `;
 
 exports[`proxies "expand" option(s) 1`] = `
-"- First value
+"Snapshot Diff:
+- First value
 + Second value
 
   
@@ -44,7 +47,8 @@ exports[`proxies "expand" option(s) 1`] = `
 `;
 
 exports[`works with default options 1`] = `
-"- First value
+"Snapshot Diff:
+- First value
 + Second value
 
 @@ -5,8 +5,9 @@

__tests__/getSnapshotDiffSerializer.test.js

@@ -0,0 +1,24 @@
+// @flow
+
+const snapshotDiff = require('../src/index');
+
+expect.addSnapshotSerializer(snapshotDiff.getSnapshotDiffSerializer());
+
+test('serialize text diff output', () => {
+  expect(
+    snapshotDiff(
+      ['foo', 'bar', 'baz'].join('\n'),
+      ['foo', 'baz', 'quoz'].join('\n')
+    )
+  ).toMatchSnapshot();
+});
+
+test('serialize array diff output', () => {
+  expect(
+    snapshotDiff(['foo', 'bar', 'baz'], ['foo', 'baz', 'quoz'])
+  ).toMatchSnapshot();
+});
+
+test('serialize object diff output', () => {
+  expect(snapshotDiff({ foo: 'bar' }, { foo: 'baz' })).toMatchSnapshot();
+});

__tests__/index.test.js

@@ -4,9 +4,15 @@ test('public api', () => {
   expect(index).toBeInstanceOf(Function);
   expect(index.snapshotDiff).toBe(index);
   expect(index.toMatchDiffSnapshot).toBeInstanceOf(Function);
+  expect(index.getSnapshotDiffSerializer).toBeInstanceOf(Function);
 
-  const { snapshotDiff, toMatchDiffSnapshot } = require('../src/index');
+  const {
+    snapshotDiff,
+    toMatchDiffSnapshot,
+    getSnapshotDiffSerializer,
+  } = require('../src/index');
 
   expect(snapshotDiff).toBe(index);
   expect(toMatchDiffSnapshot).toBe(index.toMatchDiffSnapshot);
+  expect(getSnapshotDiffSerializer).toBe(index.getSnapshotDiffSerializer);
 });

serializer.js

@@ -0,0 +1,3 @@
+var snapshotDiff = require('./build');
+
+module.exports = snapshotDiff.getSnapshotDiffSerializer();

src/index.js

@@ -21,6 +21,8 @@ const defaultOptions = {
   contextLines: -1, // Forces to use default from Jest
 };
 
+const SNAPSHOT_TITLE = 'Snapshot Diff:\n';
+
 const snapshotDiff = (valueA: any, valueB: any, options?: Options): string => {
   let difference;
   const mergedOptions = Object.assign({}, defaultOptions, options);
@@ -33,10 +35,11 @@ const snapshotDiff = (valueA: any, valueB: any, options?: Options): string => {
 
   if (!mergedOptions.colors) {
     const stripAnsi = require('strip-ansi');
-    return stripAnsi(difference);
+
+    difference = stripAnsi(difference);
   }
 
-  return difference;
+  return SNAPSHOT_TITLE + difference;
 };
 
 const isReactComponent = (value: any) =>
@@ -71,6 +74,18 @@ function toMatchDiffSnapshot(valueA: any, valueB: any, options?: Options) {
   return snapshot.toMatchSnapshot.call(this, difference);
 }
 
+function getSnapshotDiffSerializer() {
+  return {
+    test(value: any) {
+      return typeof value === 'string' && value.indexOf(SNAPSHOT_TITLE) === 0;
+    },
+    print(value: any) {
+      return value;
+    },
+  };
+}
+
 module.exports = snapshotDiff;
 module.exports.snapshotDiff = snapshotDiff;
 module.exports.toMatchDiffSnapshot = toMatchDiffSnapshot;
+module.exports.getSnapshotDiffSerializer = getSnapshotDiffSerializer;