question-mark
Stuck on an issue?

Lightrun Answers was designed to reduce the constant googling that comes with debugging 3rd party libraries. ItĀ collects links to all the places you might be looking at while hunting down a tough bug.

And, if youā€™re still stuck at the end, weā€™re happy to hop on a call to see how we can help out.

Configurable diff algorithm for snapshots

See original GitHub issue

šŸš€ Feature Proposal

Iā€™d be able to run Jest with more human-friendly diff algorithms like ā€˜patienceā€™ or ā€˜histogramā€™, for example:

jest --diff-algo patience

Maybe even better, Iā€™d be able to ā€œpipeā€ Jest output to a diff utility of my choice, for example:

jest --save-snapshots expected.txt actual.txt && code --diff expected.txt actual.txt
Screenshot 2019-10-02 at 21 03 21

There are two main advantages to this second approach:

  1. Jest doesnā€™t need to implement all the possible algorithms
  2. I can plug in any diffing utility I like. For example, I could do this:
    • Use Gitā€™s algorithms: ... && git diff --no-index --diff-algorithm=histogram expected.txt actual.txt
    • Use Beyond Compare: ... && bcompare expected.txt actual.txt
    • Using specific utils for specific formats: json-diff, html-differ, etc.

Motivation

Currently, snapshots are diffā€™d using the Myers algorithm which is quite basic. I regularly encounter situations like this:

Snapshot:

{
  "users": [
    { "id": 1, "name": "Alice" },
    { "id": 2, "name": "Bob" },
    { "id": 3, "name": "Charlie" }
  ],
  "products": [
    { "id": 1, "name": "Product 1" },
    { "id": 2, "name": "Product 2" },
    { "id": 3, "name": "Product 3" },
    { "id": 4, "name": "Product 4" },
    { "id": 5, "name": "Product 5" }
  ]
}

Actual:

{
  "users": null,
  "products": [
    { "id": 1, "name": "Product 1" },
    { "id": 2, "name": "Product 2" },
    { "id": 3, "name": "Product 3" },
    { "id": 4, "name": "Product 4" },
    { "id": 5, "name": "Product 5" }
  ]
}

Diff:

- { "id": 1, "name": "Alice" }
+ { "id": 1, "name": "Product 1" }
...
- { "id": 2, "name": "Bob" }
+ { "id": 2, "name": "Product 2" }

Here is another example of how the diffs can be different: https://gist.github.com/roryokane/6f9061d3a60c1ba41237

Pitch

Why does this feature belong in the Jest core platform? Because user-land reporters like jest-stare (which supports side-by-side diff in HTML) only take the output of Jest, so if the primary output is not diffed smartly already, they wonā€™t help the situation too much.

Other

This feature request now includes some ideas from comments below, specifically, https://github.com/facebook/jest/issues/8998#issuecomment-537638906.

Issue Analytics

  • State:closed
  • Created 4 years ago
  • Reactions:3
  • Comments:10 (3 by maintainers)

github_iconTop GitHub Comments

2reactions
borekbcommented, Oct 2, 2019

data-driven difference instead of serialization difference

My colleague @JanVoracek actually had the very same idea today šŸ˜„. I was initially skeptical but he explained very nicely how it would work and that it would be a big improvement over string-based diffs. So itā€™s quite exciting to hear that youā€™re considering it!

1reaction
pedrottimarkcommented, Oct 2, 2019

Thank you for a follow up https://github.com/facebook/jest/issues/8998#issuecomment-537638906 which is pure gold:

  • Yeah, mismatching id properties are like what diff does to braces and newlines in code
  • I like your pipeline examples and will put that approach into my mental slow cooker šŸ˜‰
Read more comments on GitHub >

github_iconTop Results From Across the Web

Options to determine differences between contents of ...
Run the distcp diff command to determine the difference between contents of specified source and target snapshots, and use the command with the...
Read more >
snapper man page - System Administration
Snapper is a command-line program for filesystem snapshot management. It can create, delete and compare snapshots and undo changes done between snapshots.
Read more >
10 System recovery and snapshot management with Snapper
With this configuration snapshot, pairs are made whenever a package is installed (line 9). ... To display the diff for a certain file,...
Read more >
ResponseSnapshot ā€” Response Snapshot v1.0.1
ResponseSnapshot (Response Snapshot v1.0.1) View Source. ResponseSnapshot is a testing tool for Elixir that captures the output of responses and ensuresĀ ...
Read more >
Documentation Ā» Configuration
algorithm patience: Defines which diff algorithm should be used. Ā· ignore_whitespace []: Defines how to deal with whitespace differences. Ā· ignore_crlf trueĀ ...
Read more >

github_iconTop Related Medium Post

No results found

github_iconTop Related StackOverflow Question

No results found

github_iconTroubleshoot Live Code

Lightrun enables developers to add logs, metrics and snapshots to live code - no restarts or redeploys required.
Start Free

github_iconTop Related Reddit Thread

No results found

github_iconTop Related Hackernoon Post

No results found

github_iconTop Related Tweet

No results found

github_iconTop Related Dev.to Post

No results found

github_iconTop Related Hashnode Post

No results found