title: Stubbing I18next useTranslation hook in Jest doesn't trigger toHaveBeenCalled
body: <p>I'm trying to stub/spy the translation, not just mock it, and I can't seem to get it to trigger even in this most base case.</p>
  <pre class="lang-js prettyprint-override"><code>/**
   * ComponentName.jsx
   */
  
  import { useTranslation } from &quot;react-i18next&quot;;
  
  export default function ComponentName() {
    const { t } = useTranslation();
  
    return &lt;div&gt;t(`index:path`)&lt;/div&gt;
  }
  
  /**
   * ComponentName.test.jsx
   */
  
  import { shallow } from &quot;enzyme&quot;;
  import ComponentName from &quot;./ComponentName&quot;;
  import { useTranslation } from &quot;react-i18next&quot;;
  jest.mock(&quot;react-i18next&quot;, () =&gt; ({
    useTranslation: () =&gt; ({ t: jest.fn(key =&gt; key) })
  }));
  
  it(&quot;calls the translation function&quot;, () =&gt; {
    const wrapper = shallow(&lt;ComponentName /&gt;);
  
    expect(useTranslation().t).toHaveBeenCalled();
  });
  </code></pre>
  <p>When I drop a <code>console.log(t)</code> in the <code>ComponentName.jsx file</code>, it correctly displays that it's a mocked function.
  If I put <code>t()</code> in the <code>ComponentName.test.jsx</code> file, it passes.</p>
  <p>Is there a way to stub this so that I can eventually tag it with <code>toHaveBeenCalledWith</code>? Or am I relegated to doing <code>contains(&quot;index:path&quot;)</code> on the component?</p>
  <hr />
  <p>Edit: So, when I updated on @felixmosh's answer</p>
  <pre class="lang-js prettyprint-override"><code>/**
   * ComponentName.test.jsx
   */
  
  
  import { mount } from 'enzyme';
  import { I18nextProvider } from 'react-i18next';
  
  describe('&lt;SomeComponent /&gt;', () =&gt; {
    it('dispatches SORT_TABLE', () =&gt; {
      const i18nextMock = {
        t: jest.fn(key =&gt; key),
      };
      const enzymeWrapper = mount(
        &lt;I18nextProvider i18n={i18nextMock}&gt;
          &lt;SomeComponent /&gt;
        &lt;/I18nextProvider&gt;
      );
  
      expect(i18nextmock.t).toHaveBeenCalled()
    });
  });
  
  /**
   * ComponentName.jsx
   */
  
  import { useTranslation } from &quot;react-i18next&quot;;
  
  export default function ComponentName() {
    const { t } = useTranslation();
  
    return &lt;div&gt;t(`index:path`)&lt;/div&gt;
  }
  </code></pre>
  <p>It's the same issue. If <code>t</code> was <code>&quot;a string&quot;</code> instead of <code>jest.fn()</code>, when i console.log <code>t</code> in <code>ComponentName.jsx</code>, I correctly get <code>&quot;a string&quot;</code>, when I console.log <code>t</code> as <code>jest.fn(key =&gt; key)</code>, I correctly get a function.</p>
  <p>But when I call it, I don't get it.</p>
  <p>Is it possible that it's not the same instance that's being sent to I18nextProvider?</p>