React — unit testing HOC’s wrapped component
Unit testing components in React is very important despite the fact that it can sometimes be extremely disconcerting — I assume that you’ve already experienced the feeling of struggling with a single component that can’t be tested with ease. The latter clause is especially true when the component is wrapped with a HOC.
First and foremost, let’s just scratch the surface a little bit and try to understand what happens behind the scenes.
Whenever a component — that is expected to be tested — is wrapped with a HOC, there isn’t any way to access that with a simple shallow rendering — I hear the folks saying you can use mount rendering, but this might cause unexpected behaviors due to the rendering of the whole tree. Instead, you should go a level deeper so that grab the appropriate component from there.
Solution
After investigating a bunch of other similar issues, I found the relevant one that was mentioned in this GitHub issue.
The following solution is achieved by using Jest and Enzyme.
Feel free to hit me up on Twitter and also leave any kind of questions.
