atlassian-labs / compiled

A familiar and performant compile time CSS-in-JS library for React.
https://compiledcssinjs.com
Apache License 2.0
1.99k stars 67 forks source link

Add "similar" debugging to `toHaveCompiledCss` #1619

Closed kylorhall-atlassian closed 9 months ago

kylorhall-atlassian commented 9 months ago

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.
changeset-bot[bot] commented 9 months ago

🦋 Changeset detected

Latest commit: 9e44b53e5ac575cfe68c07a4460643922e6b6045

The changes in this PR will be included in the next version bump.

This PR includes changesets to release 1 package | Name | Type | | -------------- | ----- | | @compiled/jest | Patch |

Not sure what this means? Click here to learn what changesets are.

Click here if you're a maintainer who wants to add another changeset to this PR