title: Jest, Enzyme: Invariant Violation: You should not use <Route> or withRouter() outside a <Router>
body: <p>I have a <code>&lt;UserListComponent /&gt;</code> which outputs one <code>&lt;Contact /&gt;</code> component and list of contacts presentated by <code>&lt;Contacts /&gt;</code>. </p>
  
  <p>The problem is that in the test for <code>&lt;UserListComponent /&gt;</code> when I try to mount it, test outputs an error <code>Invariant Violation: You should not use &lt;Route&gt; or withRouter() outside a &lt;Router&gt;</code></p>
  
  <p><code>withRouter()</code> is used in <code>&lt;Contacts /&gt;</code> component.</p>
  
  <p>How can I mock <code>ContactsComponent</code> without router in test of parent component?</p>
  
  <p>I found some similar issue <a href="https://www.bountysource.com/issues/49297944-invariant-violation-you-should-not-use-route-or-withrouter-outside-a-router" rel="noreferrer">https://www.bountysource.com/issues/49297944-invariant-violation-you-should-not-use-route-or-withrouter-outside-a-router</a>
  but it only describes situation when component is cover by <code>withRouter()</code> itself, not children.</p>
  
  <p><strong>UserList.test.jsx</strong></p>
  
  <pre><code>const mockResp = {
    count: 2,
    items: [
      {
        _id: 1,
        name: 'User1',
        email: 'email1@gmail.com',
        phone: '+123456',
        online: false
      },
      {
        _id: 2,
        name: 'User2',
        email: 'email2@gmail.com',
        phone: '+789123',
        online: false
      },
      {
        _id: 3,
        name: 'User3',
        email: 'email3@gmail.com',
        phone: '+258369147',
        online: false
      }
    ],
    next: null
  }
  
  describe('UserList', () =&gt; {
    beforeEach(() =&gt; {
      fetch.resetMocks()
    });
  
    test('should output list of users', () =&gt; {
      fetch.mockResponseOnce(JSON.stringify(mockResp));
  
      const wrapper = mount(&lt;UserListComponent user={mockResp.items[2]} /&gt;);
  
      expect(wrapper.find('.contact_small')).to.have.length(3);
    });
  
  })
  </code></pre>
  
  <p><strong>UserList.jsx</strong></p>
  
  <pre><code>export class UserListComponent extends PureComponent {
    render() {
      const { users, error } = this.state;
      return (
        &lt;React.Fragment&gt;
          &lt;Contact
            userName={this.props.user.name}
            content={this.props.user.phone}
          /&gt;
          {error ? &lt;p&gt;{error.message}&lt;/p&gt; : &lt;Contacts type="contactList" user={this.props.user} contacts={users} /&gt;}
        &lt;/React.Fragment&gt;
      );
    }
  }
  </code></pre>
  
  <p><strong>Contacts.jsx</strong></p>
  
  <pre><code>class ContactsComponent extends Component {
    constructor() {
      super();
      this.state = {
        error: null,
      };
    }
  
    render() {
      return (
        &lt;React.Fragment&gt;
          &lt;SectionTitle title="Contacts" /&gt;
          &lt;div className="contacts"&gt;
           //contacts
          &lt;/div&gt;
        &lt;/React.Fragment&gt;
      );
    }
  }
  
  export const Contacts = withRouter(ContactsComponent);
  </code></pre>