Тестирование изменений входных значений формы React с помощью Jest и Enzyme - PullRequest
0 голосов
/ 07 ноября 2019

Я уже некоторое время работаю над этим тестом, и хотя я могу найти несколько решений в Интернете, я не могу найти ничего, что будет работать для меня. Я хочу проверить, обновляется ли отображаемый текст в поле ввода при использовании функции onChange. Я не хочу проверять состояние напрямую.

У меня есть форма со следующим состоянием и функцией обработки изменений:

const [formState, setFormState] = useState({
    createFirstName: '',
    createLastName: '',
    createEmail: '',
    createJobTitle: '',
    createWorkPhone: '',
    createCellPhone: '',
    createExtension: '',
  });

  const handleChange = event => {
    const value = event.target.value;
    setFormState({
      ...formState,
      [event.target.name]: value
    });
  };

Пока довольно стандартно. У меня также есть форма со следующим полем ввода:

<input
   name="createFirstName"
   id="assign-role-form-first-name-input"
   onChange={handleChange}
   type="text"
   ref={register({ required: true })}
   defaultValue={""}
            />

Теперь я должен упомянуть, что я использую react-hook-form, который помогает с проверками формы, хотя я не думаю, что это вызовет проблему.

Я пытаюсь написать тест, который вызывает изменение входного значения. Я пробовал много разных комбинаций вещей, таких как:

it('Should capture firstname correctly onChange', () => {
    const wrapper = mount(<AssignRoleForm />);
    const input = wrapper.find('#assign-role-form-first-name-input')
    input.simulate('change', {target: {value: 'Goose'}});
    expect(input.props()).toEqual('Goose')
})

или

it('Should capture firstname correctly onChange', () => {
    const wrapper = mount(<AssignRoleForm />);
    const input = wrapper.find('#assign-role-form-first-name-input')
    input.simulate('change', {target: {name: 'createFirstName' value: 'Goose'}});
    expect(input.prop('value')).toEqual('Goose')
})

Я также пытался установить опору, используя

input.prop('onChange')({target: {value: 'Goose'}})

Я пыталсяиспользуя act(() => {}, а также другие комбинации вышеперечисленного. Я также попытался избавиться от defaultValue в поле ввода и использовать вместо него value, но это тоже не сработало. Я не уверен, что моя проблема в обновлении ввода или в том, как я вызываю ввод.

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