title: Problem with testing for error in React component using react-query and axios. Test with React Testing Library, Jest, msw
body: <p>I test a react component that should display either spinner, error or a list of fetched recipes. I managed to test this component for loading and when it successfully get data. I have a problem with testing error.
  I created test server with msw, that has route handler that returns error. I use axios to make requests to the server. I think the problem is here: axios makes 3 requests and until last response useQuery returns isLoading=true, isError=false. Only after that it returns isLoading=false, isError=true. So in my test for error screen.debug() shows spinner, and errorMessage returns error because it does not find a rendered element with text 'error', that component is supposed to show when error occured. What can I do about that? I run out of ideas.</p>
  <hr />
  <p>EDIT:</p>
  <ul>
  <li>I have found out there is a setting in useQuery, &quot;retry&quot; that is default to 3 requests. I still don't know how to deal with component retrying requests in my test.</li>
  </ul>
  <hr />
  <p>I'm new to react testing and Typescript.</p>
  <p>From RecipeList.test.tsx:</p>
  <pre><code>import { setupServer } from 'msw/node';
  import { rest } from 'msw';
  import { QueryClient, QueryClientProvider, QueryCache } from 'react-query';
  
  import RecipeList from './RecipeList';
  
  const server = setupServer(
    rest.get(`${someUrl}`, (req, res, ctx) =&gt;
      res(ctx.status(200), ctx.json(data))
    )
  );
  
  const queryCache = new QueryCache();
  const RecipeListWithQueryClient = () =&gt; {
    const client = new QueryClient();
    return (
      &lt;QueryClientProvider client={client}&gt;
        &lt;RecipeList /&gt;
      &lt;/QueryClientProvider&gt;
    );
  };
  
  // Tests setup
  beforeAll(() =&gt; server.listen());
  afterAll(() =&gt; server.close());
  afterEach(() =&gt; server.resetHandlers());
  afterEach(() =&gt; {
    queryCache.clear();
  });
  
  describe('RecipeList', () =&gt; {
    //some tests that pass
  
    describe('while error', () =&gt; {
      it('display error message', async () =&gt; {
        server.use(
          rest.get(`${someUrl}`, (req, res, ctx) =&gt; res(ctx.status(404)))
        );
        render(&lt;RecipeListWithQueryClient /&gt;);
        // FOLLOWING CODE RAISE ERROR
        const errorMessage = await screen.findByText(/error/i);
        await expect(errorMessage).toBeInTheDocument();
      });
    });
  });
  
  </code></pre>
  <h2>Component code:</h2>
  <p>From RecipeList.tsx:</p>
  <pre><code>import { fetchRecipes } from 'api';
  
  const RecipeList: React.FC = () =&gt; {
    const { data, isLoading, isError } = useQuery&lt;
      RecipeDataInterface,
      Error
    &gt;('recipes', fetchRecipes);;
  
    if (isLoading) {
      return (
        &lt;Spinner&gt;
          &lt;span className=&quot;sr-only&quot;&gt;Loading...&lt;/span&gt;
        &lt;/Spinner&gt;
      );
    }
  
    if (isError) {
      return (
        &lt;Alert &gt;Error occured. Please try again later&lt;/Alert&gt;
      );
    }
  
    return (
      &lt;&gt;
        {data?.records.map((recipe: RecipeInterface) =&gt; (
          &lt;RecipeItem key={recipe.id} recipe={recipe.fields} /&gt;
        ))}
      &lt;/&gt;
    );
  };
  </code></pre>