Jest: Better reporting for string differences

[mlevesquedion]

🚀 Feature Proposal

When using toEqual to compare strings (or other iterable structures), when there is a difference between the strings, indicate where the first difference occurred and/or give additional details about the difference.

Motivation

While testing the output of a currency formatting function, I was bamboozled by the following output:

As it turns out, the spaces in the strings are different (breaking x20 vs non-breaking space xA0).

Example

Expected value to equal:
"1 234,57 $"
Received:
"1 234,57 $"
First difference occurred at index 1 : " " does not equal " "

[SimenB]

I think #4619 would have solved this, but @pedrottimark is busy with other things these days (in theory the different space character would've been highlighted).

@thymikee @rickhanlonii thoughts on anything we can do as-is with jest-diff?

[thymikee]

We can do it on a matcher lever, similarly to how we do suggesting less strict matchers (toEqual instead of toBe etc).

[rickhanlonii]

I think the best message would be something like:

Expected value has no visual difference with received value due to invisible whitespace characters
Expected: "1x20234,57 $"
Received: "1xA0234,57 $"

[SimenB]

Is there a module that allows us to detect all of these invisible characters? Or other characters that are difficult to tell by looking at it, like dash vs em dash vs dash, apostrophe vs single quote etc?

For (CR)LF we could borrow these: https://github.com/concordancejs/concordance/blob/17203caddfb9013b614238da8a54ba6a3cf97944/lib/primitiveValues/string.js#L23-L32

@novemberborn have you given any more thought to this beyond the todo in the code I linked above?

[novemberborn]

@SimenB not a heck of a lot, no. The basic idea would be to use control pictures where appropriate, and \u sequences for everything else. That may be annoying with dashes though.

Would love to have a shareable library for this!

[pedrottimark]

Although the pull request highlights the changed substrings, they still look the same.

A possible future improvement is heuristic to display other invisible characters in addition to:

• U+21B5 ↵ for deleted or inserted line break
• U+00B7 · for space at end of line