Theme is not applied to styled components props in Vitest

[MrkacekVladimir]

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.

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

Expected behavior:

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

Environment information:

• react version: 18.2.0
• @emotion/react version: 11.10.5

[Andarist]

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]

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]

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]

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: vitejs/vite#11259

[MrkacekVladimir]

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]

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]

#2351 (comment)

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