Как мне на 100% протестировать данный компонент?

Question

[Ratibor Shugaev]

Доброго времени суток. Знакомлюсь с тестированием в React, и никак не могу протестировать компонент на 100%. потратил уже несколько часов и получилось только протестировать сам рендер компонента, но useState и асинхронную функцию с апдейтом стейта никак не получается. Везде базовые примеры, нагуглить не смог. (использую react testing library). Спасибо за помощь!

interface IMainPageProps {
  httpClient: IHttpClient;
}

export const MainPageContainer: React.FunctionComponent<IMainPageProps> = ({ httpClient }) => {
  const [data, setData] = React.useState<ITabData>();

  const getCardData = async () => {
    const cardDataModel = new CardDataModel();

    httpClient.fetch(cardDataModel).then((result: ITabData) => {
      if (result) setData(result);
    });
  };

  const ping = async () => {
    pingAction();
  };

  return (
    <div data-testid="mainPageContainer-test-component">
      <button
        style={{ margin: '100px 0 0 130px' }}
        onClick={getCardData}
        type="button"
      >
        Load data
      </button>
      {data ? (
        <MainPage
          ping={ping}
          data={data}
        />
      ) : null}

    </div>
  );
};

Answer 1

[Антон Романков]

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

Будет еще четвертый кейс для тестирования — вызов функции ping. Но это стоит делать в тесте компонента MainPage.
Функцию запроса и ответы от сервера можно замокать.