Джест / Фермент |Протестируйте маску / снимите маску пароля

Question

В моем компоненте реагирования есть форма, которая имеет 2 поля, которые вызывают функцию, которая при нажатии show button маскирует и снимает маску с определенных полей.По сути, мне нужна помощь в тестировании самой функции.

Функция:

  togglePasswordMask = e => {
    const { type } = this.state;
    e.preventDefault();
    this.setState(prevState => ({
      passwordIsMasked: !prevState.passwordIsMasked,
      type: type === 'password' ? 'input' : 'password'
    }));
  };

Я вызываю эту функцию в моем методе рендеринга следующим образом:

<div className="input-group mb-3">
  <Field
        type={type}
        className={classNames('form-control', {
       'is-invalid': errors.password && touched.password
     })}
     placeholder="Password (Required)"
     name="password"
   />
   <div className="input-group-append">
   <span className="input-group-text">
   <div
    className={type === 'password' ? 
   'fa fa-eye fa-lg' : 'fa fa-eye-slash fa-lg'}
   onClick={this.togglePasswordMask}
   />
  </span>
 </div>
</div>

У него также есть INITIAL_STATE:

  state = {
    type: 'password',
    groups: []
  };

Можете ли вы мне помочь, напишите контрольные примеры для этого, используя Jest и Enzyme. Я пробовал следующее, но они неКажется, что это не работает:

  describe('UserCreateForm TogglePassword', () => {
    it('Should unmask password and confirmPassword on click', () => {
      const maskElement = wrapper.find('.fa fa-eye fa-lg');
      const maskFn = maskElement.simulate('click');
      expect(maskFn().state()).toEqual('input');
    });
  });

Я получаю эту ошибку: TypeError: Cannot read property 'preventDefault' of undefined.

Я итерировал немного после того, как нашел другой ответ, и мой тест теперь выглядит примерно так:

    it('Should unmask password and confirmPassword on click', () => {
      console.log(wrapper.debug());
      const maskElement = wrapper.find('.fa-eye');
      const maskFn = maskElement.simulate('click', {
        preventDefault: () => {}
      });
      expect(maskFn().state()).toEqual('input');
    });

А теперь я получаю еще одну ошибку: maskFn, is not a function.

Answer 1

Ваша непосредственная проблема в том, что maskElement.simulate возвращает Self в соответствии с Enzyme docs , и это объект, а не функция.Полностью избавьтесь от maskFn, вызовите maskElement.simulate и проигнорируйте его возвращаемое значение, и просто запустите expect против maskElement.state().

(Кроме того, вместо того, чтобы проверять внутреннее состояние вашего компонента - что некоторыечувствую себя анти-паттерном, потому что вы тестируете реализацию компонента, а не поведение компонента - рассмотрите expect использование компонента для рендеринга <Field type="password" /> vs a <Field type="text" />)