Test Formik

test-formik.jsx

import * as React from 'react';
import {
  render,
} from '@testing-library/react';
import {
  Formik, useFormikContext,
} from 'formik';
import { getIn } from '../src';

// A default initializer
const initialValues = {
  name: '',
  age: 0,
};

// A default submit fn
const noop = () => {}

// here we wrap a test inside of a Formik instance
function renderForm(
  ui,
  props
) {
  let injected;
  const { rerender, ...rest } = render(
    <Formik onSubmit={noop} initialValues={initialValues} {...props}>
      {(formikProps) =>
        (injected = formikProps) && ui ? ui : null
      }
    </Formik>
  );

  return {
    getFormProps() {
      return injected;
    },
    ...rest,
    rerender: () =>
      rerender(
        <Formik onSubmit={noop} initialValues={initialValues} {...props}>
          {(formikProps) =>
            (injected = formikProps) && ui ? ui : null
          }
        </Formik>
      ),
  };
}

const YourErrorField = (props) => {
  const formik = useFormikContext();

  return <span className="error">{getIn(formik.errors, props.name)}</span>;
}

it('prints error', () => {
  const { getFormProps, container } = renderForm(<YourErrorField name="hello" />);
  const { setFieldError } = getFormProps();

  setFieldError('hello', 'error')

  expect(container.querySelector('.error')?.textContent).toBe("error");
});