title: Unit testing a formik component with jest/enzyme
body: <p>I've put together a pretty basic contact form that works just fine. However I now need to start writing my unit tests and I've run into a load of problems (like I literally have only managed to get a snapshot test to pass so far).</p>
  
  <p>So to start with I'm trying to test that the form should render my validation messages when you click the submit button if you have not filled out all the required sections.</p>
  
  <p>I thought I could achieve this by calling the <code>handleSubmit()</code> function e.g:
  <code>componentRender.find('Formik').instance().props.handleSubmit(badFormValues, { resetForm });</code></p>
  
  <p>However when I run <code>componentRender.debug()</code> , my validation messages aren't being rendered. It's like the validationSchema function isn't being called?</p>
  
  <p>Is there something special that needs to be done? I feel like the <code>mapPropsToValues()</code> function is working, from looking at the state object it's being populated with the values I'm passing the form. I just can't see why validation is seemingly being skipped?</p>
  
  <p>I've been at this for 2 days now and can't find any good examples through google (probably my fault) so any help would be massively appreciated.</p>
  
  <p>For reference here is the test file so far:</p>
  
  <p><div class="snippet" data-lang="js" data-hide="false" data-console="true" data-babel="false">
  <div class="snippet-code">
  <pre class="snippet-code-js lang-js prettyprint-override"><code>import React from 'react';
  import { shallow, mount } from 'enzyme';
  import { BrowserRouter as Router } from 'react-router-dom';
  import PartnerRegistrationForm from 'Components/partner-registration-form/PartnerRegistrationForm';
  
  describe('PartnerRegistrationForm component', () =&gt; {
      const formValues = {
          companyName: 'some company',
          countryCode: 'GB +44',
          telNumber: 12345678,
          selectCountry: 'United Kingdom',
          postcode: 'ABC1 234',
          addressSelect: '123 street',
          siteName: 'blah',
          siteURL: 'https://www.blah.com',
          contactName: 'Me',
          email: 'me@me.com',
      };
  
      const componentShallow = shallow(&lt;PartnerRegistrationForm {...formValues} /&gt;);
  
      describe('Component Snapshot', () =&gt; {
          it('should match stored snapshot', () =&gt; {
              expect(componentShallow).toMatchSnapshot();
          });
      });
  
      describe('Component functionality', () =&gt; {
          it('should not submit if required fields are empty', () =&gt; {
              const badFormValues = {
                  companyName: 'some company',
                  countryCode: 'GB +44',
                  telNumber: 12345678,
              };
              const resetForm = jest.fn();
              const componentRender = mount(
                  &lt;Router&gt;
                      &lt;PartnerRegistrationForm {...badFormValues} /&gt;
                  &lt;/Router&gt;,
              );
              componentRender.find('Formik').instance().props.handleSubmit(badFormValues, { resetForm });
              // console.log(componentRender.update().find('.validation-error'));
              // console.log(componentRender.find('Formik').instance());
              // expect(componentRender.find('.validation-error').text()).toEqual('Company Name is required');
          });
      });
  });</code></pre>
  </div>
  </div>
  </p>
  
  <p>And here is my <code>withFormik()</code> function:</p>
  
  <p><div class="snippet" data-lang="js" data-hide="false" data-console="true" data-babel="false">
  <div class="snippet-code">
  <pre class="snippet-code-js lang-js prettyprint-override"><code>const WrappedFormWithFormik = withFormik({
      mapPropsToValues({
          companyName,
          countryCode,
          telNumber,
          selectCountry,
          postcode,
          addressSelect,
          siteName,
          siteURL,
          contactName,
          email,
      }) {
          return {
              companyName: companyName || '',
              countryCode: countryCode || '',
              telNumber: telNumber || '',
              selectCountry: selectCountry || '',
              postcode: postcode || '',
              addressSelect: addressSelect || '',
              siteName: siteName || '',
              siteURL: siteURL || '',
              contactName: contactName || '',
              email: email || '',
          };
      },
      validationSchema, // This is a standard Yup.object(), just importing it from a separate file
      handleSubmit: (values, { resetForm }) =&gt; {
          console.log('submitting');
          const {
              companyName,
              countryCode,
              telNumber,
              selectCountry,
              postcode,
              addressSelect,
              siteName,
              siteURL,
              contactName,
              email,
          } = values;
  
          const emailBody = `Name: ${contactName},`
          + `Email: ${email},`
          + `Company Name: ${companyName},`
          + `Country Code: ${countryCode},`
          + `Telephone Number: ${telNumber},`
          + `Country: ${selectCountry},`
          + `Postcode: ${postcode},`
          + `Address: ${addressSelect},`
          + `Website Name: ${siteName},`
          + `Website URL: ${siteURL}`;
  
          // TODO set up actual contact submit logic
          window.location.href = `mailto:test@test.com?subject=New partner request&amp;body=${emailBody}`;
          resetForm();
      },
  })(PartnerRegistrationForm);</code></pre>
  </div>
  </div>
  </p>