Need help with snapshot-diff?
Click the “chat” button below for chat support from the developer who created it, or find similar developers for support.

About the developer

507 Stars 37 Forks MIT License 137 Commits 16 Opened issues


Diffing snapshot utility for Jest

Services available


Need anything else?

Contributors list


Greenkeeper badge npm version

Diffing snapshot utility for Jest. Takes two values, and return their difference as a string, ready to be snapshotted with

. Especially helpful when testing the difference between different React component states.


yarn add --dev snapshot-diff


With default jest matcher

const 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(, ) ).toMatchSnapshot(); });

With custom matcher

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().toMatchDiffSnapshot( ); });

... alternatively import it once, for instance in your tests setup file:


Produced snapshot:

exports[`snapshot difference between 2 strings 1`] = `
"- First value
+ Second value

  • abcx
  • abcy " `;

exports[snapshot difference between 2 React components state 1] = ` "-

@@ -27,11 +27,11 @@

  • say
  • my name " `;

Custom serializers

By default,

uses a built in React serializer based on
. The serializers used can be set by calling
with an array of serializers to use. The order of serializers in this array may be important to you as serializers are tested in order until a match is found.

can be used to add new serializers for unsupported data types, or to set a different serializer for React components. If you want to keep the default React serializer in place, don't forget to add the default serializers to your list of serializers!

Adding a new custom serializer

const snapshotDiff = require('snapshot-diff');
const myCustomSerializer = require('./my-custom-serializer');

snapshotDiff.setSerializers([ ...snapshotDiff.defaultSerializers, // use default React serializer - add this if you want to serialise React components! myCustomSerializer ]);

Serializing React components with a different serializer

You can replace the default React serializer by omitting it from the serializer list. The following uses enzymes to-json serializer instead:

const snapshotDiff = require('snapshot-diff');
const enzymeToJson = require('enzyme-to-json/serializer');
const myCustomSerializer = require('./my-custom-serializer');

snapshotDiff.setSerializers([ enzymeToJson, // using enzymes serializer instead myCustomSerializer ]);

Snapshot serializer

By default Jest adds extra quotes around strings so it makes diff snapshots of objects too noisy. To fix this –

comes with custom serializer, which you can add directly in your tests or in
const snapshotDiff = require('snapshot-diff');


test('snapshot difference between 2 objects', () => { expect(snapshotDiff({ foo: 'bar' }, { foo: 'baz' })).toMatchSnapshot(); });

...or add it globally to your jest config:

// jest.config.js
module.exports = {
  snapshotSerializers: [


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, testName?: string) => void


  • expand: boolean
    ) – expand the diff, so the whole information is preserved
  • colors: boolean
    ) – 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
  • stablePatchmarks: boolean
    ) - prevent line number patch marks from appearing in diffs. This can be helpful when diffs are breaking only because of the patch marks. Changes
    @@ -1,1 +1,2 @@
    @@ --- --- @@
  • aAnnotation: string
    'First Value'
    ) - the annotation indicating from which serialization the
    lines are
  • bAnnotation: string
    'Second Value'
    ) - the annotation indicating from which serialization the
    lines are

Project is MIT-licensed. Pull Requests welcome!

We use cookies. If you continue to browse the site, you agree to the use of cookies. For more information on our use of cookies please see our Privacy Policy.