diff --git a/README.md b/README.md index 0f1020d..22ce68b 100644 --- a/README.md +++ b/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 diff --git a/__tests__/toMatchInlineDiffSnapshot.test.js b/__tests__/toMatchInlineDiffSnapshot.test.js new file mode 100644 index 0000000..597ea5f --- /dev/null +++ b/__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 + " + ` + ); +}); diff --git a/extend-expect.js b/extend-expect.js index ca25f65..00e7a8e 100644 --- a/extend-expect.js +++ b/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 }); diff --git a/index.d.ts b/index.d.ts index 98f68c5..2c4f933 100644 --- a/index.d.ts +++ b/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 diff --git a/src/index.js b/src/index.js index a32a213..6369fca 100644 --- a/src/index.js +++ b/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;