Я пытаюсь проверить мою регистрационную форму с помощью React + Enzyme + Jest.В моей форме регистрации есть ссылка, которую я позже использую для проверки входных данных, но все входные данные не контролируются.Я хочу убедиться, что без обновления каких-либо входных данных, проверка не проходит и мой асинхронный метод не вызывается.В render()
:
<form name="signup" ref={(e) => { this.form = e; }} onSubmit={this.handleSignup}>
<TextField
label="Company Name"
name="companyName"
id="companyName"
/>
.
.
.
</form>
В handleSignup
я извлекаю значения и проверяю их:
const values = [
{ companyName: this.form.companyName.value },
.
.
.
];
this.validate(values);
Когда я mount
мой компонент в ферменте и simulate('submit')
, мой ref не содержит никаких входных значений, что дает мне Error: Uncaught [TypeError: Cannot read property 'value' of undefined]
expect(wrapper.instance().form).toBeDefined(); //passes, so this.form is defined
expect(wrapper.instance().form.companyName).toBeDefined(); // fails
expect(wrapper.ref('form')).toBeDefined(); //fails
Если я изменю свой ref на строку ref,
expect(wrapper.ref('form')).toBeDefined(); //passes
expect(wrapper.ref('form').companyName).toBeDefined(); //fails
Полный тест:
it('should not submit with no inputs', () => {
const createAccount = sinon.spy();
const wrapper = mount(
<Signup
auth={{
status: 'pristine',
}}
createAccount={createAccount}
match={{}}
/>,
);
wrapper.setProps({});
expect(wrapper.ref('form')).toBeDefined();
expect(wrapper.ref('form').companyName).toBeDefined();
expect(createAccount).to.have.property('callCount', 0);
});
Github Выпуск с минимальным репо и кодами и ссылкой на ящик