title: Mock @apollo/react-hooks useQuery using Jest
body: <p>I'm currently trying to mock the useQuery from index.ts, however I cannot do it as the useMenu is a readonly value.</p>
  <p><em>index.ts</em></p>
  <pre><code>import { useQuery } from &quot;@apollo/react-hooks&quot;;
  import { MENU } from &quot;../../graphql/queries/menu&quot;;
  
  export const useMenu = (myNumber: number) =&gt; {
    return useQuery(MENU, {
      variables: { myNumber }
    });
  };
  </code></pre>
  <p><em>menu.ts</em></p>
  <pre><code>import gql from &quot;graphql-tag&quot;;
  
  export const MENU = gql`
    fragment MenuItemFields on MenuItem {
      field1
      field2
      field3
      field4
    }
    query Menu($myNumber: Float!) {
      menu(myNumber: $myNumber) {
        items {
          ...MenuItemFields
          items {
            ...MenuItemFields
            items {
              ...MenuItemFields
              items {
                ...MenuItemFields
              }
            }
          }
        }
      }
    }
  `;
  </code></pre>
  <p><em>menu.test.ts</em></p>
  <pre><code>import { useQuery } from '@apollo/react-hooks';
  import {httpResponse as mockMenuAPIString} from '../../../../../mocks/expectations/Storm-Hub-Menu/storm-hub-menu.json';
  import {getEligibleMenuEntries} from '../../../../server/modules/graphql/utils';
  import {useMenu} from '../../services/menu'
  
  it('returns valid Menu', () =&gt; {
      // Convert mockMenuAPI to mockMenu
  
      const mockMenuAPI = JSON.parse(mockMenuAPIString.body);
      const mockMenu = getEligibleMenuEntries(mockMenuAPI);      //Working
  
      ... How do I mock the useQuery?
      
      const res = useMenu(10000);
  
      expect(res).toEqual(mockMenu);
  });
  </code></pre>
  <p>I've tried to follow <a href="https://www.apollographql.com/docs/react/development-testing/testing/" rel="nofollow noreferrer">the documentation</a> but i couldn't actually implement this since I'm not returning any HTML, just the result.</p>
  <p><a href="https://i.stack.imgur.com/fexoP.png" rel="nofollow noreferrer"><img src="https://i.stack.imgur.com/fexoP.png" alt="In the example" /></a></p>
  <p>Any help would be appreciated.</p>