Implement toMatchInlineDiffSnapshot custom matcher (#330)

Author: domsli

README.md

@@ -93,6 +93,13 @@ exports[`snapshot difference between 2 React components state 1`] = `
 `;
 ```
 
+### Inline Snapshots
+
+You might want to use inline snapshots.
+
+With a default matcher, you can use `toMatchInlineSnapshot` instead of
+`toMatchSnapshot`. With a custom matcher, you can use `toMatchInlineDiffSnapshot` instead of `toMatchDiffSnapshot`.
+
 ## Custom serializers
 
 By default, `snapshot-diff` uses a built in React serializer based on `react-test-renderer`. The

__tests__/toMatchInlineDiffSnapshot.test.js

@@ -0,0 +1,82 @@
+const snapshotDiff = require('../src/index');
+
+const a = `
+    some
+    some
+    some
+    some
+    some
+    some
+    some
+    not
+    very
+    long
+    script
+`;
+const b = `
+    some
+    some
+    some
+    some
+    some
+    some
+    some
+    not
+    so
+    very
+    long
+    script
+`;
+
+beforeAll(() => {
+  expect.extend({
+    toMatchInlineDiffSnapshot: snapshotDiff.toMatchInlineDiffSnapshot,
+  });
+});
+
+test('works with default options', () => {
+  expect(a).toMatchInlineDiffSnapshot(
+    b,
+    `
+    "Snapshot Diff:
+    - First value
+    + Second value
+
+    @@ -5,9 +5,10 @@
+          some
+          some
+          some
+          some
+          not
+    +     so
+          very
+          long
+          script
+    "
+  `
+  );
+});
+
+test('works with non-default options', () => {
+  expect(a).toMatchInlineDiffSnapshot(
+    b,
+    { stablePatchmarks: true },
+    `
+    "Snapshot Diff:
+    - First value
+    + Second value
+
+    @@ --- --- @@
+          some
+          some
+          some
+          some
+          not
+    +     so
+          very
+          long
+          script
+    "
+  `
+  );
+});

extend-expect.js

@@ -1,4 +1,4 @@
 /* global expect */
-const { toMatchDiffSnapshot } = require('./build/');
+const { toMatchDiffSnapshot, toMatchInlineDiffSnapshot } = require('./build/');
 
-expect.extend({ toMatchDiffSnapshot });
+expect.extend({ toMatchDiffSnapshot, toMatchInlineDiffSnapshot });

index.d.ts

@@ -40,6 +40,10 @@ declare module 'snapshot-diff' {
      * make it available via `expect.extend({ toMatchDiffSnapshot })`.
      */
     toMatchDiffSnapshot: jest.CustomMatcher;
+    /**
+     * Compare the changes from a to b with the diff inlined into tests
+     */
+    toMatchInlineDiffSnapshot: jest.CustomMatcher;
     /**
      * By default Jest adds extra quotes around strings so it makes diff
      * snapshots of objects too noisy. To fix this – snapshot-diff comes

src/index.js

@@ -91,6 +91,28 @@ function toMatchDiffSnapshot(
   return snapshot.toMatchSnapshot.call(this, difference, testName || '');
 }
 
+function toMatchInlineDiffSnapshot(
+  valueA: any,
+  valueB: any,
+  optionsOrSnapshot?: Options | string,
+  inlineSnapshot?: string
+) {
+  let options = undefined;
+  if (typeof optionsOrSnapshot === 'string') {
+    inlineSnapshot = optionsOrSnapshot;
+  } else {
+    options = optionsOrSnapshot;
+  }
+
+  const difference = snapshotDiff(valueA, valueB, options);
+
+  if (inlineSnapshot) {
+    return snapshot.toMatchInlineSnapshot.call(this, difference, inlineSnapshot);
+  } else {
+    return snapshot.toMatchInlineSnapshot.call(this, difference)
+  }
+}
+
 function getSnapshotDiffSerializer() {
   return {
     test(value: any) {
@@ -109,6 +131,7 @@ function setSerializers(customSerializers) {
 module.exports = snapshotDiff;
 module.exports.snapshotDiff = snapshotDiff;
 module.exports.toMatchDiffSnapshot = toMatchDiffSnapshot;
+module.exports.toMatchInlineDiffSnapshot = toMatchInlineDiffSnapshot;
 module.exports.getSnapshotDiffSerializer = getSnapshotDiffSerializer;
 module.exports.setSerializers = setSerializers;
 module.exports.defaultSerializers = defaultSerializers;