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.