styled function getting wrong theme object in Jest tests

Duplicates

• I have searched the existing issues

Latest version

• I have tested the latest version

Current behavior 😯

I’ve just migrated one of my components from JSS to the styled components, as described on the migration page. Everything works fine in storybook, and the correct (custom) theme object is being applied. But when running unit tests, if I check applied styles to the rendered component, it’s not getting the custom theme. It only ends up with the default theme object within styled.

Expected behavior 🤔

Should pass in correct theme object in Jest environment.

Steps to reproduce 🕹

Steps:

1. Create custom theme using createTheme
2. Create component using styled and use elements from the theme within the styles
3. Test applied styles in a Jest unit test, using toHaveStyle by wrapping the component in a ThemeProvider with the custom theme and rendering with @testing-library/react.

Context 🔦

We need to be able to test that the correct colors are being applied, depending on if it’s dark or light theme, and under different breakpoints.

Your environment 🌎

System: OS: Windows 10 10.0.18363 Binaries: Node: 14.17.0 - C:\Program Files\nodejs\node.EXE Yarn: 1.22.15 - ~\AppData\Roaming\npm\yarn.CMD npm: 7.18.1 - ~\src\quantum\node_modules.bin\npm.CMD Browsers: Chrome: 96.0.4664.45 Edge: Spartan (44.18362.1593.0)

[shaneajeffery]

@siriwatknp @michaelfaith It is most certainly a dependency issue. I went ahead and just updated all of my dependencies in my package.json to the latest using https://www.npmjs.org/package/npm-check-updates and

npx npm-check-updates -u
npm install

Now, my issue is gone and I don’t need to use the useTheme anymore to inject the theme into the styled component.

The issue has to be the older version of Emotion + MUI + Jest not playing well together. If someone else runs into this issue, I would ensure that you are on the latest version of all of the libraries and seeing where that gets you. I wish I had more of a clear-cut answer, but this issue is really just a trial-and-error bit due to the sheer volume of dependencies in the tree.

[siriwatknp]

I found a stackoverflow post with someone seemingly having the exact same issue: https://stackoverflow.com/questions/69328284/jest-rtl-failure-mui-v5-emotion-theme-issue I’ve encouraged them to post a reproduction here, if they have one. I’ve been struggling to recreate it outside of our project. I didn’t think to mention before, we’re working in a yarn (1.x) workspaces environment, in case that is helpful at all.

will try to reproduce it this week. will post an update on this issue.