title: How do you mock an internal function being used within react component with jest and react testing library?
body: <p>I'm introducing react testing into my teams codebase, however I can't seem to mock functions the way I do in regular util/helper functions elsewhere in the codebase.</p>
  <p>My component looks like:</p>
  <pre><code>import {
    util1,
    util2,
  } from '../utils/utils_for_this_component';
  
  const ParentComponent = ({ prop1, prop2 }) =&gt; {
    const result = util1(prop1, prop2);
    return (
      &lt;ChildComponent1
        aProp={util2(result)}
      &gt;
      ...
      &lt;/ChildComponent1&gt;
    );
  };
  </code></pre>
  <p>So I just want to validate that when I render this prop, the <code>result</code> being passed to util2 is what we expect it to be.</p>
  <pre><code>import * as Utils from '../utils/utils_for_this_component';
  ...
  it('should do the thing', () =&gt; {
      const spy = jest.spyOn(Utils, 'util2');
      render(&lt;Provider store={store}&gt;{&lt;ParentComponent {...props} /&gt;}&lt;/Provider&gt;);
      expect(spy).toHaveBeenCalledTimes(1);
    });
  </code></pre>
  <p>But I'm never getting this to pass, it says my spy was never called.
  Am I missing something here? Why cant I spy into the actual util2 being used?</p>
  <p>Eventually I want to verify the param being passed to util2 is correct, but now Id just like to validate its being spied on correctly. I know the function is being called because 1. it works in prod, and 2. If i log the result, it shows up when I run the test case.</p>
  <p>The error:</p>
  <pre><code> expect(jest.fn()).toHaveBeenCalledTimes(1)
      
      Expected mock function to have been called one time, but it was called zero times.
  
        55 |     const spy = jest.spyOn(Utils, 'util2');
        56 |     render(&lt;Provider store={store}&gt;{&lt;ParentComponent ... /&gt;}&lt;/Provider&gt;);
      &gt; 57 |     expect(spy).toHaveBeenCalledTimes(1);
        58 |   });
        59 | });
        60 | 
  </code></pre>