CRACO + React Testing Library + Vanilla Extract - Dynamic Styles not loading

[nspilman]

Hey all - love the library.

We are attempting to spin up a design system, and would like to unit test our components based on the theme set and the colors rendered.

We're running into the following issue -
// in the code
const testStyle = style({ background: vars.colors.blue })
<div data-testid={testLabel} className={testStyle}/>

// in the test
const expect(screen.getByTestId(testLabel)).toHaveStyle( { background: vars.colors.green } )

The above test passes because the test runner is evaluating both background assignments as blank.

For example -
You can see below, the test runner expects blank, as it's not evaluating theme.colors.green400. Within the style itself I have it set to "blue" instead of a theme value. If I had a theme value it would pass, as blank === blank.

I followed the Webpack setup piece here - https://vanilla-extract.style/documentation/setup/#webpack to no success.

We use CRACO, so I tried following this sandbox - https://codesandbox.io/s/q71d9?file=/craco.config.js, though u can see the sandbox itself isn't running.

We are using @vanilla-extract/webpack-plugin@^2.1.0.

Any ideas on how to get React Testing Library to recognize the styles on test runtime?
Thank you!!
Nate

[mattcompiles]

I have experienced similar issues myself. This following test in vanilla-extract itself is skipped due to similar problems.
https://github.com/seek-oss/vanilla-extract/blob/51574f96c16ae8401f0ddc1151e3e21a2faebd8c/tests/jest-dom/jest-dom.test.ts#L24

Hoisting the comments from the code here:

CSS vars seem to be broken in jsdom/cssom/cssstyle (whichever one is relevant here).
As far as I can tell the issue is not on our end

There's nothing special vanilla-extract is doing here, it works the same in jest as it does in the browser.