Feature proposal: Take snapshots of comparisons

[ferrannp]

Do you want to request a feature or report a bug?

Feature.

What is the current behavior?

One use case is for a component with a lot of conditions depending on props. We end up
with a lot of huge and repetitive snapshots.

What is the expected behavior?

This was brought up in Twitter recently but I think this would be awesome:

This is what I was actually missing when writing my Jest snapshot articles, when for example for this one:

// RepoItem-Snapshot-test.snap (huge snapshot)
...
style={
  Array [
    Object {
      "backgroundColor": "transparent"
    },
    undefined
  ]
}
...

vs

// RepoItem-Snapshot-test.snap (huge snapshot)
...
style={
  Array [
    Object {
      "backgroundColor": "transparent"
    },
    Object {
      "backgroundColor": "#B2DFDB"
    }
  ]
}
...

I am only interested on that part and not in the whole snapshot again. So basically this method will generate a small snapshot containing only the differences between the 2 full snapshots.

[kentcdodds]

This would make snapshots reviewable. Right now they're very easy to make too big to be reviewable.

[tricoder42]

EDIT: Digging in twitter thread, I've found that @thejameskyle already did this: https://twitter.com/thejameskyle/status/874330782923243520

What about passing a diff to the toMatchSnapshot matcher. Something like:

expect(diff(<Component size="small" />, <Component size="small" />)).toMatchSnapshot()

I tried to calculate diff between snapshots using jest-diff... and then let jest to compare these diffs:

import React from 'react'
import diff from 'jest-diff'

it('', function() {
    expect(diff(<span>Hello World</span>, <span className='test'>Hello World</span>)).toMatchSnapshot()
})

Obviously, it needs to remove colors and maybe tweak the first diff, but it highlights the changes between snapshots.

What do you think?

[kentcdodds]

Sounds about good. Also, we'd want the same serializers applied.

[cpojer]

There are already (long!) issues tracking similar things: #2202 and #2197. I agree this needs to happen, but it needs somebody to champion the feature. @kentcdodds or @ferrannp are you up for it?

[kentcdodds]

Makes sense. Thanks @cpojer! It's unlikely I'll have any time to work on this anytime soon.

[thymikee]

Hey @kentcdodds @cpojer, good news: https://github.com/thymikee/snapshot-diff

[kentcdodds]

Thank you so much! This is so great! 🎉

Would love to see this built-in 😉

[cpojer]

Why were you keeping this from me? :D

[github-actions]

This issue has been automatically locked since there has not been any recent activity after it was closed. Please open a new issue for related bugs.
Please note this issue tracker is not a help forum. We recommend using StackOverflow or our discord channel for questions.