Is it possible to unit test branches with shallow rendering?

[ghost]

I'm very new to React so I may be missing something simple here ..

I have a component using the branch mixin that I would like to unit test in isolation, using enzyme for shallow rendering.

My first idea was to see if I could pass my component a Baobab tree during rendering, i.e.: shallowRender <MyBranchComponent tree={tree} />

However, this results in Warning: Failed Context Types: prop type 'tree' is invalid; it must be a Baobab tree and a test failure that I assume is because it can't find the tree (Cannot read property 'watch' of undefined).

The problem is that, with shallow rendering, if in the test I wrap <MyBranchComponent /> in a higher-order root component or <Root /> wrapper, it won't render the actual element I'm testing.

Is there a way to give a component with a branch mixin a tree without wrapping it? If not, does that make baobab-react incompatible with shallow rendering?

[Yomguithereal]

Hello @JoshuaRH. Generally, people tend to differentiate between "clever" and "dumb" components. "Clever" components, like the branched one, must have knowledge of the outside world and usually only serve as wrapper providing data to "dumb" one, that can work in isolation and can be generalized. Therefore, people usually only unit test "dumb" components.

If you still want to test the branched components, I must think a little on how this can be done. Let met check if react-redux (which actually works the same as this lib) does in this case.

[jemos]

I'm also trying to understand how I could test my code that uses baobab trees and react. The way I was able to accomplish shallow testing was using enzyme.shallow and passing the context (because it supports that):

var AppTree = Baobab({});
var reactElem = shallow(<MyBaobabComponent/>, {context: {tree: AppTree}});
console.log(reactElem.debug());

Not sure if it helps..