How To Traverse A Shallow Component Nested In Themeprovider Hoc?

Following up the issue on Github, I have a component Comp that when exported, is wrapped with injectSheet from reactjss. Please see the setup on codesandbox. In a unit test, I'd li

Solution 1:

For anyone still struggling with this, one viable approach was suggested on GitHub. Instead of testing the styled component wrapped with injectSheet HOC, you export your stand-alone component and test it in isolation

// Component.jsimportReactfrom'react'import injectSheet from'react-jss'const styles = {
  color: 'burlywood'
}

// named export for unit testsexportconstComponent = props => <h1>Component</h1>// default export to be used in other componentsexportdefaultinjectSheet(styles)(Component)

which would work for most use cases, since more often than not, you need to unit test the plain component and its logic, and not any of its associated styling. So in your unit test just do

import { Component } from'./Component'

instead of (which you would do in the rest of your codebase)

importComponentfrom'./Component'