title: how to test button that call submit form using jest and react testing library
body: <p>so I am trying to test that the onSubmit function is getting triggered if the button is clicked - the way im doing this is through testing the internals of the onSubmit function is getting calles (axios post method)</p>
  <p><em>the test</em></p>
  <pre><code>describe('RecipeSearch', () =&gt; {
      test('submit button should return post function to recipes/search/', () =&gt; {
          let mock = new MockAdapter(axios);
          userEvent.selectOptions(screen.getByRole('combobox'), 'Sweet');
          userEvent.click(screen.getByText('Search'));
  
          const config = {
              headers: {
                  'Content-Type': 'application/json',
              },
          };
          const searchRecipes = mock.onPost(
              `${process.env.REACT_APP_API_URL}/recipes/search/`,
              { flavor_type: 'Sweet' },
              { config }
          );
          expect(searchRecipes).toHaveBeenCalled();
      });
  });
  
  </code></pre>
  <p><em>the Error</em></p>
  <pre><code>    expect(received).toHaveBeenCalled()
  
      Matcher error: received value must be a mock or spy function
  
      Received has type:  object
      Received has value: {&quot;abortRequest&quot;: [Function abortRequest], &quot;abortRequestOnce&quot;: [Function abortRequestOnce], &quot;networkError&quot;: [Function networkError], &quot;networkErrorOnce&quot;: [Function networkErrorOnce], &quot;passThrough&quot;: [Function passThrough], &quot;reply&quot;: [Function reply], &quot;replyOnce&quot;: [Function replyOnce], &quot;timeout&quot;: [Function timeout], &quot;timeoutOnce&quot;: [Function timeoutOnce]}
  </code></pre>
  <p><em>the function</em></p>
  <pre><code>const recipeSearch = (props) =&gt; {
      const [formData, setFormData] = useState({
          flavor_type: 'Sour',
      });
  
      const { flavor_type } = formData;
  
      const [loading, setLoading] = useState(false);
  
      const onChange = (e) =&gt; setFormData({ ...formData, [e.target.name]: e.target.value });
  
      const onSubmit = (e) =&gt; {
          e.preventDefault();
  
          const config = {
              headers: {
                  'Content-Type': 'application/json',
              },
          };
  
          setLoading(true);
          axios
              .post(
                  `${process.env.REACT_APP_API_URL}/recipes/search/`,
                  {
                      flavor_type,
                  },
                  config
              )
              .then((res) =&gt; {
                  setLoading(false);
                  props.setRecipes(res.data);
                  window.scrollTo(0, 0);
              })
              .catch((err) =&gt; {
                  setLoading(false);
                  window.scrollTo(0, 0);
              });
      };
  
      return (
          &lt;form  onSubmit={(e) =&gt; onSubmit(e)}&gt;
              &lt;div&gt;
                  &lt;div&gt;
                      &lt;div&gt;
                          &lt;label htmlFor='flavor_type'&gt;Choose Flavor&lt;/label&gt;
                          &lt;select
                              name='flavor_type'
                              onChange={(e) =&gt; onChange(e)}
                              value={flavor_type}
                          &gt;
                              &lt;option value='Sour'&gt;Sour&lt;/option&gt;
                              &lt;option&gt;Sweet&lt;/option&gt;
                              &lt;option&gt;Salty&lt;/option&gt;
                          &lt;/select&gt;
                      &lt;/div&gt;
  
                      &lt;div&gt;
                              &lt;button type='submit'&gt;Search&lt;/button&gt; 
                      &lt;/div&gt;
                  &lt;/div&gt;
              &lt;/div&gt;
          &lt;/form&gt;
      );
  };
  </code></pre>
  <p>i have added the whole test and the component code so helping would be easier.
  thanks in advance</p>
  <p>(added the onChange + onSubmit functions)</p>