Jest transformer for PandaCSS

[isaiasmb]

Hi,
Could it be possible to have a Jest transform like Vanilla Extract?

I'm having trouble testing styles with Jest because I can't find CSS properties in the Jest environment. So I thought having a Jest transformer or something like that would be useful.

Best regards!

[astahmer]

maybe this can help ? #2404 (comment)

[isaiasmb]

Hi @astahmer,

I'm sorry, I didn’t explain well my problem.

For example, I can't use toHaveStyle in my tests with Jest.

That means the CSS generated by PandaCSS is not loaded in my Jest environment.

See the example below:

index.tsx

styles.ts

Avatar.test.tsx

panda.config.ts

jest.config.js

tests

Thank you!

[astahmer]

That means the CSS generated by PandaCSS is not loaded in my Jest environment.

Panda CSS generates a static CSS file at build-time, it's up to you to import it

btw you don't need to use cva on the 2nd argument of styled, it's implicitly called

[jonambas]

IIRC, @layer isn't fully implemented in js dom, same with CSS variables. Try using --polyfill in your config or cssgen if you aren't already.

I'm using Vitest, and had to use happy-dom for CSS variable support + polyfilled layers.

That said, it's probably better to test styles E2E in Playwright/Cypress so you can fully test things like media queries.