Open cdan-youdo opened 1 month ago
However, the test passes if ThemeProvider is imported from @emotion/react.
Why is this an issue created in the Emotion's repo then?
Why is this an issue created in the Emotion's repo then?
Because I didn't know what is the best place to post this. I have no idea if this is a Vite
, emotion
or mui/material
issue.
I forgot to mention that my application root component uses the ThemeProvider
from mui
and works as expected when it renders in development.
import { ThemeProvider } from '@mui/material/styles';
import { theme } from 'styles/theme'
import { StyledDiv } from 'components';
export const AppContainer = () =>
<ThemeProvider theme={theme}>
<StyledDiv/>
</ThemeProvider>
I was hoping for someone to shed some light on how the mui ThemeProvider
and emotion
integrate their context. This way maybe I get a better understanding and can figure out where to look for the culprit myself.
We have this problem too and this happened after the dependency @emotion/react
was updated from 11.12.0
to 11.13.0
.
Therefore we assumed that this might could be related with the emotion package
Current behavior:
When rendering a component from inside a test, the
theme
is not passed to thecss
property if usingThemeProvider
from@mui/material/styles
. However, the test passes ifThemeProvider
is imported from@emotion/react
.The component that is being tested
The test
My application root component uses the
ThemeProvider
frommui
and works as expected when it renders in development.To reproduce:
I have put up a minimal git repo that you can use to reproduce the issue. https://github.com/cdan-youdo/react_vitest_emotion Once checked out, just run
Expected behavior:
I am expecting the test to pass when the component is rendered inside the
ThemeProvider
from@mui/material/styles
.Environment information:
react
version: 18.3.1@emotion/react
version: 11.13.0