title: How to mock a function dispatching an action in React functional component using jest
body: <p>I have a component that gets form data and dispatch an action with data. This action eventually makes an ajax request to the server to send that data using javascript <code>fetch</code> function.</p>
  <pre><code>import React, { useState, useEffect } from 'react';
  import { useDispatch, useSelector } from 'react-redux';
  import { Editor } from 'react-draft-wysiwyg';
  import { EditorState } from 'draft-js';
  import 'react-draft-wysiwyg/dist/react-draft-wysiwyg.css';
  import { getCookie } from '../../../utils/cookies';
  
  import { postJobAction } from './redux/postJobActions';
  
  const PostJobComponent = () =&gt; {
    const dispatch = useDispatch();
    const [editorState, setEditorState] = useState(() =&gt; EditorState.createEmpty());
    const [department, setDepartment] = useState('');
  
    const postJob = (event) =&gt; { // Here is happens and I am testing this function now.
      event.preventDefault();
  
      const jobPosterId = getCookie('id');
      const title = event.target.title.value;
      const location = event.target.location.value;
      const jobDescription = editorState.getCurrentContent().getPlainText();
  
      dispatch(postJobAction({
        jobPosterId,
        title,
        location,
        department,
        jobDescription,
      }));
    };
  
    const onDepartmentChange = (event) =&gt; {
      setDepartment(event.target.value);
    };
  
    return (
      &lt;div className='post-job'&gt;
        &lt;form onSubmit={postJob}&gt;
          &lt;div&gt;
            &lt;label&gt;Job Title&lt;/label&gt;
            &lt;input
              type='text'
              name='title'
              defaultValue=''
              className='job__title'
              placeholder='e.g. Frontend Developer, Project Manager etc.'
              required
            /&gt;
          &lt;/div&gt;
          &lt;div&gt;
            &lt;label&gt;Job Location&lt;/label&gt;
            &lt;input
              type='text'
              name='location'
              defaultValue=''
              className='job__location'
              placeholder='e.g. Berlin, Germany.'
              required
            /&gt;
          &lt;/div&gt;
          &lt;div&gt;
            &lt;label&gt;Department&lt;/label&gt;
            &lt;select className='job__department' required onChange={onDepartmentChange}&gt;
              &lt;option value=''&gt;Select&lt;/option&gt;
              &lt;option value='Customer Success'&gt;Customer Success&lt;/option&gt;
              &lt;option value='Professional Services'&gt;Professional Services&lt;/option&gt;
              &lt;option value='Service Support'&gt;Service And Support&lt;/option&gt;
            &lt;/select&gt;
          &lt;/div&gt;
          &lt;div style={{ border: '1px solid black', padding: '2px', minHeight: '400px' }}&gt;
            &lt;Editor
              required
              editorState={editorState}
              onEditorStateChange={setEditorState}
            /&gt;
          &lt;/div&gt;
          &lt;div&gt;
            &lt;button&gt;Save&lt;/button&gt;
          &lt;/div&gt;
        &lt;/form&gt;
      &lt;/div&gt;
    );
  };
  
  export default PostJobComponent;
  </code></pre>
  <p>Here is the test in jest and enzyme for postJob function.</p>
  <pre><code>it('should submit job post form on save button click', () =&gt; {
          const onPostJobSubmit = jest.fn();
          const instance = wrapper.instance();
          wrapper.find('form').simulate('submit', {
        target: {
          jobPosterId: {
              value: '12312jkh3kj12h3k12h321g3',
          },
          title: {
            value: 'some value',
          },
          location: {
            value: 'some value',
          },
          department: {
              value: 'Customer',
          },
          jobDescription: {
              value: 'This is Job description.',
          },
        },
      });
          expect(onPostJobSubmit).toHaveBeenCalled();
      });
  </code></pre>
  <p>The code works perfectly fine but the tests are failing with below error.</p>
  <pre><code>expect(jest.fn()).toHaveBeenCalled()
  
      Expected number of calls: &gt;= 1
      Received number of calls:    0
  
         98 |       },
         99 |     });
      &gt; 100 |         expect(onPostJobSubmit).toHaveBeenCalled();
            |                                 ^
        101 |     });
        102 | });
        103 |
  
        at Object.&lt;anonymous&gt; (src/components/employer/jobs/postJob.test.js:100:27)
  </code></pre>
  <p>Here is the action for <code>postJob</code> function that dispatches action.</p>
  <pre><code>export const postJobAction = (payload) =&gt; {
    return {
      type: 'POST_JOB_REQUEST',
      payload,
    }
  };
  
  </code></pre>
  <p>Here is the saga.</p>
  <pre><code>import { put, call } from 'redux-saga/effects';
  import { postJobService } from '../services/postJobServices';
  
  export function* postJobSaga(payload) {
    try {
      const response = yield call(postJobService, payload);
      yield [
        put({ type: 'POST_JOB_SUCCESS', response })
      ];
    } catch(error) {
      yield put({ type: 'POST_JOB_ERROR', error });
    }
  }
  </code></pre>
  <p>And here is the service.</p>
  <pre><code>import { getCookie } from '../../../../utils/cookies';
  
  export const postJobService = (request) =&gt; {
    return fetch('http://localhost:3000/api/v1/employer/jobs', {
        method: 'POST',
        headers: {
          'Content-Type': 'application/json',
          'Authorization': getCookie('token'),
        },
        body: JSON.stringify(request.payload)
      })
      .then(response =&gt; {
        return response.json();
      })
      .then(json =&gt; {
        return json;
      })
      .catch(error =&gt; {
        return error;
      });
  };
  </code></pre>
  <p>Any idea how can I fix this? I am new to testing.</p>