title: How to mock BrowserRouter of react-router-dom using jest
body: <p>I have this components that renders the routes of an app: <a href="https://jsbin.com/bahaxudijo/edit?js" rel="noreferrer">https://jsbin.com/bahaxudijo/edit?js</a>, I'm trying to mock the BrowserRouter and the Route to do the test, this are my test: </p>
  
  <pre><code>import React from 'react';
  import renderer from 'react-test-renderer';
  
  import Router from '../../../components/Router/Component';
  
  jest.mock('react-router-dom', () =&gt; ({
    BrowserRouter: ({ children }) =&gt; &lt;div&gt;{children}&lt;/div&gt;,
    Route: ({ children }) =&gt; &lt;div&gt;{children}&lt;/div&gt;,
  }));
  
  jest.mock('../../../components/Nav/index', () =&gt; '&lt;MockedNav /&gt;');
  jest.mock('../../../components/ScheduleManager/index', () =&gt; '&lt;MockedScheduleManager /&gt;');
  
  const props = {
    token: '',
    loginStaff: jest.fn(),
  };
  
  describe('&lt;Router /&gt;', () =&gt; {
    describe('When is passed a token', () =&gt; {
      it('renders the correct route', () =&gt; {
        const component = renderer.create(&lt;Router {...props} /&gt;);
        expect(component).toMatchSnapshot();
      });
    });
  });
  </code></pre>
  
  <p>But I'm mocking wrong the BrowserRouter and the Route, so the test passes but the snapshots are only empty divs. How can I properly mock the BrowserRouter and the Route?</p>