Enzyme: Question: how to shallow render one level deeper?

[arkadyt]

How do I expand / render out Route components (react-router) with shallow rendering?
Is there any way to do that at all?
I am sure I can use mount(), but that would bring in too much unrelated information into the render tree and will make it much harder to debug.

Component.js

  0 <div className="Profile-content">
  1     <Route path={baseUrl} render={props => (
  2         <ProfileView {...props} profile={profileData} />
  3     )} />
  4     <Route path={`${baseUrl}/update-profile`} render={props => (
  5         <UpdateProfile {...props} profile={profileData} />
  6     )} />
  7     <Route path={`${baseUrl}/add-experience`} render={props => (
  8         <AddExp {...props} />
  9     )} />
 10     <Route path={`${baseUrl}/add-education`} render={props => (
 11         <AddEdu {...props} />
 12     )} />
 13     <Route path={`${baseUrl}/delete-profile`} render={() => (
 14         <Modal
 15             question="Are you sure you want to delete your profile?"
 16             onConfirm={() => deleteProfile(() => history.push(baseUrl))}
 17             onDismiss={() => history.goBack()}
 18             actionColor="red" />
 19     )} />
 20 </div>

shallowWrapper.debug()

<div className="Profile-container">
    <div className="Profile-content">
          <Route path="" render={[Function: render]} />
          <Route path="/update-profile" render={[Function: render]} />
          <Route path="/add-experience" render={[Function: render]} />
          <Route path="/add-education" render={[Function: render]} />
          <Route path="/delete-profile" render={[Function: render]} />
    </div>
</div>

[ljharb]

Use one of the traversal methods (like .find) to reach a wrapper around a single node, and then use .dive().

[arkadyt]

Thanks for the speedy response, @ljharb.
Is there any way to shallow-render a found Route node inside of a Router?

[arkadyt]

@ljharb, I tried diving but it complains about rendering Route node outside of a Router.
Is it possible to somehow eject the Route node and render it like this:

shallow(
    <Router>
        {node???}
    </Router>
)

[ljharb]

ahh, no, in that case you’d need to dive with the context option, to provide the proper context (what the Router provides)

[arkadyt]

Got it. Will have to do some digging through react-router codebase.
Thanks for help, @ljharb!

[arkadyt]

For future lurkers, this is how it all comes together:

import { BrowserRouter } from 'react-router-dom'

const routerContext = {
    history: new BrowserRouter().history,
    route: {
        location: {
            pathname: `.../add-experience` // to simulate route match
        },
        match: {},
    },
}

wrapper.find('Route').dive({ context: { router: routerContext } })

Thanks again, @ljharb!