Diff colors should show green for insert, red for delete

[Athaphian]

FEATURE REQUEST

When snapshot testing, the console shows differences between old and new snapshots with a DIFF view. The colors in the DIFF view are reversed as opposed to most other popular tools. Normally green is for inserts and red is for deletions. Jest shows this the wrong way around which is very confusing when using jest in combination with other diff tools (like bitbucket, git diff, intelliJ, etc).

So this feature request is: make deleted rows show as RED and inserted rows show as GREEN.

[SimenB]

See #2347 (comment) for some discussion.

I'm still in favour of doing something like this 🙂

[thymikee]

This is intended behavior.

Basically, in snapshot land GREEN is the accepted previous state. If something changed, Jest highlights new changes in RED to draw your attention, as this is potentially something that's failing, or just something that needs to be updated.

We get that it may be unintuitive at first glance, but it really makes sense. IMO we shouldn't change it.

[Athaphian]

It might be true that green was the accepted state... but this is a diff between the old snapshot and the new snapshot (the new snapshot will in most cases be accepted anyway). I still feel that stuff that is/will be inserted after a change should be + green and stuff that is/will be removed should be - red..

The number of times me and my coworkers have been searching for a problem that wasn't there because we simply misinterpreted the diff does not weigh up to being 'correct in snapshot land'. At least for us it doesn't.

Maybe add a config option to allow users to configure their own colors? That way everybody's happy..

[thymikee]

the new snapshot will in most cases be accepted anyway

Let's not generalize about "most cases", as it varies for different projects. But I'd be supportive to adding a config option, if it's not going to introduce a lot of extra complexity.

[Athaphian]

That would be awesome!

I agree that it might not be the case for every project indeed.

Thanks for being supportive.

[quantizor]

I’d like to propose some coloring changes. Since the rest of the snap is grey, what if the original diff was just white with the change being yellow/amber?

That way the diff is more of a warning than an error, since you might actually intend the change.

[manovotny]

I and two others on my team spent more time that we care to admit publicly tripped up over this.

Because of the removal of undefined props in Jest 23, we started seeing these failures and kept thinking to ourselves, "Why is it adding undefined props when it should be removing them?!".

It drove us mad until I realized the colors were flipped when I noticed the - and + next to Snapshot and Received.

I mean, we're fine now, as this will forever be seared into our brains going forward, but it was completely opposite compared to what we're all accustom to seeing in the dev world, like here on GitHub.

[silverwind]

How about adding an option like invertSnapshotDiff? Would that be acceptable for a contribution?

Edit: Actually I was on an older jest version that did not have #9132 yet, looks better now. While I don't agree with the background colors there on a dark terminal, at least the foreground is expected now.

[mbylstra]

I've been using Jest for years, and I still haven't gotten used to the color scheme. It didn't even dawn on me that the colours are reversed from the diffs I am used to, until just now. I just always struggled to read jest "expected" and "received", and I didn't know why. I mean, I consciously I understand the rationale of "green is good", "red is bad", but try convincing my subconscious of that. I think the fact that I use my code editor far more than jest (which has green for added, red for removed), is why my subconscious is trained on this. I would love to have a config option, at least for personal projects where I'm the only one working on it. Another option would be to use completely different colors that aren't overloaded with meaning, such as purple and blue, or perhaps using the same colour for both + and - lines (we already have the + and - symbols to visually distinguish the one, just to visually distinguish lines of interest to ones that aren't of interest). The different colouring isn't helping me one bit, it's doing the opposite.