Show word diffs in strings when they are properties on an object

🚀 Feature Proposal

I have some snapshots which are pretty chunky strings of markdown

I’d like to be able to more quickly see where the string differ! This is already supported when directly diffing strings (expect('a b').toEqual('a c') or expect('a c').toMatchSnapshot()), but not for strings within other structures.

Motivation

I’d like a clue where the difference starts

Example

Any snapshot

Pitch

It’s a nice to have! 😄

[pedrottimark]

Thank you for giving this realistic example of the need for substring differences.

For snapshots of serialized objects or elements, my tests of substring differences have been sadly divided almost equally between clear and confusing results.

Therefore, I have been working on non-snapshot deep equality assertions:

• toEqual (transform comparison tree to omit strict changes, see step 1 below)
• toHaveProperty
• toMatchObject (transform comparison tree to omit irrelevant changes)
• toStrictEqual

Here is an overdue progress update on the relevant comparison project. Over Thanksgiving weekend, it hit me that prettier provides a pattern for data-driven differences. I have adapted its intermediate description tree and printing loop for steps 2 and 3:

1. compute comparison tree according to strict criteria with 11 node types:

   • 'changeCollection' for example, changes in array, object, map, set
   • 'changeConstructor' for strict deep equality
   • 'changeKey' for example, from className to class
   • 'changeString1' for one-line string
   • 'changeString2' for multiple-line strings
   • 'changeType' for example, number and string, or object and nullish
   • 'changeVal' for example, unequal primitive values
   • 'commonCollection' for example, no changes in array, object, map, set
   • 'commonVal' for example, equal primitive values
   • 'delete' for example, expected object has property but received does not
   • 'insert' for example, received object has property but expected does not

2. build description tree

3. print lines with colors for indent size and line width

Substring differences: baseline at left and improved at right:

A goal of the description is valid ECMAScript, if you omit the + received lines that are aligned under a - expected line

--no-expand option: baseline at left for 5 context lines and improved at right for 2 context units:

The next major step is to decide on an interface for the description plugins which provides enough information to keep improving the --no-expand option in the future.

Your thoughts, questions, or concerns are welcome.

[jeysal]

Just tried it out, it works for snapshots that are strings, but not for string properties in other structures being snapshotted. @orta mind changing the issue to be about extending word diff support to strings nested in other structures (snapshot or toEqual doesn’t matter, not related to snapshots) and we can stick a help wanted label onto it?