title: How to write test with swr
body: <p>when user type some text in input search data-testid = 'loading' must be removed, now console return Unable to find an element by: [data-testid=&quot;loading&quot;]
  can some one sugesstion me to writting test with swr or suggestion for me how to mock response from swr</p>
  <p>this is my component file</p>
  <pre><code>import axios from &quot;axios&quot;;
  import { useEffect, useState } from &quot;react&quot;;
  import useSWR from &quot;swr&quot;;
  import &quot;./styles.css&quot;;
  
  const useDebounce = (newValue) =&gt; {
    const [value, setValue] = useState(&quot;&quot;);
    useEffect(() =&gt; {
      const timeout = setTimeout(() =&gt; {
        setValue(newValue);
      }, 500);
      return () =&gt; clearTimeout(timeout);
    }, [newValue]);
    return value;
  };
  
  export const fetcher = async (url) =&gt; {
    const { data } = await axios.get(url);
    return data;
  };
  export default function App() {
    const [query, setQuery] = useState(&quot;react&quot;);
    const searchQuery = useDebounce(query);
    const { data: repos } = useSWR(
      `https://api.github.com/search/repositories?q=${searchQuery}&amp;per_page=1&amp;page=1`,
      fetcher
    );
    return (
      &lt;div className=&quot;App&quot;&gt;
        &lt;h1&gt;Hello CodeSandbox&lt;/h1&gt;
        &lt;h2&gt;Start editing to see some magic happen!&lt;/h2&gt;
        &lt;input
          testId=&quot;search&quot;
          data-testid=&quot;search&quot;
          id=&quot;search-input&quot;
          placeholder=&quot;search&quot;
          onChange={(event) =&gt; setQuery(event.target.value)}
        /&gt;
        {!repos ? (
          &lt;div data-testid=&quot;loader&quot; testId=&quot;loader&quot;&gt;
            &lt;h2 id=&quot;loading&quot;&gt;loading&lt;/h2&gt;
          &lt;/div&gt;
        ) : (
          repos?.items?.map((user) =&gt; {
            return (
              &lt;div
                data-testid=&quot;repo-item&quot;
                style={{
                  margin: &quot;1rem&quot;,
                  height: &quot;40px&quot;,
                  background: &quot;lightpink&quot;
                }}
              &gt;
                {user.name}
              &lt;/div&gt;
            );
          })
        )}
      &lt;/div&gt;
    );
  }
  </code></pre>
  <p>this is my test file</p>
  <pre><code>import {
    render,
    screen,
    waitForElementToBeRemoved
  } from &quot;@testing-library/react&quot;;
  import userEvent from &quot;@testing-library/user-event&quot;;
  import App from &quot;./App&quot;;
  import { act } from &quot;react-dom/test-utils&quot;;
  
  describe(&quot;test&quot;, () =&gt; {
    beforeEach(() =&gt; {
      jest.resetAllMocks();
      jest.useFakeTimers();
    });
    it(&quot;happy render&quot;, () =&gt; {
      expect(() =&gt; render(&lt;App /&gt;)).not.toThrow();
    });
  
    it(&quot;renders after search&quot;, async () =&gt; {
      render(&lt;App /&gt;);
      userEvent.type(screen.getByTestId(&quot;search&quot;), &quot;vue&quot;);
      act(() =&gt; {
        jest.runAllTimers();
      });
      await waitForElementToBeRemoved(() =&gt; screen.getByTestId(&quot;loader&quot;));
    });
  });
  </code></pre>