酶：匿名函数中的 find() formik 组件

Question

我正在使用酶来测试反应组件。我有一个具有这种结构的 formik 表单：

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>
    }
}

如何使用 enzyme 的 find() 方法获取这些输入字段？

我可以获取主 <Formik> 组件，但无法获取该匿名函数内的输入字段。如有任何帮助，我们将不胜感激。

Answer 1

您可以使用dive()展开嵌套的form。

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

您也可以直接使用prop(key)

触发Formik道具

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

酶：匿名函数中的 find() formik 组件

enzyme: find() formik components inside an anonymous function

unit-testing

reactjs

enzyme

formik