Snapshot testing for styles

[Markcial]

Hi, I am working on a project with typescript react and vanilla extract css.

So far I am enjoying it, it's what I would expect to work with type safe CSS. The problem comes when I want to apply some style testing to ensure that the styles won't change for no reason.

Is there any project or way to do snapshot testing with the generated CSS? Whenever I did a project with styled components I used this: https://github.com/styled-components/jest-styled-components

I looked at the source code and they only use a custom snapshot serializer where they add related selectors and css rules.

I had a small experiment working but you might know better what to do or if there is already something more stable for testing.

Thanks

[benhurley]

Following

[aspirisen]

Internally VE uses snapshots https://github.com/vanilla-extract-css/vanilla-extract/blob/master/tests/compiler/compiler.vitest.test.ts#L288

[rajahn1]

that being said, is there no need to test styles when using vanilla-extract?

[askoufis]

It depends what you mean by "test styles". Since Vanilla Extract hashes classnames, writing unit tests that validate which classnames are being applied (snapshot or otherwise) is just going to lead to brittle tests that need updating every time a classname hash changes (every once in a while), or your component styling changes (probably more frequently).

Screenshot tests are much more valuable for testing styles because they test what the user actually sees, not the implementation detail of "what classnames are attached to which elements", which is only useful for developers.