我为什么获得方法“ props”仅用于在单个节点上运行。在单元测试中找到0，而不是？

Question

我正在为模态组件创建单元测试，但是当我运行测试时，我得到了Method “props” is onlymeant to be run on a single node. 0 found instead.这是我的测试文件的摘录：

test('should contain input fields with appropriate labels', () => {
        expect(
            wrapper
                .find('Input')
                .at(0)
                .props().label
        ).toEqual('Current Password');
        expect(
            wrapper
                .find('Input')
                .at(1)
                .props().label
        ).toEqual('New Password');
        expect(
            wrapper
                .find('Input')
                .at(2)
                .props().label
        ).toEqual('Confirm New Password');
    });

    test('should contain input fields with appropriate placeholders', () => {
        expect(
            wrapper
                .find('Input')
                .at(0)
                .props().placeholder
        ).toEqual('Please enter your current password');
        expect(
            wrapper
                .find('Input')
                .at(1)
                .props().placeholder
        ).toEqual('Please enter your new password');
        expect(
            wrapper
                .find('Input')
                .at(2)
                .props().placeholder
        ).toEqual('Please confirm your new password');
    });

    test('should contain input fields with required props', () => {
        expect(
            wrapper
                .find('Input')
                .at(0)
                .props().required
        ).toEqual(true);
        expect(
            wrapper
                .find('Input')
                .at(1)
                .props().required
        ).toEqual(true);
        expect(
            wrapper
                .find('Input')
                .at(2)
                .props().required
        ).toEqual(true);
    });
});

这是我要测试的组件文件：

Class ChangePasswordModalRoot扩展了PureComponent {形式= FormBuilder.group（{currentPassword：[''，[Validators.required]]，newPassword：[''，[Validators.required，Validators.pattern（RESET_PASSWORD_FORMAT）]]，confirmPassword：[''，[Validators.required]]，}，{验证者：checkIfMatchingPasswords（'newPassword'，'confirmPassword'）作为ValidatorFn}）;

    handleSave = () => {
        const { onSave } = this.props;
        const oldPassword = this.form.get('currentPassword').value;
        const newPasswordLeft = this.form.get('newPassword').value;
        const newPasswordRight = this.form.get('confirmPassword').value;
        onSave(oldPassword, newPasswordLeft, newPasswordRight);
    };

    render() {
        const { isShow, classes, onClose } = this.props;

        return (
            <div className={classes.container}>
                <FieldGroup
                    control={this.form}
                    strict={false}
                    render={({ invalid }) => (
                        <ModalDialog
                            maxWidth="sm"
                            isShow={isShow}
                            disableSave={invalid}
                            config={{
                                title: `New password`,
                                handleConfirm: this.handleSave,
                                handleCancel: onClose,
                            }}
                        >
                            <div className={classes.defautlWrapper}>
                                <div className={classes.defautlWrapper}>
                                    <FieldControl
                                        name="currentPassword"
                                        render={({ handler, errors, touched }) => (
                                            <Input
                                                {...handler()}
                                                required
                                                touched={touched}
                                                label="Current Password"
                                                type="password"
                                                errors={errors}
                                                placeholder="Please enter your current password"
                                                maxLength={200}
                                            />
                                        )}
                                    />
                                </div>
                                <div className={classes.newPasswordWrapper}>
                                    <FieldControl
                                        name="newPassword"
                                        render={({ handler, errors, touched }) => (
                                            <Input
                                                {...handler()}
                                                required
                                                touched={touched}
                                                errors={errors}
                                                type="password"
                                                label="New Password"
                                                errorMessages={DEFAULT_VALIDATION_ERRORS}
                                                placeholder="Please enter your new password"
                                                maxLength={200}
                                            />
                                        )}
                                    />
                                </div>
                                <div className={classes.newPasswordWrapper}>
                                    <FieldControl
                                        name="confirmPassword"
                                        render={({ handler, errors, touched }) => (
                                            <div>
                                                <Input
                                                    {...handler()}
                                                    required
                                                    touched={touched}
                                                    errors={errors}
                                                    type="password"
                                                    errorMessages={ERROR_MESSAGE_NO_MATCH}
                                                    label="Confirm New Password"
                                                    placeholder="Please confirm your password"
                                                    maxLength={200}
                                                />
                                            </div>
                                        )}
                                    />
                                </div>
                            </div>
                        </ModalDialog>
                    )}
                />
            </div>
        );
    }
}

Answer 1

可以将Input更改为input

wrapper
    .find('input')