如何创建react formik表单的Jest快照

时间:2018-06-20 19:01:39

标签: javascript reactjs jestjs formik

假设我有一个组件,它是父formik表单的一部分,如下所示:

interface GeneralTabProps {
    owner: string;
    viewer: string;
};
interface GeneralTabState { };

const innerGeneralTab: React.SFC<any> = (props) => {

    const {
        values,
        touched,
        errors,
        dirty,
        isSubmitting,
        handleChange,
        handleBlur,
        handleSubmit,
        handleReset
    } = props;

    return (
        <div>
            <Grid columns={2} padded>
                <Grid.Row stretched>
                    <Grid.Column>
                        <Form.Input
                            onChange={handleChange}
                            // onBlur={handleBlur}
                            label="Owner Group"
                            name="owner"
                            value={values.owner}
                            width={11}                            
                        />
                        {errors.owner && touched.owner && <div styleName="field-error">{errors.owner}</div>}
...
<div/>
父表单为:

// Our inner form component. Will be wrapped with Formik({..})
const InnerForm = (props: OtherProps & FormikProps<FormValues>) => {

  const panes = [
    { menuItem: 'General', render: () => <Tab.Pane attached={false}><GeneralTab {...props} /></Tab.Pane> },
    { menuItem: 'Projects', render: () => <Tab.Pane attached={false}><ProjectTab {...props} /></Tab.Pane> },
    { menuItem: 'Views', render: () => <Tab.Pane attached={false}><ViewTab  {...props} /></Tab.Pane> },
  ]

如何为此GeneralTab组件创建Jest快照?

0 个答案:

没有答案