Enzyme: Question: How can I avoid "deep diving"?

[javidjamae]

I'm trying to be a good programmer and use HOCs to properly decouple and decompose my code. I have components that are composed like this:

const enhance = compose(
  connect( mapStateToProps, actions ),
  reduxForm( {
    form: 'connection',
    validate,
    onSubmit: ( val, dispatch, { navigation, connectionCreate } ) => connectionCreate( val, navigation )
  } ),
  withSpinnerOnLoading(),
)

export default enhance( AddConnectionDetailsForm )

The withSpinnerOnLoading() even has a branch in it, so to test the underlying component, I have tests that do this:

expect( wrapper.dive().dive().dive().dive() ).toMatchSnapshot()

This starts to get a little nasty. Is there any easier way to "deep dive" down to my component? I'd love to be able to do something like:

expect( wrapper.dive( 4 ) ).toMatchSnapshot()

or

expect( wrapper.dive( { depth = 4 } ) ).toMatchSnapshot()

Any suggestions?

[ljharb]

We intentionally did not include a "depth" parameter in dive since that would be a very brittle coupling to the number of HOCs - the only current solution is indeed multiple .dive() calls, which is similarly brittle, but looks worse, and as such, more correctly identifies a brittle scenario in code.

In React 16 and a future enzyme 3+ semver-minor, there will be an API that will allow for this in a robust way, but for now, the multiple dives are the best way (and also what Airbnb does in its many thousands of enzyme tests).

(Separately, I don't think snapshot testing is ever a good way to test code; but that's orthogonal to this issue)

[javidjamae]

@ljharb Thanks for the quick response!

more correctly identifies a brittle scenario in code

Not sure exactly what you mean by that, but composing HOCs like that is arguably a less brittle approach (i.e. low coupling / high cohesion), not more brittle.

I'm torn on using snapshots, personally. I used to use VCR in Ruby and had a love/hate relationship with it. I started exploring using jest after reading this argument in support of using snapshots when testing React Native apps.

[ljharb]

Right, to clarify, it's not brittle in your production code, but rather in your test code.

In my experience snapshots are only useful for ensuring refactors change nothing; all other times, people just rubber stamp snapshot diffs and don't understand why the changes matter.

[bregenspan]

@javidjamae Until Enzyme adds an API for deep traversal, one approach that might work for you is this diveTo helper, which recursively dives until a target is found: https://gist.github.com/bregenspan/83126a50da7cf0a4d16b11499e12f7bc . Only using it for a few tests so far here at Teachers Pay Teachers, so YMMV, but behaving well so far.

[MartinDawson]

@bregenspan I had to remove the error checking in enzyme 3.0.

Also, I had to use if (instance && shallowWrapper.name() === identifier) { to check current node.