Add "similar" debugging to `toHaveCompiledCss`

I found it difficult to debug with toHaveCompiledCss, particularly in the case of local css variables being resolved by jest-dom (I think that's how it works), as the error for "could not find padding: 8px" doesn't tell you if it was wrong or just doesn't exist.

expect(element).toHaveCompiledCss({ paddingInlineEdit: '8px' });

Could not find "padding-inline-end:8px" on <a data-testid="test-link" class="css-1mufnsm">…</a> element.

Now this should have a a clearer error:

Could not find "padding-inline-end:8px" on <a data-testid="test-link" class="css-1mufnsm">…</a> element.

Found similar styles:
padding-inline-end:var(--ds-space-0, 0px)
padding-inline-end:var(--ds-space-100, 8px)

This could go a step further and show all css properties or have a debug mode I couldn't find, but that could get quite spammy…

_Tested locally in a repo consuming it by tweaking the nodemodules:

Before:

# Property found, no value match
Could not find "padding:30px" on <a data-testid="test-link" class="css-1mufnsm">child</a> element.

# Property not found
Could not find "padding-foo:30px" on <a data-testid="test-link" class="css-1mufnsm">child</a> element.

After:

# Property found, no value match
Could not find "padding:30px" on <a data-testid="test-link" class="css-1mufnsm">child</a> element.

Found similar styles:
padding:var(--ds-space-0, 0px)
padding:var(--ds-space-100, 8px)

# Property not found
Could not find "padding-foo:30px" on <a data-testid="test-link" class="css-1mufnsm">child</a> element.

Found 0 styles with matching properties.

atlassian-labs / compiled

Add "similar" debugging to `toHaveCompiledCss` #1619

🦋 Changeset detected