TypeError: ShallowWrapper::renderProp() can only be called on custom components

I am trying to test the render props of my React component, and have followed some advice in doing so, however it is not working.

Component:

const AppMain = () =>{
    return (
    <main>
        Enter datapack details here.
        <Formik
          initialValues={{
            pack_name: '', 
            pack_mcmeta:{
              pack_format: '',
              description: ''
              },
            data: {
            }
          }}
          onSubmit={(values, { setSubmitting }) => {
           setTimeout(() => {
             alert(JSON.stringify(values, null, 2));
             setSubmitting(false);
           }, 400);
         }}
         render={({ isSubmitting }) => (
          <Form className="form-container">
            <MetaFields />
            <Divider variant="middle"></Divider>
            <Button variant="outlined" type="submit" disabled={isSubmitting}>
              Submit
            </Button>
          </Form>
        )}>
        </Formik>
      </main>)
}

And my test:

import Enzyme, {shallow} from 'enzyme';
import AppMain from './AppMain';

import Adapter from 'enzyme-adapter-react-16';
import { Formik } from 'formik';
Enzyme.configure({ adapter: new Adapter()})

describe('<AppMain />', () => {
    let wrapper;
    beforeEach(() => {
        wrapper = shallow(<AppMain />);
    });
    it('Renders a form', () => {
        const renderedForm = wrapper.renderProp('render')(false)
        expect(renderedForm.exists('.form-container')).toEqual(true);
    })
});

But I get this error message:

● › Renders a form

TypeError: ShallowWrapper::renderProp() can only be called on custom components

  17 |     });
  18 |     it('Renders a form', () => {
> 19 |         const renderedForm = wrapper.renderProp('render')(false)
     |                                      ^
  20 |         expect(renderedForm.exists('.form-container')).toEqual(true);
  21 |     })
  22 | });

  at ShallowWrapper.<anonymous> (node_modules/enzyme/build/ShallowWrapper.js:1471:19)
  at ShallowWrapper.single (node_modules/enzyme/build/ShallowWrapper.js:1960:25)
  at ShallowWrapper.renderProp (node_modules/enzyme/build/ShallowWrapper.js:1469:21)
  at Object.renderProp (src/AppMain.spec.js:19:38)

I have not found anything online about the error message title:

TypeError: ShallowWrapper::renderProp() can only be called on custom components

Answer

The error message :

TypeError: ShallowWrapper::renderProp() can only be called on custom components

Is saying that the renderProp is being run on a non-jsx element, e.g. a basic html element.

Where you thought it was running on the Formik element, it was running on main which cannot have a renderProps, so the test fails straight away.

You need to change your code to run on the Formik element.