title: How to write tests for Formik-powered input components with Jest & Enzyme (useField Hook)?
body: <p><em><strong>TL;DR</strong></em></p>
  <p>How to write unit test with Jest &amp; Enzyme for components with 'useField' hook?
  On shallow render I get this error</p>
  <pre><code>    Warning: Formik context is undefined, please verify you are calling 
  useFormikContext() as child of a &lt;Formik&gt; component
  TypeError: Cannot read property 'getFieldProps' of undefined
  </code></pre>
  <p><em><strong>Details</strong></em></p>
  <p>The project build with</p>
  <ol>
  <li>React</li>
  <li>TypeScript</li>
  <li>Formik</li>
  <li>Material UI</li>
  <li>Jest Enzyme</li>
  </ol>
  <p>It's a learning project, so I am playing around with different approaches. That's why I've put all components in different files thought it might not be necessary.</p>
  <p><em><strong>Structure:</strong></em></p>
  <pre><code>Formik.tsx
    |
    | AddContactForm.tsx
      |
      | TextInput.tsx
      | TextInput.test.tsx
  </code></pre>
  <p><em><strong>Details:</strong></em></p>
  <p><strong>Formik.tsx</strong>
  Just a wrapper where we have all properties of the form</p>
  <pre><code> &lt;Formik
              initialValues={initialValues}
              validationSchema={...}
              onSubmit={...};
              component={AddContactForm}
            /&gt;
  </code></pre>
  <p><strong>AddContactForm.tsx</strong>
  Here I am passing field meta and props to input. It seems to be not the best solution, I'd like to use useField() hook inside a  component itself</p>
  <pre><code>&lt;Form&gt;
          &lt;TextInput
            label=&quot;First Name&quot;
            name={&quot;firstName&quot;}
            placeholder=&quot;Jane&quot;
            field={getFieldProps(&quot;firstName&quot;)}
            meta={getFieldMeta(&quot;firstName&quot;)}
          /&gt;
          &lt;button type=&quot;submit&quot;&gt;Submit&lt;/button&gt;
      &lt;/Form&gt;
  </code></pre>
  <p><strong>TextInput.tsx</strong>
  This is current solution - I can write unit tests for it - for example snapshot testing.</p>
  <pre><code>const TextInput: React.FC&lt;MyInput&gt; = React.memo(
    ({ label, field, meta}: MyInput) =&gt; {
      return (
        &lt;&gt;
          &lt;TextField
            label={label}
            type=&quot;text&quot;
            {...field}
            error={meta?.touched &amp;&amp; meta?.error ? true : undefined}
            helperText={meta?.touched ? meta?.error : undefined}
          /&gt;
        &lt;/&gt;
      );
    }
  );
  </code></pre>
  <p><strong>TextInput.test.tsx</strong>
  Here I have to write big mockProps object to mock all things :(</p>
  <pre><code>describe(&quot;&lt;TextInput/&gt;&quot;, () =&gt; {
    it(&quot;Match Snapshot&quot;, () =&gt; {
      const mockProps: MyInput = {
        label: &quot;label&quot;,
        name: &quot;name&quot;,
        placeholder: &quot;placeholder&quot;,
        meta: {
          touched: false,
          error: &quot;&quot;,
          initialError: &quot;&quot;,
          initialTouched: false,
          initialValue: &quot;&quot;,
          value: &quot;&quot;,
        },
        field: {
          value: &quot;&quot;,
          checked: false,
          onChange: jest.fn(),
          onBlur: jest.fn(),
          multiple: undefined,
          name: &quot;firstName&quot;,
        },
      };
  
      expect(
        shallow(
          &lt;TextInput
            label=&quot;label&quot;
            name=&quot;name&quot;
            placeholder=&quot;placeholder&quot;
            {...mockProps.meta}
            {...mockProps.field}
          /&gt;
        )
      ).toMatchSnapshot();
    });
  });
  </code></pre>
  <p>Instead, what I want is to get <em>field</em> and <em>meta</em> not by props, but with useField() hook.</p>
  <p><strong>TextField.tsx</strong></p>
  <pre><code>const TextInput: React.FC&lt;MyInput&gt; = React.memo(
    ({ label, ...props }: MyInput) =&gt; {
      const [field, meta] = useField(props);
      return (
        &lt;&gt;
          &lt;TextField
            label={label}
            type=&quot;text&quot;
            {...field}
            {...props}
            error={meta?.touched &amp;&amp; meta?.error ? true : undefined}
            helperText={meta?.touched ? meta?.error : undefined}
          /&gt;
        &lt;/&gt;
      );
    }
  );
  </code></pre>
  <p>But then I have not clue how to write a test for it. It seems like it wants to have Formik context inside a test, but it's not possible to use useFormikContext() hook in test file as  it violates rules of hooks usage.</p>