title: Error testing external API function with jest (react-query: useQuery)
body: <p>When using Jest to test a function I have that makes a call to external API I get an error about only being able to use a hooks inside of a functional component.</p>
  <p>My function(useGetGophys) uses <code>useQuery</code> from <code>react-query</code> which is the hook.</p>
  <p>I would like to be able to test the useGetGophy with jest please?</p>
  <p>I am mocking the actual fetch request as can be seen in the test file code below.</p>
  <p><a href="https://i.stack.imgur.com/XcPZg.png" rel="nofollow noreferrer"><img src="https://i.stack.imgur.com/XcPZg.png" alt="invalid hook call error" /></a></p>
  <p>useGetGophy.js</p>
  <pre><code>import { useMemo } from 'react'
  import { useQuery } from 'react-query'
  import urlGenerator from &quot;../utils/urlGenerator&quot;
  
  export default function useGetGophys({ query, limit }) {
      const url = urlGenerator({ query, limit })
  
      const { data, status } = useQuery([&quot;gophys&quot;, { url }], async () =&gt; {
          const res = await fetch(url)
          return res.json()
      })
  
      return {
          status,
          data,
      }
  }
  </code></pre>
  <p>Test file
  useGetGophy.test.js</p>
  <pre><code>import useGetGophys from '../services/useGetGophys'
  import { renderHook } from '@testing-library/react-hooks'
  import { QueryClient, QueryClientProvider } from &quot;react-query&quot;
  
  const desiredDataStructure = [{
      id: expect.any(String),
      images: {
          fixed_width_downsampled: {
              url: expect.any(String),
              width: expect.any(String),
              height: expect.any(String),
          },
      },
      embed_url: expect.any(String),
      bitly_gif_url: expect.any(String),
      url: expect.any(String),
      title: expect.any(String),
  }]
  
  global.fetch = jest.fn(() =&gt;
      Promise.resolve({
          json: () =&gt; Promise.resolve(desiredDataStructure)
      })
  )
  
  describe('getGetGophy - ', () =&gt; {
      test('returns correctly structured data', async () =&gt; {
          const gophys = useGetGophys('https://api.giphy.com/v1/gifs/trending?q=daniel&amp;api_key=00000000&amp;limit=15&amp;rating=g')
          expect(gophys).toBe(desiredDataStructure)
      })
  })
  </code></pre>