title: How to mock a returned function from custom hook using Jest and React Testing library
body: <p>I'm facing problem while testing a component that uses custom hook. I have written a custom hook for &quot;Spinner&quot; that internally uses a context to provide the spinner state to the components.</p>
  <p>Then, I used <code>useSpinner()</code> inside, say for eg, Login form component. I'm getting the below mentioned error. (also the test didn't stop here and finally said all tests passed)</p>
  <p><code>uncaught TypeError setLoading is not a function</code>.</p>
  <p><code>Login.tsx</code></p>
  <pre class="lang-js prettyprint-override"><code>...
  
  const [loading, setLoading] = useSpinner();
  
    const clearForm = useCallback(() =&gt; {
      setEmail('');
      setPassword('');
      setLoading(false); /* Getting error here */
    }, [setLoading]);
  
    useEffect(() =&gt; () =&gt; clearForm(), [clearForm]);
  ...
  </code></pre>
  <p><code>use-spinner.tsx</code></p>
  <pre class="lang-js prettyprint-override"><code>export default function useSpinner(): SpinnerContextType {
    const context = useContext(SpinnerContext);
    if (!context) {
      throw new Error('useSpinner is used outside of SpinnerContext scope');
    }
    return context;
  }
  </code></pre>
  <p>In my <code>types.ts</code> file, I have defined the type <code>SpinnerContextType</code></p>
  <pre class="lang-js prettyprint-override"><code>export type SpinnerContextType = [
    loading: boolean,
    setLoading: (value: boolean) =&gt; void
  ];
  </code></pre>
  <p>and <code>SpinnerContext.tsx</code> file contains</p>
  <pre class="lang-js prettyprint-override"><code>const SpinnerContext = createContext&lt;SpinnerContextType&gt;([false, null]);
  </code></pre>
  <p>In my test file <code>Login.test.tsx</code>, I have created a mock for this. But it didn't work.</p>
  <pre class="lang-js prettyprint-override"><code>const setLoadingMock = jest.fn((v: boolean) =&gt; {});
    jest.mock('../../hooks/use-spinner', () =&gt; ({
      __esModule: true,
      default: [false, setLoadingMock],
    }));
  
  test('Test login', () =&gt; {
      render(
          &lt;SpinnerContext.Provider value={[false, setLoadingMock]}&gt;
              &lt;Login /&gt;
          &lt;/SpinnerContext.Provider&gt;
      );
  });
  </code></pre>