reactjs - enzyme: find() formik components inside an anonymous function

Question

I am using enzyme for testing react components. I have a formik form with this structure:

Form.js

export class Form extends Component {
    constructor(props) {
        //...
    }

    render() {
        <Formik
            inititalValues={{
                //...
            }}
            onSubmit={(values, { resetForm }) => {
                //...
                //...
            }}
            onReset = {(values, formProps) => {
                //...
            }}
            validationSchema={
                //...
            }>

            {
                (props) => {
                    const {values, errors, handleSubmit} = props;
                    return (
                        <form onSubmit={handleSubmit}>
                            <input type='text' name='email' />
                            <input type='password' name='password' />
                            <button type='submit'>Submit</button>
                        </form>
                    )
                }
            }

        </Formik>
    }
}

How do i use enzyme's find() method to get those input fileds?

I can get the main <Formik> component but can't get the input fields inside that anonymous function. Any help would be appriciated.

question from:https://stackoverflow.com/questions/65623777/enzyme-find-formik-components-inside-an-anonymous-function

Answer 1

You can use dive() to expand the nested form.

shallow(<Form {...props} />)
  .find(Formik)
  .dive()

You can also trigger Formik props directly using prop(key)

shallow(<Form {...props} />)
  .find(Formik)
  .prop('onSubmit')(args)