title: How to mock/spyOn a call to a function from a different file
body: <p>I have this function, that gets called on submit. When the payload has been posted, I want to call a function in a separate file called <code>showResponseMessage</code>:</p>
  <p>Contact.js</p>
  <pre><code>
  import { onValueChangeHandler, showResponseMessage, extractData } from '../../utility/Helpers/Helpers';
  
  
  const [config, setConfig] = useState(initialState)
  
  const recommendationHandler = (event) =&gt; {
          event.preventDefault();
          axios.post('/contact.json', extractData(config.addMessage))
              .then(() =&gt; {
                  showResponseMessage(`Din besked er sendt.`, initialState, false, setConfig, 5000);
              })
              .catch(() =&gt; {
                  showResponseMessage(`Der opstod en fejl ved sendning. Prøv igen senere.`, {}, true, setConfig, 10000);
              });
      }
  </code></pre>
  <p>The problem arises when I am trying to do spyOn on the function as follows:</p>
  <p>Contact.test.js</p>
  <pre><code>it.only('should POST data to server if necessary payload is included', () =&gt; {
          const wrapper = shallow(&lt;Contact /&gt;);
          jest.spyOn(helpers, 'showResponseMessage')
          jest.spyOn(axios, 'post').mockResolvedValueOnce({
              data: [
                  {
                      userId: 1,
                      id: 1,
                      title: 'test'
                  }
              ]
          });
  
          wrapper.find('form').simulate('submit', {
              preventDefault: () =&gt; { }
          });
          expect(axios.post).toHaveBeenCalledTimes(1);
          expect(helpers.showResponseMessage).toHaveBeenCalled();
      });
  
  </code></pre>
  <p>Helpers.js</p>
  <pre><code>export const showResponseMessage = (message, initialState, error, callback, time) =&gt; {
      if (!error) {
          callback({...initialState, responseMessage: message, error: error });
          setTimeout(() =&gt; {
              callback({...initialState, responseMessage: '', error: error });
          }, time)
      } else {
          callback(prevState =&gt; ({...prevState, responseMessage: message, error: error }));
          setTimeout(() =&gt; {
              callback(prevState =&gt; ({...prevState, responseMessage: '', error: error }));
          }, time)
      }
  
  }
  </code></pre>
  <p>It returns 0 called times.
  I am not too sure how to spyOn a function call from a separate file.</p>
  <p>I suppose I could test if the UI updated, but I am not sure how to move the lifecycle forward while test (in Jasmine, I remember when I made an async call, I would have to forcibly make the lifecycle progress to make sure the changes had happened). The <code>showResponseMessage</code> also should also trigger state update, as I pass the updateConfig to be used triggered by that specific function.</p>