Replies: 1 comment
-
I have experienced similar issues myself. This following test in vanilla-extract itself is skipped due to similar problems. Hoisting the comments from the code here:
There's nothing special vanilla-extract is doing here, it works the same in jest as it does in the browser. |
Beta Was this translation helpful? Give feedback.
0 replies
Sign up for free
to join this conversation on GitHub.
Already have an account?
Sign in to comment
-
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 evaluatingtheme.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
Beta Was this translation helpful? Give feedback.
All reactions