title: How to test a component which is using a custom TypeScript React Hook?
body: <p>I'm currently writing a React component in Typescript which makes use of a <a href="https://github.com/simoneb/axios-hooks" rel="nofollow noreferrer">axios-hooks</a> hook called useAxios. An example of this hook in use is <a href="https://codesandbox.io/s/fancy-wind-2vfq2" rel="nofollow noreferrer">here</a>:</p>
  
  <pre><code> export const App = () =&gt; {
    const [{ data, loading, error }, refetch] = useAxios(
      "https://api.myjson.com/bins/820fc"
    );
  
    if (loading) return &lt;p&gt;Loading...&lt;/p&gt;;
    if (error) return &lt;p&gt;Error!&lt;/p&gt;;
  
    return (
      &lt;div&gt;
        &lt;button onClick={e =&gt; refetch()}&gt;refetch&lt;/button&gt;
        &lt;pre&gt;{JSON.stringify(data, null, 2)}&lt;/pre&gt;
      &lt;/div&gt;
    );
  };
  
  const rootElement = document.getElementById("root");
  render(&lt;App /&gt;, rootElement);
  </code></pre>
  
  <p>I'm trying to figure out how to write a test where I can mock the useAxios hook. I've tried creating a mock of the underlying axios component but I cant get this working:</p>
  
  <pre><code>import React from "react"
  import { render } from "@testing-library/react"
  import { Test } from "../test"
  import useAxios from "axios-hooks"
  
  jest.mock("axios-hooks")
  const mockedAxios = useAxios as jest.Mocked&lt;typeof useAxios&gt;
  
  it("Displays loading", () =&gt; {
    // How to mock the return values in the following line?
    // mockedAxios.
  
    const { getByText } = render(&lt;Test /&gt;)
  
    expect(getByText("Loading...")).toBeDefined()
  })
  </code></pre>
  
  <p>I know that I shouldn't have to mock axios which is the underlying dependency, I should be able to mock useAxios, but I though I'd try anyhow.</p>
  
  <p>I realise that this question has been mentioned many times on SO, but I can find a solution to this particular use case.</p>
  
  <p>Any help greatly appreciated!</p>