使用`react-hook-form`库将测试内容写入组件

Question

我有一个带有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/>字段的内容。

如何在这里测试值？

Answer 1

请阅读此一https://developer.mozilla.org/en-US/docs/Web/API/Document/querySelector

querySelector

仅返回一个元素，您引用它是因为它是一个数组，因此，只需对此进行更改即可解决：

expect(container.querySelector('input.form-control').value).toEqual('[email protected]');

请记住，您有两个输入