title: Handling the api error part in jest React testing library
body: <p>I have the following function on form submit. There is no much form validations added for now and i make the post api call and submits the form on clicking save button. I have successfully wrote the test case for the successful form submission and not very sure how to go about the error scenario to cover the <code>.catch((e) =&gt; {}</code> part in general when the api fails.</p>
  <pre><code>const onSubmit: SubmitHandler&lt;DoctorSettings&gt; = (data) =&gt; {
    userUpdateService
      .updateUser(data)
      .then((resp) =&gt; {
        UtilsService.popUp(&quot;Successfully submitted form&quot;, &quot;success&quot;);
      })
      .catch((e) =&gt; {
        UtilsService.popUp(&quot;Error submitting form&quot;, &quot;error&quot;);
      });
  };
  </code></pre>
  <p>I wrote the following test case for the successful form submit</p>
  <pre><code>const updateUser = jest.fn(() =&gt; Promise.resolve());
  jest.mock(&quot;../services/userUpdateService.service&quot;, () =&gt; {
    return function() {
      return {
        updateUser: updateUser,
      };
    };
  });
  </code></pre>
  <pre><code>
  test(&quot;should successfully submit the form when save is clciked&quot;, async () =&gt; {
            const { findByTestId, getByTestId } = render(props);
          
            const gender = await getByTestId(
              &quot;gender-select&quot;
            ).querySelector('input[type=&quot;radio&quot;]');
            // ----------------
            // ----------------
            // ----------------
          
            const saveButton = await findByTestId(&quot;save-button&quot;);
          
            expect(gender).toBeInTheDocument();
            // ----------------
            // ----------------
            // ----------------
            expect(saveButton).toBeInTheDocument();
          
            await act(async () =&gt; {
              fireEvent.click(saveButton);
            });
            expect(updateUser).toBeCalled();
          });
  
  </code></pre>