Stuck on an issue?
Lightrun Answers was designed to reduce the constant googling that comes with debugging 3rd party libraries. It collects links to all the places you might be looking at while hunting down a tough bug.
And, if you’re still stuck at the end, we’re happy to hop on a call to see how we can help out.
Theme is not applied to styled components props in Vitest
See original GitHub issueCurrent 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
- Run “npm run test-watch”
- See in console output, that styled does not get valid theme prop.
- 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:
reactversion: 18.2.0@emotion/reactversion: 11.10.5
Issue Analytics
- State:
- Created 9 months ago
- Comments:6 (3 by maintainers)
Top Results From Across the Web
Theme is not being provided as prop at tests (jest + react ...
Hey, I'm working on a monorepo project by using Nx's + react - typescript + styled components + mui. I also have a...
Read more >Can't get Jest to work with Styled Components which contain ...
Wrapping the ThemeProvider around the component and passing the theme object to it, works fine for me. import React from 'react'; ...
Read more >Advanced Usage - styled-components
Define our button, but with the use of props.theme this time ... MyComponent does not render the passed-in className prop, then no styles...
Read more >styled-components tested with react-testing-library
Activating extension 'vscode.typescript-language-features' failed: Could not find bundled tsserver.js.
Read more >Testing - Vue.js
Component tests should catch issues relating to your component's props, ... When testing, remember to test what a component does, not how it...
Read more >
Top Related Medium Post
No results found
Top Related StackOverflow Question
No results found
Troubleshoot Live Code
Lightrun enables developers to add logs, metrics and snapshots to live code - no restarts or redeploys required.
Start Free
Top Related Reddit Thread
No results found
Top Related Hackernoon Post
No results found
Top Related Tweet
No results found
Top Related Dev.to Post
No results found
Top Related Hashnode Post
No results found
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
Since this isn’t really our issue - I will close this one here. Let’s wait on the Vite maintainers to handle my PR.