search

emotion-js / emotion

👩‍🎤 CSS-in-JS library designed for high performance style composition
https://emotion.sh/
MIT License
17.42k stars 1.11k forks source link

Theme is not applied to styled components props in Vitest #2955

Closed MrkacekVladimir closed 1 year ago

MrkacekVladimir commented 1 year ago

Current behavior:

I am using latest React, Vitest, Vite, Emotion and during testing ThemeProvider does not populate theme prop in styled.div syntax. This happens only during testing.

To reproduce:

https://codesandbox.io/s/vitest-and-emotion-styled-o3i7jm

  1. Run "npm run test-watch"
  2. See in console output, that styled does not get valid theme prop.

image

  1. If you run the application, styled gets populated with theme prop as it should

image

Expected behavior:

ThemeProvider should provide me correct theme prop when using styled in testing environment.

Environment information:

Andarist commented 1 year ago

Please recheck if your node_modules don't contain more than one version of @emotion/react or if your test setup doesn't instantiate @emotion/react more than once.

MrkacekVladimir commented 1 year ago

None of that seems to be the case. If I switch to styled-components and do the exact same setup with typings definition, ThemeProvider, babel plugin... the styled API gets correct theme.

MrkacekVladimir commented 1 year ago

I did some further testing in the codesandbox attached above and it seems like the issue in the babel plugin. If I remove babel: { plugins: ['@emotion/babel-plugin'], }, from vite.config.ts, theme is getting passed into styled API.

Is there a way you could confirm that this issue is on emotion side or I should direct it on Vitest?

Andarist commented 1 year ago

Yes, I've found out yesterday that the Babel plugin was messing things up - but didn't have time to respond here to you. I hope that by removing the Babel plugin temporarily you are able to unblock yourself.

That being said - this is Vite's bug. I've created a PR that explains the issue and fixes it in Vite here: https://github.com/vitejs/vite/pull/11259

MrkacekVladimir commented 1 year ago

Thank you very much for the effort. Currently it is a blocker we cannot really remove since without the babel plugin we are not able to use component referencing in styled. Hope this gets resolved soon :)

Andarist commented 1 year ago

Since this isn't really our issue - I will close this one here. Let's wait on the Vite maintainers to handle my PR.

santosh1997 commented 1 year ago

https://github.com/emotion-js/emotion/issues/2351#issuecomment-1501603963

Facing the similar issue after jest 29 upgrade. Can you please help?