Jest snapshot testing TypeError: Invalid attempt to destructure non-iterable instance

I believe your problem is setting useFormikContext: jest.fn(). jest.fn() by default returns a function that returns undefined as mentioned in jest docs. and by that you try to deconstruct undefined.

you need to mock the return value of useFormikContext function:

jest.mock('formik', () => ({
  useField: jest.fn(),
  useFormikContext: jest.fn().mockReturnValue({ isValidating: false, setFieldValue: () => {} }),
}));

If that doesnt help, please add full and simple runnable example that's not working, so I can take a deeper look. (i.e. test file and code file)

Edit

I see you only mocked useField useFormikContext functions of formik module, although you probably use more from formik module, like Formik tag and such, but they're now overriden.

jest.mock overrides the whole module, and not suitable for your use case, because you only want to mock only useField & useFormikContext.

I like to use jest.spyOn which can be used to mock only specific functions of a module. see jest docs on jest.spyOn.

Here's full working small example mocking formik in jest react testing.

1. example.js - react component that's being tested.
2. example.spec.js - simple jest test

example.js:

import React from 'react';
import { useFormikContext, Formik, Form, Field } from 'formik';

export const OtherComponent = () => {
  // Grab values and submitForm from context
  const { isValidating, setFieldValue } = useFormikContext();

  return (
    <div>
      <div>{isValidating ? 'validating...' : 'validated!'}</div>
      <button type="submit" disabled={isValidating}>
        submit
      </button>
      <button
        type="button"
        disabled={isValidating}
        onClick={() => {
          setFieldValue('token', '123456');
        }}
      >
        return to default
      </button>
    </div>
  );
};

export const ExmpleComponent = () => {
  return (
    <div>
      <h1>Example</h1>
      <Formik
        initialValues={{ token: '' }}
        validate={(values) => {
          return new Promise((resolve, _reject) => setTimeout(resolve, 3000)).then(() => {
            // wait 3 seconds
            const errors = {}; // no errors
            return errors;
          });
        }}
        onSubmit={(_values, _actions) => {
          console.log('submitted!');
        }}
      >
        <Form>
          <Field name="token" type="tel" />
          <OtherComponent />
        </Form>
      </Formik>
    </div>
  );
};

example.spec.js:

import React from 'react';

import renderer from 'react-test-renderer';
import * as formik from 'formik';
import { ExmpleComponent } from '../src/example.js';

// jest.mock('formik', () => ({
//   useField: jest.fn(),
//   useFormikContext: jest.fn().mockReturnValue({ isValidating: false, setFieldValue: () => {} }),
// }));

describe('MyComponent', () => {
  test('should render component properly', () => {
    const useFieldSpy = jest.spyOn(formik, 'useField');
    const useFormikContextSpy = jest.spyOn(formik, 'useFormikContext');

    useFieldSpy.mockReturnValue(undefined);
    useFormikContextSpy.mockReturnValue({ isValidating: true, setFieldValue: () => {} });

    const component = renderer.create(<ExmpleComponent />);
    const tree = component.toJSON();
    expect(tree.children[1].children[1].children[0].children[0]).toBe('validating...');

    useFieldSpy.mockRestore();
    useFormikContextSpy.mockRestore();
  });
});

If that still doesnt work, please add full & simple example that I can run to test by myself to see what's wrong in your code. You added full example of the test file, but not the code you're testing.

For contribute, I solved similar issue using this code:

jest.mock('formik', () => ({
  useField: jest.fn(),
  useFormikContext: jest.fn().mockReturnValue({ 
    setFieldValue: () => {}, 
    handleChange: () => {},
    initialValues: {} as AddDoctorInfoFormValues, 
    errors: {} as FormikErrors<AddDoctorInfoFormValues>,
    values: {} as AddDoctorInfoFormValues, 
  }),
}));