Diffing snapshot utility for Jest. Takes two values, and return their difference as a string, ready to be snapshotted with toMatchSnapshot(). Especially helpful when testing the difference between different React component states.
yarn add --dev snapshot-diffconst snapshotDiff = require('snapshot-diff'); test('snapshot difference between 2 strings', () => { expect(snapshotDiff(a, b)).toMatchSnapshot(); }); const React = require('react'); const Component = require('./Component'); test('snapshot difference between 2 React components state', () => { expect( snapshotDiff( <Component test="say" />, <Component test="my name" /> ) ).toMatchSnapshot(); });const { toMatchDiffSnapshot } = require('snapshot-diff'); expect.extend({ toMatchDiffSnapshot }); 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( <Component test="my name" /> ); });Produced snapshot:
exports[`snapshot difference between 2 strings 1`] = ` "- First value + Second value - abcx + abcy " `; exports[`snapshot difference between 2 React components state 1`] = ` "- <Component test=\\"say\\" /> + <Component test=\\"my name\\" /> @@ -27,11 +27,11 @@ <span /> <span /> <span /> <span /> <span> - say + my name </span> <span /> <span /> <span /> <span />" `;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:
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:
"jest": { "snapshotSerializers": [ "<rootDir>/node_modules/snapshot-diff/serializer.js" ] }type Options = { expand?: boolean, colors?: boolean, contextLines?: number }; // default export snapshotDiff(valueA: any, valueB: any, options?: Options) => string // custom matcher expect(valueA: any).toMatchDiffSnapshot(valueB: any, options?: Options) => voidexpand: boolean(default:false) – expand the diff, so the whole information is preservedcolors: boolean(default:false) – preserve color information from Jest diffcontextLines: number(default: 5) - number of context lines to be shown at the beginning and at the end of a snapshotaAnnotation: string(default:'First Value') - the annotation indicating from which serialization the-lines arebAnnotation: string(default:'Second Value') - the annotation indicating from which serialization the+lines are
Project is MIT-licensed. Pull Requests welcome!