1

假设我有一个组件，它是父 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 快照？

4

0 回答 0