title: Integrate testing for react-query with testing-library
body: <h3>Aim</h3>
  <p>I am building a NextJS application that uses react-query to fetch data.</p>
  <p>I am now trying to implement a testing framework. However, when I run <code>yarn test</code> I get the error below. From the react-query docs, I understand that error typically relates to circumstances where <code>&lt;QueryClientProvider&gt;</code> has not been included in <code>_app.js</code>.</p>
  <p>I suspect that I need to introduce some 'mock data' for react-query in <code>index.test.js</code> but haven't been able to find documentation on how to do so.</p>
  <h3>Error</h3>
  <pre><code>No QueryClient set, use QueryClientProvider to set one
  </code></pre>
  <h3>Code</h3>
  <p><strong>/<strong>tests</strong>/index.test.js</strong></p>
  <pre class="lang-js prettyprint-override"><code>import { render, screen } from '@testing-library/react';
  
  import Home from '../pages/index';
  
  describe('Home', () =&gt; {
      it('renders without crashing', () =&gt; {
          render(&lt;Home /&gt;);
  
          expect(
              screen.getByRole('heading', { name: 'Welcome to Next.js!' })
          ).toBeInTheDocument();
      });
  });
  </code></pre>
  <p><strong>/pages/index.js</strong></p>
  <pre class="lang-js prettyprint-override"><code>import Link from 'next/link';
  import { Button } from 'antd';
  import { useQuery } from 'react-query';
  
  import { readUserRole } from '../lib/auth';
  import NewBriefButton from '../components/Buttons/NewBriefButton';
  import NewJobButton from '../components/Buttons/NewJobButton';
  import NewClientButton from '../components/Buttons/NewClientButton';
  
  export default function Home() {
      const userRoleQuery = useQuery('userRole', readUserRole);
  
      const { status, data } = userRoleQuery;
  
      if (status === 'error') {
          return &lt;p&gt;error...&lt;/p&gt;;
      }
  
      if (status === 'loading') {
          return &lt;p&gt;loading...&lt;/p&gt;;
      }
  
      return (
          &lt;div&gt;
              &lt;h1&gt;Home page&lt;/h1&gt;
              {data === 'Manager' &amp;&amp; (
                  &lt;&gt;
                      &lt;Button type='primary'&gt;
                          &lt;Link href='/assets/upload'&gt;Upload Assets&lt;/Link&gt;
                      &lt;/Button&gt;
                      &lt;NewBriefButton /&gt;
                      &lt;NewJobButton /&gt;
                      &lt;NewClientButton /&gt;
                  &lt;/&gt;
              )}
          &lt;/div&gt;
      );
  }
  </code></pre>
  <p><strong>/pages/_app.js</strong></p>
  <pre class="lang-js prettyprint-override"><code>import { QueryClient, QueryClientProvider } from 'react-query';
  import { Hydrate } from 'react-query/hydration';
  
  import Layout from '../components/Layout';
  import AuthContextProvider from '../context/AuthContext';
  import { GlobalStyles } from '../styles';
  
  import 'antd/dist/antd.css';
  import 'react-quill/dist/quill.snow.css';
  
  const queryClient = new QueryClient();
  
  export default function MyApp({ Component, pageProps }) {
      return (
          &lt;AuthContextProvider&gt;
              &lt;QueryClientProvider client={queryClient}&gt;
                  &lt;Hydrate state={pageProps.dehydratedState}&gt;
                      &lt;GlobalStyles /&gt;
                      &lt;Layout&gt;
                          &lt;Component {...pageProps} /&gt;
                      &lt;/Layout&gt;
                  &lt;/Hydrate&gt;
              &lt;/QueryClientProvider&gt;
          &lt;/AuthContextProvider&gt;
      );
  }
  </code></pre>