Перерисовка компонента в тесте после завершения выборки - PullRequest
Новая
       7

Перерисовка компонента в тесте после завершения выборки

0 голосов
/ 03 марта 2020

Компонент отображается условно в зависимости от ответа выборки. Это работает так: 

export const SetNewPassword = ({ confirmationId }) => {
  const history = useHistory();
  const { langCode } = useParams();
  const [email, setEmail] = useState('');

  useEffect(() => {
    (async () => {
      const userEmailResponse = await getUserByConfirmationId(confirmationId); // This returns a promise
      if (!userEmailResponse.includes('@')) { // This is just handling weird server response
        history.push(feedbackHelper.forInvalidToken(langCode));
      } else {
        setEmail(userEmailResponse);
      }
    })();
  }, []);

  if (email !== '') {
    console.log(true) // this logs
    return (
      <form onSubmit={handleSubmit(onSubmit)}>
        {console.log(1)} // this logs
        <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}
        />
        <StandardButton className="btn main">
          <I18nText translationKey={'profile.edit.password.set.submit'} />
        </StandardButton>
      </form>
    );
  }

  return <div />;
};

А вот мои тесты 

it('should fill <Input/> fields with zaq1@WSX', async () => {
  setupMockedFetch('test@test.test');

  const renderedElement = render(element);

  await act(async () => {
    renderedElement.rerender(null);
  });

  await act(async () => {
    const { getByPlaceholderText } = renderedElement;

    fireEvent.change(getByPlaceholderText(/New password/i), {
      target: { value: 'zaq1@WSX' },
    });

    fireEvent.change(getByPlaceholderText(/Repeat password/i), {
      target: { value: 'zaq1@WSX' },
    });

    await flushPromises();
  });

  const { container } = renderedElement;
  const inputs = container.querySelectorAll('.form-control');

  expect(inputs[0].value).toEqual('zaq1@WSX');
  expect(inputs[1].value).toEqual('zaq1@WSX');
});

А вот тестовый вывод 

  console.error node_modules/react-dom/cjs/react-dom.development.js:530
  Warning: Can't perform a React state update on an unmounted component. This is a no-op, but it indicates a memory leak in your application. To fix, cancel all subscriptions and asynchronous tasks in a useEffect cleanup function.
  in SetNewPassword (at SetNewPassword.test.js:14)
in Router (created by MemoryRouter)
in MemoryRouter (at SetNewPassword.test.js:13)
in I18nProvider (at SetNewPassword.test.js:12)


  Error: Unable to find an element with the placeholder text of: /New password/i

  <body>
  <div />
  </body>

Так что, похоже, это не так Выполните повторную визуализацию компонента.

Таким образом, несмотря на то, что журнал журналов во время повторной визуализации контейнера остается прежним. Как я могу обновить его?

Большая проблема в том, что я не могу использовать mount, потому что я использую react-hook-forms для проверки формы и использование рендера - единственный способ, с помощью которого я нашел его работающим в тестах

...