props.theme is undefined when testing a component
See original GitHub issuev2.0.0-17 Everything renders fine but with create-react-app, running test:
it('renders without crashing', () => {
const div = document.createElement('div')
ReactDOM.render(<Heading />, div)
})
throws error: TypeError: Cannot read property x
of undefined.
x
for me is colors
property of theme object passed to ThemeProvider
:
const theme = {
colors: { primary, secondary, etc... }
}
Test fails because props.theme is undefined. But everything renders fine. Is this a bug?
Issue Analytics
- State:
- Created 6 years ago
- Comments:16 (8 by maintainers)
Top Results From Across the Web
React testing library and styled components - Stack Overflow
Am trying to use react testing library on my project, but it isn't happy about the theme being passed to styled components in...
Read more >undefined. jest - You.com | The AI Search Engine You Control
How to test if a prop is rendered correctly in a Component using Jest and ... see the Props description, I see "Cannot...
Read more >A set of utilities for testing Styled Components with Jest
In some scenarios, testing components that depend on a theme can be ... undefined) }) test('it applies styles according to passed props', ...
Read more >How to Setup React Testing Library for Material UI Styled ...
MUI styled component. With MUI, you can define your own theme and write CSS in JS. To use it, normally you provide theme...
Read more >Advanced Usage - styled-components
styled-components has full theming support by exporting a <ThemeProvider> wrapper component ... Define our button, but with the use of props.theme this time....
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 FreeTop 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
Top GitHub Comments
@bhough @philpl I understand that wrapping the component in the
ThemeProvider
will work because of the missing context. But isn’t there a more comfortable way of testing this? You see, I don’t want to wrap every single component in aThemeProvider
. Maybe there is a way setting a default context for all tests in jest/enzyme?@lednhatkhanh there are plenty of proposed solutions here, but please open a new issue if you need further help 🙌 this issue is already almost a year old and closed