Как мне проверить неконтролируемую форму с ссылками в Enzyme? - PullRequest
0 голосов
/ 07 декабря 2018

Я пытаюсь проверить мою регистрационную форму с помощью 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 Выпуск с минимальным репо и кодами и ссылкой на ящик

Добро пожаловать на сайт PullRequest, где вы можете задавать вопросы и получать ответы от других членов сообщества.
...