title: jest enzyme routing how to test component with Route?
body: <p>I have an <code>App</code> component which contains main route definitions:</p>
  
  <pre><code>export default function App() {
    return (
      &lt;div&gt;
        &lt;MuiThemeProvider theme={createMuiTheme(theme)}&gt;
          &lt;Route
            path={`${URL_PREFIX}/:module?/:id?`}
            render={() =&gt; (&lt;div&gt;
              &lt;MapContainer /&gt;
              &lt;NavigationBox /&gt;
              &lt;FeedbackMessage /&gt;
            &lt;/div&gt;)}
          /&gt;
          &lt;Switch&gt;
            &lt;Route
              exact
              path={URL_PREFIX}
              render={() =&gt; (
                &lt;Redirect to={`${URL_PREFIX}/restaurants`} /&gt;
              )}
            /&gt;
          &lt;/Switch&gt;
        &lt;/MuiThemeProvider&gt;
      &lt;/div&gt;
    );
  }
  </code></pre>
  
  <p>I have the main file, where I have render function, which renders <code>App</code> on proper HTML node and wraps it everything what is needed:</p>
  
  <pre><code>const render = (messages) =&gt; {
    ReactDOM.render(
      &lt;Provider store={store}&gt;
        &lt;LanguageProvider messages={messages}&gt;
          &lt;ConnectedRouter history={history}&gt;
            &lt;App /&gt;
          &lt;/ConnectedRouter&gt;
        &lt;/LanguageProvider&gt;
      &lt;/Provider&gt;,
      MOUNT_NODE
    );
  };
  </code></pre>
  
  <p>So far everything works.</p>
  
  <p>I also tried to write the tests for <code>App</code> but this part doesn't work at work at all. It is my test file:</p>
  
  <pre><code>describe('&lt;App /&gt;', () =&gt; {
    describe('should render other components on proper route', () =&gt; {
      let renderedComponent;
  
      beforeEach(() =&gt; {
        renderedComponent = shallow(
          &lt;MemoryRouter initialEntries={[URL_PREFIX]} initialIndex={0}&gt;&lt;App /&gt;&lt;/MemoryRouter&gt;
        ).dive().dive();
      });
  
      it('should render &lt;MapContainer /&gt;', () =&gt; {
        expect(renderedComponent.find(MapContainer).length).toBe(1);
      });
      it('should render &lt;NavigationBox /&gt;', () =&gt; {
        expect(renderedComponent.find(NavigationBox).length).toBe(1);
      });
      it('should render &lt;FeedbackMessage /&gt;', () =&gt; {
        expect(renderedComponent.find(FeedbackMessage).length).toBe(1);
      });
    });
  });
  </code></pre>
  
  <p>If I add more <code>.dive()</code> I got an error:</p>
  
  <pre><code>TypeError: ShallowWrapper::dive() can not be called on Host Components
  </code></pre>
  
  <p>If there is only 2 dives or 1 dive it says that expected value (1) is different than received (0), so tests fail.</p>
  
  <p>If I try with <code>render</code> or <code>mount</code> it complains, that store is expected but has value undefined.</p>
  
  <p>Is there any way to test if on the chosen path my components are rendered?</p>