question-mark
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.

props.theme is undefined when testing a component

See original GitHub issue

v2.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:closed
  • Created 6 years ago
  • Comments:16 (8 by maintainers)

github_iconTop GitHub Comments

6reactions
misantroniccommented, Jul 7, 2017

@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 a ThemeProvider. Maybe there is a way setting a default context for all tests in jest/enzyme?

0reactions
kittencommented, Sep 3, 2019

@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

Read more comments on GitHub >

github_iconTop 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 >

github_iconTop Related Medium Post

No results found

github_iconTop Related StackOverflow Question

No results found

github_iconTroubleshoot Live Code

Lightrun enables developers to add logs, metrics and snapshots to live code - no restarts or redeploys required.
Start Free

github_iconTop Related Reddit Thread

No results found

github_iconTop Related Hackernoon Post

No results found

github_iconTop Related Tweet

No results found

github_iconTop Related Dev.to Post

No results found

github_iconTop Related Hashnode Post

No results found