title: Jest/Enzyme: Error: Uncaught [TypeError: Cannot read property 'query' of undefined] on component wrapped in withRouter
body: <p>So, I have a component that is wrapped in <code>withRouter</code> to access <code>this.props.router.query</code> and is generating the following error:</p>
  
  <blockquote>
    <p><code>console.error node_modules/jsdom/lib/jsdom/virtual-console.js:29
    Error: Uncaught [TypeError: Cannot read property 'query' of undefined]</code></p>
  </blockquote>
  
  <p>How do I resolve this? My component is as follows:</p>
  
  <p><div class="snippet" data-lang="js" data-hide="false" data-console="true" data-babel="false">
  <div class="snippet-code">
  <pre class="snippet-code-html lang-html prettyprint-override"><code>import { withRouter } from 'next/router';
  
  class Order extends React.Component {
    constructor(props) {
      super(props)
    }
  
    render() {
      const { onToken } = this.props.router.query;
  
      return (
        .......
      );
    }
  }
  
  export default withRouter(Order);</code></pre>
  </div>
  </div>
  </p>
  
  <p>And my <code>Order.test.js</code> component is as follows:</p>
  
  <p><div class="snippet" data-lang="js" data-hide="false" data-console="true" data-babel="false">
  <div class="snippet-code">
  <pre class="snippet-code-html lang-html prettyprint-override"><code>import Order, { SINGLE_ORDER_QUERY } from '../components/Order';
  import { fakeOrder } from '../lib/testUtils';
  
  const mocks = [
    {
      request: { query: SINGLE_ORDER_QUERY, variables: { id: 'ord123' } },
      result: { data: { order: fakeOrder() } },
    },
  ];
  
  describe('&lt;Order/&gt;', () =&gt; {
    it('renders the order', async () =&gt; {
      const wrapper = mount(
        &lt;MockedProvider mocks={mocks}&gt;
          &lt;Order id="ord123" /&gt;
        &lt;/MockedProvider&gt;
      );
      await wait();
      wrapper.update();
      const order = wrapper.find('div[data-test="order"]');
      expect(toJSON(order)).toMatchSnapshot();
    });
  });</code></pre>
  </div>
  </div>
  </p>