Is there a recommended way of testing styles?

[tom-scott-carsales]

Hello, we have a React component library based on Vanilla Extract but we're having a bit helping consumers of the library test the styles (or CSS classes), e.g. we have utility sprinkles but the consumers are unable to identify which sprinkle classes are being set on a component due to the class name being hashed.

Is there any recommendations on testing styles applied via Vanilla Extract? We've previously suggested it's not recommended testing styling (especially with jest) outside the component library itself, otherwise we were looking at disabling the class name hashing as a last resort.

[askoufis]

To address the first part of your question, if your consumers are using @vanilla-extract/jest-transform, they should get hashed classnames with debug IDs in their tests, which should be easier to identify relative to just raw hashes. Unless you're shipping production hashed CSS classnames in stylesheets alongside your components (as opposed to keeping .css.js files next to your components and letting consumers compile them), in which case there's no way to "unhash" them for testing.

As for the second part of your question, I would agree that testing applied styles via snapshotting rendered HTML (or plain component JSX) isn't really worth it. At best these test only tell you that styles have been applied, but at worst they're a maintenance burden as they'll need to be updated every time a component style changes/the VE library is updated.

IMO you can't really get any better than screenshot testing. Ultimately the visual appearance of your components is the "behaviour" of your styling API that's relevant to the user, so that's what you should test.

This is the approach we took in Braid. These tests help catch visual regressions, and allow us to test behaviour that may be tricky/impossible to test programmatically, e.g. text wrapping, context-based colour/sizing, overlapping UI elements.

We've found that by offering a high degree of visual consistency in our design system, combined with only exposing the className prop on our foundational Box component, consumers tend not to deviate too far from system-based designs. As a result, most teams don't really feel the need to heavily screenshot test their apps, if at all, as they have enough confidence in the component API to handle the medium-high level stuff, while still being able to go custom if they need.

[ManAnRuck]

i also just had a problem testing styles. i have now identified it with regex.

expect(svg).toHaveClass(/size_1_\w+/);

[rajahn1]

Having problems too with this, it is really necessary to test styles using vanilla-extract?

[askoufis]

@rajahn1

I've replied to you in a separate discussion with an answer to your question. Let me know if the reply, in combination with my other answer above, is somehow unclear or inadequate.