Я создавал модульные тесты для моего модального компонента, но когда я запускаю тесты, я получаю 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 ChangePasswordModal Root extends PureComponent {form = FormBuilder.group ({currentPassword: ['', [Validators.required]], новыйPassword: ['', [Validators.required, Validators .pattern (RESET_PASSWORD_FORMAT)]], verifyPassword: ['', [Validators.required]],}, {validators: checkIfMatchingPasswords ('newPassword', 'verifyPassword') как 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>
);
}
}