Best method for mocking the FormikProvider when using the useFormik hook

[mpconsultsai]

I am currently building a form using Formik which I am relatively new too. Each section of the form is split into its own component which contains many Formik "Field" components.

Using React testing library for a section of the form under test, when I run my tests I get a strange [TypeError: formik.getFieldProps is not a function] error which seems can be solved by wrapping the component in a FormikProvider.

On of the props of this provider is required which is "value" - which I am passing in, in my main form using the useFormik hook.

1. What is the best method to approach this - should I mock out the Provider or the actual useFormik hook?
2. Or is there a better way I should be approaching this?

[mpconsultsai]

OK if i wrap the component in <Formik initialValues={{}} onSubmit={noop}>{children}</Formik> that removes the error and all the tests pass (noop imported from lodash) - but interested in other options if available.

[johnrom]

Every component which uses Formik (and thus Formik's context) needs a React context above it. One method is by using the Formik component. The other is providing a FormikProvider with the return value of useFormik. These methods are exclusive because the Formik component calls its own useFormik hook internally.

const formik = useFormik(props);

return <FormikProvider value={formik}

[moiz-frost]

Weird that this isnt documented

[omaracrystal]

I was also running into the same type of error that @moiz-frost pointed out. That lead me to this page and I tried to follow the recommendation.. however I am getting this error now: "TypeError: Cannot read properties of null (reading 'useRef')"

What am I doing wrong?

This is my code:

import React from 'react';
import { render } from 'utils/testUtils';
import { FormikProps, FormikProvider, useFormik } from 'formik';
import CreateTicketLocation from './CreateTicketLocation';
import {
  defaultCreateTicketFormValues,
  ICreateTicketForm,
} from '../../types/createTicket';
import { beforeAll } from 'vitest';

let formik: FormikProps<ICreateTicketForm>;
beforeAll(() => {
  formik = useFormik({
    initialValues: defaultCreateTicketFormValues,
    onSubmit: (values) => {
      console.log(values);
    },
  });
});

describe('CreateTicketLocation Component', () => {
  test('it should match the snapshot', () => {
    const { asFragment } = render(
      <FormikProvider value={formik}>
        <CreateTicketLocation
          preSelectedCircuitId=""
          formik={formik}
          handleSearchTypevalue={() => console.log('Create Ticket location')}
          previousSearchType=""
        />
      </FormikProvider>
    );
    expect(asFragment()).toMatchSnapshot();
  });
});

[nikolay-borzov]

Apparently, you cannot run hooks inside a test function.
So you need to create a wrapper component that calls formik = useFormik({...}):

const Wrapper: FC = () => {
 const formik = useFormik({
    initialValues: defaultCreateTicketFormValues,
    onSubmit: (values) => {
      console.log(values);
    },
  });

  return (
    <FormikProvider value={formik}>
      <CreateTicketLocation
        preSelectedCircuitId=""
        formik={formik}
        handleSearchTypevalue={() => console.log('Create Ticket location')}
        previousSearchType=""
      />
    </FormikProvider>
  );
};