How to unit test react components which are part of nested react routes

Question

My component chain looks like below

My requirement here is to test Sidebar and MainBar components. And MainBar has routes in it.

Am using enzyme.Mount and I see it never renders the sideBar component

 const AppWrapper = enzyme.mount(
      <IntlProvider locale="en">
        <SideBar />
      </IntlProvider>
    );

expect(AppWrapper.find(Nav)).toBe(true);//It fails , it never finds the Nav.

Question : How to render SideBar which is part of route (:apps/teamsAppId) using enzyme.mount?

Note : Am using react-router-dom hooks

Answer 1

First of all, enzyme's find() returns a collection of dom nodes. So what you're actually doing is checking if a collection is true.

Try this instead: expect(AppWrapper.contains(Nav)).toBe(true);