Написание тестов для компонента с использованием библиотеки реагирующих крючков - PullRequest
Новая
       7

Написание тестов для компонента с использованием библиотеки реагирующих крючков

0 голосов
/ 06 февраля 2020

У меня есть компонент с библиотекой react-hook-form. Это компонент: 

export const SetNewPassword = () => {
  // ... code
  return (
    <div className="section">
      <div className="container">
        <div className="row">
          <div className="col-md-6 col-md-offset-3 text-center" style={{ textAlign: 'left' }}>
            <form onSubmit={handleSubmit(onSubmit)}>
              <Input
                titleTranslationKey="profile.register.password"
                placeholderTranslationKey="client.newPassword"
                name="password"
                type="password"
                register={register({
                  required: true,
                  validate: {
                    pattern: value => passwordValid(value, email),
                    differsFromEmail: value => passwordDiffersFromEmail(value, email),
                  },
                })}
                validationError={errors.password}
              />
              <Input
                titleTranslationKey="profile.register.passwordRetype"
                placeholderTranslationKey="client.newPasswordRepeat"
                name="passwordRetype"
                type="password"
                register={register({
                  required: true,
                  validate: {
                    passwordRetype: value => passwordRetypeValid(value, getValues().password),
                  },
                })}
                validationError={errors.passwordRetype}
              />
              <div ref={captchaRef} className="custom-checkbox" aria-live="assertive">
                <div className={hasErrorClassAssigner('form-group', state.captchaError)}>
                  <div className="input-group">
                    <ReCaptcha
                      languageCode={langCode}
                      onSuccess={onCaptchaSuccess}
                      onExpired={onCaptchaExpired}
                    />
                    {state.captchaError && (
                      <small className="help-block">
                        {t('client.validator.required', {
                          first: t('client.recaptcha'),
                        })}
                      </small>
                    )}
                  </div>
                </div>
              </div>
              <StandardButton
                className="btn main"
                text={<I18nText translationKey={'profile.edit.password.set.submit'} />}
              />
            </form>
          </div>
        </div>
      </div>
    </div>
  );
};

Вот компонент <Input/> 

export const Input = ({
  // ...props
}) => (
  <div className={hasErrorClassAssigner('form-group', validationError)} aria-live="assertive">
    <I18nText
      isA="label"
      className={`control-label ${!isLabelVisible && 'hidden'}`}
      translationKey={titleTranslationKey}
      isRtl={isRtl}
    />
    <input
      className="form-control"
      {...{ name, type }}
      placeholder={t(placeholderTranslationKey)}
      ref={register}
    />
    {validationError && (
      <small className="help-block">
        {getTranslatedValidationMessage(name, titleTranslationKey, validationError.type)}
      </small>
    )}
  </div>
);

А вот мои тесты для SetNewPassword 

describe('<SetNewPassword/>', () => {
  const element = (
    <I18nProvider i18n={fakeI18n}>
      <MemoryRouter>
        <SetNewPassword />
      </MemoryRouter>
    </I18nProvider>
  );

  describe('Fetching', () => {   
    it('should fill <Input/> fields', async () => {
      const { getByPlaceholderText, container } = render(element);
      // const wrapper = mount(element);
      console.log(getByPlaceholderText(/New password/i).value);
      await act(async () => {
        fireEvent.change(getByPlaceholderText(/New password/i), {
          target: { value: 'zaq1@WSX' },
        });
        fireEvent.submit(container.querySelector('form'));
      });
      console.log(getByPlaceholderText(/New password/i).value);

      console.log(container.querySelector('form'));
      expect(Array.from(container.querySelector('.form-control'))[0].innerText).toEqual('zaq1@WSX');
    });

    // it('should fetch after <StandardButton/> is pressed', () => {});
  });
});

Что я хочу сделать , проверяет, обновляется ли значение <Input/>. Но я понятия не имею, как это проверить. Я пробовал wrapper.find('input').at(0).value, value() и getValue(), и любую другую возможность, которую я мог придумать. Самое раздражающее то, что когда я проверяю это с помощью консоли браузера, работает $0.value. Он отображает содержимое поля <input/>.

Как проверить значение здесь?

1 Ответ

1 голос
/ 06 февраля 2020

Пожалуйста, прочитайте этот https://developer.mozilla.org/en-US/docs/Web/API/Document/querySelector

querySelector

возвращает только один элемент, и вы ссылаетесь на него как на массив, поэтому просто измените его, чтобы решить: 

expect(container.querySelector('input.form-control').value).toEqual('email@test.com');

Имейте в виду, что у вас есть два входа

...